Closed Bug 1518487 Opened 8 months ago Closed 7 months ago

Add color and contrast check information to the a11y panel sidebar.

Categories

(DevTools :: Accessibility Tools, enhancement)

enhancement
Not set

Tracking

(firefox67 fixed)

RESOLVED FIXED
Firefox 67
Tracking Status
firefox67 --- fixed

People

(Reporter: yzen, Assigned: yzen)

References

(Depends on 2 open bugs, Blocks 1 open bug)

Details

Attachments

(8 files, 7 obsolete files)

16.26 KB, image/png
Details
47 bytes, text/x-phabricator-request
Details | Review
47 bytes, text/x-phabricator-request
Details | Review
47 bytes, text/x-phabricator-request
Details | Review
47 bytes, text/x-phabricator-request
Details | Review
47 bytes, text/x-phabricator-request
Details | Review
47 bytes, text/x-phabricator-request
Details | Review
47 bytes, text/x-phabricator-request
Details | Review

Right now that information is only available through the highlighter that does not have keyboard alternative. It should also be present in the sidebar to be accessible to the non-mouse users.

Blocks: 1522207

MozReview-Commit-ID: 2Ft28e4sbi

Depends on D17969

MozReview-Commit-ID: BzTSPJQxYfi

Depends on D17970

MozReview-Commit-ID: 2KCXrB9zCr0

Depends on D17971

MozReview-Commit-ID: DoOp2JhaQyD

Depends on D17972

MozReview-Commit-ID: AAKt7zDvom8

Depends on D17974

Comment on attachment 9039894 [details]
Bug 1518487 - adding new checks section in the accessibility panel's sidebar. r=pbro,gl

Hi Victoria,

Could you please review the new Checks/Colour Contrast section in the sidebar in a11y panel. Here's the build for convenience:

https://treeherder.mozilla.org/#/jobs?repo=try&revision=47700e59221ac49f7ad3055d8bfd87d478d04ffe

Attachment #9039894 - Flags: ui-review?(victoria)

Comment on attachment 9039894 [details]
Bug 1518487 - adding new checks section in the accessibility panel's sidebar. r=pbro,gl

Hi Yura, this is awesome!

  • A bit more line height would be great. We have some brand new contributor work on a standard for this - basically, 20px high rows, with 4px accordion content padding. https://github.com/devtools-html/ux/issues/45#issuecomment-457021260

  • I'd non-italicize the WCAG sentence as it's starting to feel like too many different text styles for me. We could instead tone it down by coloring it Gray 50.

  • Not sure if it makes sense to have the whole Checks section be selectable by mouse. The blue left border and persistent gray background seem unnecessary.

  • Maybe a single title of "Color Contrast," with no extra "Contrast:" label would be better. We could also bump up the size of the color wells. It could float to the left of both the contrast value and the info text. (Of course this is pretty polish-y and could be for a different patch)

Color Contrast
[[  ]   12.43 AAA ✔︎ 
 [  ]]  Meets WCAG AAA standards for accessible text. Learn more
Attachment #9039894 - Flags: ui-review?(victoria) → ui-review+
See Also: → 1523028

It would be good to also add an "empty" state, similar to what we have in the inspector panels. See screenshot attached :)

Depends on: 1524596
Blocks: 1525939

MozReview-Commit-ID: 2Ft28e4sbi

Depends on D19048

MozReview-Commit-ID: AAKt7zDvom8

Depends on D19053

Attachment #9039888 - Attachment is obsolete: true
Attachment #9039889 - Attachment is obsolete: true
Attachment #9039890 - Attachment is obsolete: true
Attachment #9039891 - Attachment is obsolete: true
Attachment #9039892 - Attachment is obsolete: true
Attachment #9039893 - Attachment is obsolete: true
Attachment #9039894 - Attachment is obsolete: true

Comment on attachment 9042267 [details]
Bug 1518487 - adding new checks section in the accessibility panel's sidebar. r=pbro,gl

Carrying over r+ from Victoria

Attachment #9042267 - Flags: ui-review+

(In reply to Victoria Wang [:victoria] from comment #9)

Comment on attachment 9039894 [details]
Bug 1518487 - adding new checks section in the accessibility panel's sidebar. r=pbro,gl

Hi Yura, this is awesome!

  • A bit more line height would be great. We have some brand new contributor work on a standard for this - basically, 20px high rows, with 4px accordion content padding. https://github.com/devtools-html/ux/issues/45#issuecomment-457021260

  • I'd non-italicize the WCAG sentence as it's starting to feel like too many different text styles for me. We could instead tone it down by coloring it Gray 50.

  • Not sure if it makes sense to have the whole Checks section be selectable by mouse. The blue left border and persistent gray background seem unnecessary.

This is really going to become a list of things so currently selected list item will make more sense soon, I think.

  • Maybe a single title of "Color Contrast," with no extra "Contrast:" label would be better. We could also bump up the size of the color wells. It could float to the left of both the contrast value and the info text. (Of course this is pretty polish-y and could be for a different patch)
Color Contrast
[[  ]   12.43 AAA ✔︎ 
 [  ]]  Meets WCAG AAA standards for accessible text. Learn more
Pushed by yura.zenevich@gmail.com:
https://hg.mozilla.org/integration/autoland/rev/bc6cc126a9b4
ensure that accessible audit can be performed without requiring highlighting. r=pbro
https://hg.mozilla.org/integration/autoland/rev/62f78c63d9f1
add ability to customize the className of the LearnMoreLink component. r=gl
https://hg.mozilla.org/integration/autoland/rev/0d2800976a32
implement accessible accordion component identical to the one used in debugger.html. r=nchevobbe
https://hg.mozilla.org/integration/autoland/rev/fc1687cc488d
make sure VirtualizedTree keyboard focus scrolling works for trees that are themselves inside scrollable containers. Use the same approach as the tree component in debugger.html. r=nchevobbe
https://hg.mozilla.org/integration/autoland/rev/d55e9ed92676
implement simple accessible list component similar to the one used in debugger.html and memory panel. r=nchevobbe
https://hg.mozilla.org/integration/autoland/rev/8031278b4a17
implement ColorContrast component to display a11y audit information for text color contrast. r=gl
https://hg.mozilla.org/integration/autoland/rev/7a4f96a4d71c
adding new checks section in the accessibility panel's sidebar. r=pbro

Backed out for failures on devtools/client/accessibility/test/browser/browser_accessibility_sidebar_checks.js

backout: https://hg.mozilla.org/integration/autoland/rev/fa0dd711bbf7c3d5cbe685aff19fa1811380476d

push: https://treeherder.mozilla.org/#/jobs?repo=autoland&selectedJob=227749484&revision=7a4f96a4d71cfc6a03d79ad5e673a4722841e74d

Due to the bustage that affected this push, the devtools were first seen on this push: https://treeherder.mozilla.org/#/jobs?repo=autoland&selectedJob=227749484&searchStr=devtools&revision=5f738ddb6e4ab871f8a29f3e14fadc765c0f3129

failure log: https://treeherder.mozilla.org/logviewer.html#/jobs?job_id=227757516&repo=autoland&lineNumber=2445

task 2019-02-11T22:16:32.320Z] 22:16:32 INFO - Waiting for state predicate "({ details }) => {
[task 2019-02-11T22:16:32.320Z] 22:16:32 INFO - const { audit } = details;
[task 2019-02-11T22:16:32.321Z] 22:16:32 INFO -
[task 2019-02-11T22:16:32.322Z] 22:16:32 INFO - for (const key in expectedState) {
[task 2019-02-11T22:16:32.323Z] 22:16:32 INFO - const expected = expectedState[key];
[task 2019-02-11T22:16:32.323Z] 22:16:32 INFO - if (expected && typeof expected === "object") {
[task 2019-02-11T22:16:32.324Z] 22:16:32 INFO - if (JSON.stringify(audit[key], parseNumReplacer) !==
[task 2019-02-11T22:16:32.325Z] 22:16:32 INFO - JSON.stringify(expected, parseNumReplacer)) {
[task 2019-02-11T22:16:32.326Z] 22:16:32 INFO - return false;
[task 2019-02-11T22:16:32.327Z] 22:16:32 INFO - }
[task 2019-02-11T22:16:32.328Z] 22:16:32 INFO - } else if (audit && audit[key] !== expected) {
[task 2019-02-11T22:16:32.329Z] 22:16:32 INFO - return false;
[task 2019-02-11T22:16:32.329Z] 22:16:32 INFO - }
[task 2019-02-11T22:16:32.330Z] 22:16:32 INFO - }
[task 2019-02-11T22:16:32.331Z] 22:16:32 INFO -
[task 2019-02-11T22:16:32.332Z] 22:16:32 INFO - ok(true, "Audit state is correct.");
[task 2019-02-11T22:16:32.333Z] 22:16:32 INFO - return true;
[task 2019-02-11T22:16:32.334Z] 22:16:32 INFO - }"
[task 2019-02-11T22:16:32.336Z] 22:16:32 INFO - Buffered messages finished
[task 2019-02-11T22:16:32.337Z] 22:16:32 INFO - TEST-UNEXPECTED-FAIL | devtools/client/accessibility/test/browser/browser_accessibility_sidebar_checks.js | Test timed out -
[task 2019-02-11T22:16:32.338Z] 22:16:32 INFO - Removing tab.
[task 2019-02-11T22:16:32.339Z] 22:16:32 INFO - Waiting for event: 'TabClose' on [object XULElement].
[task 2019-02-11T22:16:32.340Z] 22:16:32 INFO - Got event: 'TabClose' on [object XULElement].
[task 2019-02-11T22:16:32.341Z] 22:16:32 INFO - Tab removed and finished closing
[task 2019-02-11T22:16:32.342Z] 22:16:32 INFO - Cleaning up...
[task 2019-02-11T22:16:32.589Z] 22:16:32 INFO - GECKO(2535) | MEMORY STAT | vsize 2068MB | residentFast 347MB | heapAllocated 111MB
[task 2019-02-11T22:16:32.592Z] 22:16:32 INFO - TEST-OK | devtools/client/accessibility/test/browser/browser_accessibility_sidebar_checks.js | took 45964ms

Flags: needinfo?(yzenevich)
Pushed by yura.zenevich@gmail.com:
https://hg.mozilla.org/integration/autoland/rev/f1c16e2af72f
ensure that accessible audit can be performed without requiring highlighting. r=pbro
https://hg.mozilla.org/integration/autoland/rev/7fe5ccd66c8f
add ability to customize the className of the LearnMoreLink component. r=gl
https://hg.mozilla.org/integration/autoland/rev/bcda0131d8f5
implement accessible accordion component identical to the one used in debugger.html. r=nchevobbe
https://hg.mozilla.org/integration/autoland/rev/4923cfe749d5
make sure VirtualizedTree keyboard focus scrolling works for trees that are themselves inside scrollable containers. Use the same approach as the tree component in debugger.html. r=nchevobbe
https://hg.mozilla.org/integration/autoland/rev/8de6b5e7abb3
implement simple accessible list component similar to the one used in debugger.html and memory panel. r=nchevobbe
https://hg.mozilla.org/integration/autoland/rev/b8b41d218866
implement ColorContrast component to display a11y audit information for text color contrast. r=gl
https://hg.mozilla.org/integration/autoland/rev/090304ca37d9
adding new checks section in the accessibility panel's sidebar. r=pbro
Flags: needinfo?(yzenevich)
Depends on: 1544721
You need to log in before you can comment on or make changes to this bug.