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

Status: RESOLVED FIXED

(DevTools :: Accessibility Tools, enhancement)

Description

[Yura Zenevich [:yzen] (please use "needinfo")]

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.

Comment 1

[Yura Zenevich [:yzen] (please use "needinfo")]

Attachment: Bug 1518487 - ensure that accessible audit can be performed without requiring highlighting. r=pbro

MozReview-Commit-ID: CUFTQIS9WPv

Comment 2

[Yura Zenevich [:yzen] (please use "needinfo")]

Attachment: Bug 1518487 - add ability to customize the className of the LearnMoreLink component. r=gl

MozReview-Commit-ID: 2Ft28e4sbi

Depends on D17969

Comment 3

[Yura Zenevich [:yzen] (please use "needinfo")]

Attachment: Bug 1518487 - implement accessible accordion component identical to the one used in debugger.html. r=gl

MozReview-Commit-ID: BzTSPJQxYfi

Depends on D17970

Comment 4

[Yura Zenevich [:yzen] (please use "needinfo")]

Attachment: Bug 1518487 - implement simple accessible list component similar to the one used in debugger.html and memory panel. r=gl

MozReview-Commit-ID: 2KCXrB9zCr0

Depends on D17971

Comment 5

[Yura Zenevich [:yzen] (please use "needinfo")]

Attachment: Bug 1518487 - implement ColorContrast component to display a11y audit information for text color contrast. r=gl

MozReview-Commit-ID: DoOp2JhaQyD

Depends on D17972

Comment 6

[Yura Zenevich [:yzen] (please use "needinfo")]

Attachment: Bug 1518487 - make sure VirtualizedTree keyboard focus scrolling works for trees that are themselves inside scrollable containers. r=nchevobbe

MozReview-Commit-ID: 4HO7WDbyPKA

Depends on D17973

Comment 7

[Yura Zenevich [:yzen] (please use "needinfo")]

Attachment: Bug 1518487 - adding new checks section in the accessibility panel's sidebar. r=pbro,gl

MozReview-Commit-ID: AAKt7zDvom8

Depends on D17974

Comment 8

[Yura Zenevich [:yzen] (please use "needinfo")]

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

Comment 9

[Victoria Wang [: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

Comment 10

[Martin Balfanz [:mbalfanz]]

Attachment: Screenshot_2019-02-01 16.35.04_j5cTlO.png

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

Comment 11

[Yura Zenevich [:yzen] (please use "needinfo")]

Attachment: Bug 1518487 - ensure that accessible audit can be performed without requiring highlighting. r=pbro

MozReview-Commit-ID: CUFTQIS9WPv

Comment 12

[Yura Zenevich [:yzen] (please use "needinfo")]

Attachment: Bug 1518487 - add ability to customize the className of the LearnMoreLink component. r=gl

MozReview-Commit-ID: 2Ft28e4sbi

Depends on D19048

Comment 13

[Yura Zenevich [:yzen] (please use "needinfo")]

Attachment: Bug 1518487 - implement accessible accordion component identical to the one used in debugger.html. r=nchevobbe

MozReview-Commit-ID: BzTSPJQxYfi

Depends on D19049

Comment 14

[Yura Zenevich [:yzen] (please use "needinfo")]

Attachment: Bug 1518487 - 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

MozReview-Commit-ID: 4HO7WDbyPKA

Depends on D19050

Comment 15

[Yura Zenevich [:yzen] (please use "needinfo")]

Attachment: Bug 1518487 - implement simple accessible list component similar to the one used in debugger.html and memory panel. r=nchevobbe

MozReview-Commit-ID: 2KCXrB9zCr0

Depends on D19051

Comment 16

[Yura Zenevich [:yzen] (please use "needinfo")]

Attachment: Bug 1518487 - implement ColorContrast component to display a11y audit information for text color contrast. r=gl

MozReview-Commit-ID: DoOp2JhaQyD

Depends on D19052

Comment 17

[Yura Zenevich [:yzen] (please use "needinfo")]

Attachment: Bug 1518487 - adding new checks section in the accessibility panel's sidebar. r=pbro,gl

MozReview-Commit-ID: AAKt7zDvom8

Depends on D19053

Comment 18

[Yura Zenevich [:yzen] (please use "needinfo")]

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

Comment 19

[Yura Zenevich [:yzen] (please use "needinfo")]

(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

Comment 20

[Pulsebot]

Pushed by [e-mail]:
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

Comment 21

[Natalia Csoregi [:nataliaCs]]

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

Comment 22

[Pulsebot]

Pushed by [e-mail]:
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

Comment 23

[Sebastian Hengst [:aryx] (needinfo me if it's about an intermittent or backout)]

https://hg.mozilla.org/mozilla-central/rev/f1c16e2af72f
https://hg.mozilla.org/mozilla-central/rev/7fe5ccd66c8f
https://hg.mozilla.org/mozilla-central/rev/bcda0131d8f5
https://hg.mozilla.org/mozilla-central/rev/4923cfe749d5
https://hg.mozilla.org/mozilla-central/rev/8de6b5e7abb3
https://hg.mozilla.org/mozilla-central/rev/b8b41d218866
https://hg.mozilla.org/mozilla-central/rev/090304ca37d9