Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(checkbox): no focus indicator in high contrast #13255

Merged
merged 1 commit into from
Nov 8, 2018
Merged

fix(checkbox): no focus indicator in high contrast #13255

merged 1 commit into from
Nov 8, 2018
+8 −0

Conversation

devversion
Copy link
Member

  • Fixes that the checkbox does not have a focus indicator in high-contrast. Similarly to native checkboxes, the Material checkbox should have a dotted border/outline on keyboard focus.

Fixes #13227

@devversion devversion added the target: patch This PR is targeted for the next patch release label Sep 22, 2018
@devversion devversion added the Accessibility This issue is related to accessibility (a11y) label Sep 22, 2018
@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Sep 22, 2018
@devversion devversion added target: major This PR is targeted for the next major release and removed target: patch This PR is targeted for the next patch release labels Sep 22, 2018
crisbeto
crisbeto approved these changes Sep 24, 2018
View reviewed changes
Copy link
Member

@crisbeto crisbeto left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

src/lib/checkbox/checkbox.scss
@@ -240,6 +240,12 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
._mat-animation-noopable & {
transition: none;
}

@include cdk-high-contrast {
.mat-checkbox.cdk-keyboard-focused & {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Might be worth mentioning here that this is how IE handles it for the native checkbox.

@crisbeto crisbeto added pr: lgtm action: merge The PR is ready for merge by the caretaker labels Sep 24, 2018
@devversion devversion force-pushed the fix/checkbox-focus-indicator-high-contrast branch from c459515 to 84fd6e0 Compare September 24, 2018 09:30
jelbourn
jelbourn approved these changes Sep 24, 2018
View reviewed changes
Copy link
Member

@jelbourn jelbourn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@jelbourn jelbourn added blocked This issue is blocked by some external factor, such as a prerequisite PR and removed action: merge The PR is ready for merge by the caretaker labels Oct 1, 2018
@devversion devversion added target: patch This PR is targeted for the next patch release and removed target: major This PR is targeted for the next major release labels Oct 19, 2018
@jelbourn jelbourn removed blocked This issue is blocked by some external factor, such as a prerequisite PR labels Nov 2, 2018
@devversion devversion added the action: merge The PR is ready for merge by the caretaker label Nov 3, 2018
@devversion
fix(checkbox): no focus indicator in high contrast
8506b41 
* Fixes that the checkbox does not have a focus indicator in high-contrast. Similarly to native checkboxes, the Material checkbox should have a dotted border/outline on keyboard focus.

Fixes angular#13227
@devversion devversion force-pushed the fix/checkbox-focus-indicator-high-contrast branch from 84fd6e0 to 8506b41 Compare November 8, 2018 07:47
@vivian-hu-zz vivian-hu-zz merged commit caf65e5 into angular:master Nov 8, 2018
vivian-hu-zz pushed a commit that referenced this pull request Nov 12, 2018
@devversion
fix(checkbox): no focus indicator in high contrast (#13255)
13d9d3a 
* Fixes that the checkbox does not have a focus indicator in high-contrast. Similarly to native checkboxes, the Material checkbox should have a dotted border/outline on keyboard focus.

Fixes #13227
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 10, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@jelbourn jelbourn

@crisbeto crisbeto

@josephperrott josephperrott

Assignees

@jelbourn jelbourn

@crisbeto crisbeto

Labels
Accessibility This issue is related to accessibility (a11y) action: merge The PR is ready for merge by the caretaker cla: yes PR author has agreed to Google's Contributor License Agreement target: patch This PR is targeted for the next patch release
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Checkbox/radio focus not visible in Windows 10 High Contrast mode
6 participants
@devversion @jelbourn @crisbeto @josephperrott @googlebot @vivian-hu-zz