1505848 - Improve how color contrast ratio indicator works in accessibility highlighter.

Status: RESOLVED FIXED

(DevTools :: Accessibility Tools, enhancement)

Description

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

Accessibility highlighter currently can only handle well simple cases where color and background are set on the element itself or in its ancestry. It does not deal well with cases like:

* Handling text nodes directly (which is not possible via simple pointer event listening)
* Handling text that is laid out differently from being contained by its ancestry
* Gradients
* Background images

The approach that we would like to investigate would use canvas API to determine contrast ratios of pixel values between 2 different images: one with text as is and another with text where color and text-shadows are unset to be displayed as transparent.

The only unsolved use case that will remain are the text nodes that have transparent color but have the background set to background-clip: text.

Comment 1

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

Attachment: Bug 1505848 - change the way accessible object is determined when using accessible highlighter. r?pbro

MozReview-Commit-ID: IiUGsFojZP1

Comment 2

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

Attachment: Bug 1505848 - expose some of the css color utils and ensure that RGBA alpha value is not cut off at 1 decimal. r?pbro

MozReview-Commit-ID: 6xTExCWRz4p

Depends on D11366

Comment 3

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

Attachment: Bug 1505848 - switch from CSS based approach to calculating contrast to canvas one, that also handles gradients and images. r?pbro

MozReview-Commit-ID: JS39hAY571f

Depends on D11367

Comment 4

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

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

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/d5c99e37f121
change the way accessible object is determined when using accessible highlighter. r=pbro
https://hg.mozilla.org/integration/autoland/rev/d051864f170d
expose some of the css color utils and ensure that RGBA alpha value is not cut off at 1 decimal. r=pbro
https://hg.mozilla.org/integration/autoland/rev/403db98e8ac8
switch from CSS based approach to calculating contrast to canvas one, that also handles gradients and images. r=jdescottes,pbro

Comment 6

[Bogdan Tara[:bogdan_tara | bogdant]]

https://hg.mozilla.org/mozilla-central/rev/d5c99e37f121
https://hg.mozilla.org/mozilla-central/rev/d051864f170d
https://hg.mozilla.org/mozilla-central/rev/403db98e8ac8

Comment 7

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

Comment on attachment 9023743 [details]
Bug 1505848 - change the way accessible object is determined when using accessible highlighter. r?pbro

[Beta/Release Uplift Approval Request]

Feature/Bug causing the regression: Bug 1505848

User impact if declined: Accessibility panel (DevTools) Users will not have an accurate color contrast indicator. It will aslo be confusing in many cases because it currently shows contrast score for elements it never should.

Is this code covered by automated tests?: No

Has the fix been verified in Nightly?: Yes

Needs manual test from QE?: No

If yes, steps to reproduce: 

List of other uplifts needed: None

Risk to taking this patch: Low

Why is the change risky/not risky? (and alternatives if risky): Only affects users that use highlighter in the accessibility panel (developer tools) - about 20K DAU max.

String changes made/needed: None

Comment 8

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

Comment on attachment 9023744 [details]
Bug 1505848 - expose some of the css color utils and ensure that RGBA alpha value is not cut off at 1 decimal. r?pbro

[Beta/Release Uplift Approval Request]

Feature/Bug causing the regression: Bug 1505848

User impact if declined: Accessibility panel (DevTools) Users will not have an accurate color contrast indicator. It will aslo be confusing in many cases because it currently shows contrast score for elements it never should.

Is this code covered by automated tests?: No

Has the fix been verified in Nightly?: Yes

Needs manual test from QE?: No

If yes, steps to reproduce: 

List of other uplifts needed: None

Risk to taking this patch: Low

Why is the change risky/not risky? (and alternatives if risky): Only affects highlighter users of the accessibility panel (Devtools) about 20K DAU max

String changes made/needed: None

Comment 9

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

Comment on attachment 9023746 [details]
Bug 1505848 - switch from CSS based approach to calculating contrast to canvas one, that also handles gradients and images. r?pbro

[Beta/Release Uplift Approval Request]

Feature/Bug causing the regression: Bug 1505848

User impact if declined: Accessibility panel (DevTools) Users will not have an accurate color contrast indicator. It will aslo be confusing in many cases because it currently shows contrast score for elements it never should.

Is this code covered by automated tests?: No

Has the fix been verified in Nightly?: Yes

Needs manual test from QE?: No

If yes, steps to reproduce: 

List of other uplifts needed: None

Risk to taking this patch: Low

Why is the change risky/not risky? (and alternatives if risky): Only affects highlighter users of the accessibility panel (Devtools) about 20K DAU max

String changes made/needed: accessibility.contrast.ratio.error, accessibility.contrast.ratio.label in devtools/shared/locales/en-US/accessibility.properties

Comment 10

[Julien Cristau [:jcristau]]

Comment on attachment 9023743 [details]
Bug 1505848 - change the way accessible object is determined when using accessible highlighter. r?pbro

Sorry, not going to add new strings to beta 2 weeks before RC.