[MDL-59817] Atto Accessibility Checker not catching accessibility issues in Firefox - Moodle Tracker

XML

Word

Printable

Details

Type: Bug
Status: Closed
Priority: Minor
Resolution: Fixed
Affects Version/s: 3.2.4, 3.3, 3.3.1, 3.8.1
Fix Version/s: 3.7.5, 3.8.2
Component/s: Accessibility, Text editor Atto
Labels:
- ci
- release_notes

Affected Branches:
MOODLE_32_STABLE, MOODLE_33_STABLE, MOODLE_38_STABLE
Fixed Branches:
MOODLE_37_STABLE, MOODLE_38_STABLE
Pull from Repository:
git://github.com/andrewnicols/moodle.git
Pull Main Branch:
~~MDL-59817~~-master
Pull Main Diff URL:
https://github.com/andrewnicols/moodle/compare/77d1c41502...MDL-59817-master

Testing Instructions:

Hide

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
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

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

- Sort By Name
- Sort By Date
- Ascending
- Descending
- Thumbnails
- List
- Download All

MDL-59817.PNG
32 kB
15/Jan/20 2:14 PM

Issue Links

is duplicated by

MDL-61643 Accessibility checker (Atto) generates false positives on HTML formatted-text

Closed

will help resolve

MDL-66979 Switch all the behat testing to the new W3C drivers

Closed

Activity

People

Assignee:: Andrew Lyons

Reporter:: Alan McCoy

Peer reviewer:: Jun Pataleta

Integrator:: Sara Arjona (@sarjona)

Tester:: Anna Carissa Sadia

Participants:: Adam Maltpress, Alan McCoy, Andrew Lyons, Anna Carissa Sadia, CiBoT, David Mudrák (@mudrd8mz), Glenn Pillsbury, Jun Pataleta, Sara Arjona (@sarjona)

Votes:: 8 Vote for this issue

Watchers:: 14 Start watching this issue

Dates

Created:: 16/Aug/17 11:38 AM

Updated:: 04/Mar/20 6:46 PM

Resolved:: 17/Jan/20 1:57 AM

Fix Release Date:: 9/Mar/20

Time Tracking

Estimated:

Not Specified

Remaining:

Logged:

4h 50m