Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-59817

Atto Accessibility Checker not catching accessibility issues in Firefox

    XMLWordPrintable

    Details

    • Testing Instructions:
      Hide

      Notes

      Must be tested in multiple browsers:

      1. Chrome
      2. Firefox
      3. Edge

      Test

      1. Log in as any user
      2. Open the User menu -> Profile
      3. Choose the "Edit profile" link
      4. Find the "Description field"
      5. Expand the buttosn and switch to HTML mode
      6. Paste the following in:

        <h2>No parent</h2>
        <h3>Named colours</h3>
        <p>This is ordinary text</p>
        <p style="
        color: black;
        background-color: white;
        ">This is black on white</p>
        <p style="
        color: white;
        background-color: black;
        ">This is white on black</p>
        <p style="
        color: white;
        background-color: white;
        ">FAIL 1: This is white on white</p>
        <p style="
        color: black;
        background-color: black;
        ">FAIL 2: This is black on black</p>
        <p style="
        color: black;
        background-color: transparent;
        ">This is Black on transparent</p>
         
        <h3>RGB colours</h3>
        <p>This is ordinary text</p>
        <p style="
        color: rgb(0, 0, 0);
        background-color: rgb(255, 255, 255);
        ">This is black on white</p>
        <p style="
        color: rgb(255, 255, 255);
        background-color: rgb(0,0,0);
        ">This is white on black</p>
        <p style="
        color: rgb(255, 255, 255);
        background-color: rgb(255, 255, 255);
        ">FAIL 3: This is white on white</p>
        <p style="
        color: rgb(0, 0, 0);
        background-color: rgb(0,0,0);
        ">FAIL 4: This is black on black</p>
        <p style="
        color: rgb(0, 0, 0);
        background-color: transparent;
        ">This is Black on transparent</p>
         
        <h3>RGBA colours</h3>
        <p>This is ordinary text</p>
        <p style="
        color: rgba(0, 0, 0, 1);
        background-color: rgba(255, 255, 255, 1);
        ">This is black on white</p>
        <p style="
        color: rgba(255, 255, 255, 1);
        background-color: rgba(0, 0, 0, 1);
        ">This is white on black</p>
        <p style="
        color: rgba(255, 255, 255, 1);
        background-color: rgba(255, 255, 255, 1);
        ">FAIL 5: This is white on white</p>
        <p style="
        color: rgba(0, 0, 0, 1);
        background-color: rgba(0,0,0, 1);
        ">FAIL 6: This is black on black</p>
        <p style="
        color: rgba(0, 0, 0, 1);
        background-color: rgba(0, 0, 0, 0);
              ">This is Black on transparent</p>
        <div style="
            background: black;
            color: white;
        ">
            <h2>Parent div with white on black as default</h2>
            <h3>Named colours</h3>
            <p>This is ordinary text</p>
            <p style="
            color: black;
            background-color: white;
        ">This is black on white</p>
            <p style="
            color: white;
            background-color: black;
        ">This is white on black</p>
            <p style="
            color: white;
            background-color: white;
        ">FAIL 7: This is white on white</p>
            <p style="
            color: black;
            background-color: black;
        ">FAIL 8: This is black on black</p>
            <p id="fail09" style="
            color: black;
            background-color: transparent;
        ">FAIL 9: This is Black on transparent</p>
         
            <h3>RGB colours</h3>
            <p>This is ordinary text</p>
            <p style="
            color: rgb(0, 0, 0);
            background-color: rgb(255, 255, 255);
        ">This is black on white</p>
            <p style="
            color: rgb(255, 255, 255);
            background-color: rgb(0,0,0);
        ">This is white on black</p>
            <p style="
            color: rgb(255, 255, 255);
            background-color: rgb(255, 255, 255);
        ">FAIL 10: This is white on white</p>
            <p style="
            color: rgb(0, 0, 0);
            background-color: rgb(0,0,0);
        ">FAIL 11: This is black on black</p>
            <p id="fail12" style="
            color: rgb(0, 0, 0);
            background-color: transparent;
        ">FAIL 12: This is Black on transparent</p>
         
            <h3>RGBA colours</h3>
            <p>This is ordinary text</p>
            <p style="
            color: rgba(0, 0, 0, 1);
            background-color: rgba(255, 255, 255, 1);
        ">This is black on white</p>
            <p style="
            color: rgba(255, 255, 255, 1);
            background-color: rgba(0, 0, 0, 1);
        ">This is white on black</p>
            <p style="
            color: rgba(255, 255, 255, 1);
            background-color: rgba(255, 255, 255, 1);
        ">FAIL 13: This is white on white</p>
            <p style="
            color: rgba(0, 0, 0, 1);
            background-color: rgba(0,0,0, 1);
        ">FAIL 14: This is black on black</p>
            <p id="fail15" style="
            color: rgba(0, 0, 0, 1);
            background-color: rgba(0, 0, 0, 0);
                  ">FAIL 15: This is Black on transparent</p>
        </div>
        

      7. Switch out of HTML mode
      8. Press the "Accessibility checker" button
        1. Confirm that 15 items were reported
        2. Confirm all of the reported items were marked as FAIL
      Show
      Notes Must be tested in multiple browsers: Chrome Firefox Edge Test Log in as any user Open the User menu -> Profile Choose the "Edit profile" link Find the "Description field" Expand the buttosn and switch to HTML mode Paste the following in: <h2>No parent</h2> <h3>Named colours</h3> <p>This is ordinary text</p> <p style=" color: black; background-color: white; ">This is black on white</p> <p style=" color: white; background-color: black; ">This is white on black</p> <p style=" color: white; background-color: white; ">FAIL 1: This is white on white</p> <p style=" color: black; background-color: black; ">FAIL 2: This is black on black</p> <p style=" color: black; background-color: transparent; ">This is Black on transparent</p> <h3>RGB colours</h3> <p>This is ordinary text</p> <p style=" color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); ">This is black on white</p> <p style=" color: rgb(255, 255, 255); background-color: rgb(0,0,0); ">This is white on black</p> <p style=" color: rgb(255, 255, 255); background-color: rgb(255, 255, 255); ">FAIL 3: This is white on white</p> <p style=" color: rgb(0, 0, 0); background-color: rgb(0,0,0); ">FAIL 4: This is black on black</p> <p style=" color: rgb(0, 0, 0); background-color: transparent; ">This is Black on transparent</p> <h3>RGBA colours</h3> <p>This is ordinary text</p> <p style=" color: rgba(0, 0, 0, 1); background-color: rgba(255, 255, 255, 1); ">This is black on white</p> <p style=" color: rgba(255, 255, 255, 1); background-color: rgba(0, 0, 0, 1); ">This is white on black</p> <p style=" color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1); ">FAIL 5: This is white on white</p> <p style=" color: rgba(0, 0, 0, 1); background-color: rgba(0,0,0, 1); ">FAIL 6: This is black on black</p> <p style=" color: rgba(0, 0, 0, 1); background-color: rgba(0, 0, 0, 0); ">This is Black on transparent</p> <div style=" background: black; color: white; "> <h2>Parent div with white on black as default</h2> <h3>Named colours</h3> <p>This is ordinary text</p> <p style=" color: black; background-color: white; ">This is black on white</p> <p style=" color: white; background-color: black; ">This is white on black</p> <p style=" color: white; background-color: white; ">FAIL 7: This is white on white</p> <p style=" color: black; background-color: black; ">FAIL 8: This is black on black</p> <p id="fail09" style=" color: black; background-color: transparent; ">FAIL 9: This is Black on transparent</p> <h3>RGB colours</h3> <p>This is ordinary text</p> <p style=" color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); ">This is black on white</p> <p style=" color: rgb(255, 255, 255); background-color: rgb(0,0,0); ">This is white on black</p> <p style=" color: rgb(255, 255, 255); background-color: rgb(255, 255, 255); ">FAIL 10: This is white on white</p> <p style=" color: rgb(0, 0, 0); background-color: rgb(0,0,0); ">FAIL 11: This is black on black</p> <p id="fail12" style=" color: rgb(0, 0, 0); background-color: transparent; ">FAIL 12: This is Black on transparent</p> <h3>RGBA colours</h3> <p>This is ordinary text</p> <p style=" color: rgba(0, 0, 0, 1); background-color: rgba(255, 255, 255, 1); ">This is black on white</p> <p style=" color: rgba(255, 255, 255, 1); background-color: rgba(0, 0, 0, 1); ">This is white on black</p> <p style=" color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1); ">FAIL 13: This is white on white</p> <p style=" color: rgba(0, 0, 0, 1); background-color: rgba(0,0,0, 1); ">FAIL 14: This is black on black</p> <p id="fail15" style=" color: rgba(0, 0, 0, 1); background-color: rgba(0, 0, 0, 0); ">FAIL 15: This is Black on transparent</p> </div> Switch out of HTML mode Press the "Accessibility checker" button Confirm that 15 items were reported Confirm all of the reported items were marked as FAIL
    • Affected Branches:
      MOODLE_32_STABLE, MOODLE_33_STABLE, MOODLE_38_STABLE
    • Fixed Branches:
      MOODLE_37_STABLE, MOODLE_38_STABLE
    • Pull 3.7 Branch:
    • Pull 3.8 Branch:
    • Pull Master Branch:
      MDL-59817-master

      Description

      Test Case:

      In Firefox (54.0.1):
      1. Opened course topic editor (using Atto as default editor)
      2. Entered text. (no content color changes from the default "clean" theme font and background colors)
      3. Ran accessibility checker
      4. All entered text flagged with the following issue: "The colors of the foreground and background text do not have enough contrast. To fix this warning, change either foreground or background color of the text so that it is easier to read."
      5. Closed accessibility checker window. Viewed content HTML (Atto editor's "HTML" button)
      6. Removed opening and closing <p> tags.
      7. Switched back to visual editor and ran accessibility checker again.
      8. Check successful with the following message: "Congratulations, no accessibility problems found!"
      9. Closed accessibility checker window. Selected some text and changed the text color to white. (Note: Content backround is also white)
      10. Ran accessibility checker again.
      11. Check successful with the following message: "Congratulations, no accessibility problems found!" (even though the white text was not visible)
      12. Closed accessibility checker window. Selected other text and changed background to green and text color to red.
      13. Ran accessibility checker again.
      14. All entered text flagged with the following issue: "The colors of the foreground and background text do not have enough contrast. To fix this warning, change either foreground or background color of the text so that it is easier to read."

      In Google Chrome (60.0.3112.90):
      Differences from Firefox results...

      • Black/dark grey text on white background passes (with and without <p> tags)
      • White text on white background fails
      • Red text on green background fails

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              dobedobedoh Andrew Nicols
              Reporter:
              alanrmccoy Alan McCoy
              Peer reviewer:
              Jun Pataleta
              Integrator:
              Sara Arjona (@sarjona)
              Tester:
              Anna Carissa Sadia
              Participants:
              Component watchers:
              Adrian Greeve, Jake Dallimore, Mathew May, Mihail Geshoski, Peter Dias, Andrew Nicols, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze
              Votes:
              8 Vote for this issue
              Watchers:
              15 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:
                Fix Release Date:
                9/Mar/20

                  Time Tracking

                  Estimated:
                  Original Estimate - Not Specified
                  Not Specified
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 4 hours, 50 minutes
                  4h 50m