fix(aria/toolbar): show outline on selected items when forced colors active in examples #32708
Conversation
adolgachev
force-pushed
the
aria-toolbar-active
branch
from
68d5747 to
4494a25
Compare
adolgachev
added
Accessibility
|
Deployed dev-app for c0a5bfb to: https://ng-dev-previews-comp--pr-angular-components-32708-dev-juvesjka.web.app Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt. |
adolgachev
changed the title
| .example-button[aria-pressed='true'], | ||
| .example-button[aria-checked='true'], | ||
| .example-option[aria-selected='true'] { | ||
| outline: solid 1px; |
There was a problem hiding this comment.
We probably should use a system color to show it's selected: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/system-color. - SelectedItem?
There was a problem hiding this comment.
I tried that first, but there is an issue with the way we use icons here (and other places not SVG) where with active forced-colors the icon has a black opaque background.
Given this is just an example, I didn't want to change more and outline seemed good enough for now. We could also tweak the styling to be closer to material buttons but again, I don't think worth it in this case.
There was a problem hiding this comment.
But how about the outline be colored/thicker: This just looks kind of faint
There was a problem hiding this comment.
With 2px, consecutive selections end up with no space between them. Might be okay, but not sure I like the way that looks.
With forced colors, I think it's just black/white and highlighted text with the latter reserved for focus.
There was a problem hiding this comment.
I have never seen HCM use Highlight Color for focus -
For example: https://benmyers.dev/blog/whcm-outlines/ & https://sarahmhigley.com/writing/whcm-quick-tips/. Even for Google Material Wiz/ACX.
It's hard to find documentation on what is recommended. Personally, I prefer using a system color for select or 2px looks more clear in my opinion. But I will leave it up to you.
There was a problem hiding this comment.
I can go with the 2px, that seems okay. It's just an example.
We already use the highlight color for hover and focus in these examples.
I couldn't find a system color that shows up as anything other than black/white in the HCM on chrome (other than the highlight).
Given that this is just our examples, I don't think we should spent too much time on revisiting the simple theme we used here, since we're not shipping the styling portions.
adolgachev
force-pushed
the
aria-toolbar-active
branch
from
c8083de to
c0a5bfb
Compare
adolgachev
added
action: merge
2 participants
Add additional styling when forced colors is active to show an extra outline in the toolbar examples.