fix(radio): missing focus indication in high contrast mode #13280
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
crisbeto
added
Accessibility
googlebot
added
the
cla: yes
devversion
approved these changes
Sep 23, 2018
src/lib/radio/radio.scss
Outdated
| // how IE/Edge treat native radio buttons in high contrast mode. We can't turn the border | ||
| // into a dotted one, because it's too thick which causes the circles to look off. | ||
| @include cdk-high-contrast { | ||
| .mat-radio-button.cdk-focused & { |
There was a problem hiding this comment.
I remember we had to use cdk-keyboard-focused because clicking on the <label> causes the focus origin to be program.
Isn't this the case here?
There was a problem hiding this comment.
I'm not sure. I went with .cdk-focused, because it's what we use for the other focus styling.
crisbeto
force-pushed
the
radio-high-contrast-focus-indication
branch
from
4ed68d4 to
9facbda
Compare
crisbeto
force-pushed
the
radio-high-contrast-focus-indication
branch
from
9facbda to
7b1c079
Compare
crisbeto
force-pushed
the
radio-high-contrast-focus-indication
branch
from
7b1c079 to
8185145
Compare
|
Hi @crisbeto! This PR has merge conflicts due to recent upstream merges. |
1 similar comment
|
Hi @crisbeto! This PR has merge conflicts due to recent upstream merges. |
crisbeto
force-pushed
the
radio-high-contrast-focus-indication
branch
2 times, most recently
from
4b493bc to
eddc2ed
Compare
crisbeto
force-pushed
the
radio-high-contrast-focus-indication
branch
from
eddc2ed to
7af9fc0
Compare
crisbeto
changed the title
crisbeto
force-pushed
the
radio-high-contrast-focus-indication
branch
from
7af9fc0 to
bb16662
Compare
crisbeto
force-pushed
the
radio-high-contrast-focus-indication
branch
from
bb16662 to
6da0133
Compare
crisbeto
added
the
P3
crisbeto
added a commit
to crisbeto/material2
that referenced
this pull request
Apr 1, 2020
…trast mode Along the same lines as angular#13280, but for the MDC component. Adds an outline around the circle when focused in high contrast mode.
Currently we use ripples for focus indication on radio buttons, however they're hidden in high contrast mode. These changes add an outline as a fallback. Also fixes the focus indication showing up for mouse focus.
crisbeto
force-pushed
the
radio-high-contrast-focus-indication
branch
from
6da0133 to
e781075
Compare
mmalerba
pushed a commit
that referenced
this pull request
Apr 6, 2020
Along the same lines as #13280, but for the MDC component. Adds an outline around the circle when focused in high contrast mode.
mmalerba
pushed a commit
that referenced
this pull request
Apr 14, 2020
Along the same lines as #13280, but for the MDC component. Adds an outline around the circle when focused in high contrast mode.
This was referenced May 3, 2020
|
Closing in favor of #22145. |
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Currently we use ripples for focus indication on radio buttons, however they're hidden in high contrast mode. These changes add an outline as a fallback.
Also fixes the focus indication showing up for mouse focus.