1550040 - [contrast] Badge in the main tree can be confused with the "contrast" button in toolbar

Status: RESOLVED FIXED

(DevTools :: Accessibility Tools, enhancement)

Description

[Florens Verschelde :fvsch]

Small UX issue: the toolbar button and the "contrast" badge in the tree look similar, which can be confusing.

Especially in this scenario:

1. Spot the "contrast" button in the toolbar.
2. Click the button. Wait for results.
3. Results seem to contain "contrast" buttons too, and it's unclear if they should be clicked.

Note: just my perception; haven't done any user testing.
We can close this bug if we think it's not an issue.

Comment 1

[Florens Verschelde :fvsch]

Attachment: accessibility-contrast-badge-icon-test.png

One possible solution would be to show a "warning" icon in the tree badges to set them apart from the button.

Icon used is a 10x10px warning icon like we used to have in the console (current one is 12x12):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10">
  <path fill="context-fill" fill-rule="evenodd" d="M4 .6a1.13 1.13 0 0 1 2 0l3.88 7.8c.17.35.17.75-.04 1.07-.2.33-.58.53-.96.53H1.1c-.37 0-.74-.2-.94-.52-.2-.33-.2-.73-.04-1.07L4 .6zm1 6.2c.54 0 1 .46 1 1s-.46 1-1 1c-.55 0-1-.46-1-1s.45-1 1-1zm0-4.3c.54 0 1 .46 1 1V5c0 .54-.46 1-1 1-.55 0-1-.46-1-1V3.5c0-.54.45-1 1-1z"/>
</svg>

Comment 2

[Florens Verschelde :fvsch]

Attachment: Bug 1550040 - Add warning icon to contrast warning badge; r=yzen

Comment 3

[Florens Verschelde :fvsch]

Attachment: patch-result-light-2x.png

I made an even smaller warning icon (9x9):
https://www.figma.com/file/eIiHpT9Eg6hIA54nz1RIT9xh/Tiny-warning-icon

See attachment for how it looks in context.

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/5df94e4b78cc
Add warning icon to contrast warning badge; r=yzen,mtigley

Comment 5

[Florens Verschelde :fvsch]

Victoria, I forgot about the UI review and landed the patch. But we can always make a follow-up patch if we want to change the icon.

Comment 7

[Raul Gurzau (:RaulG)]

https://hg.mozilla.org/mozilla-central/rev/5df94e4b78cc

Comment 8

[Victoria Wang [:victoria]]

Victoria, I forgot about the UI review and landed the patch. But we can always make a follow-up patch if we want to change the icon.

No problem - it looks great! Thanks for working on this!