Skip to content

Commit ffeb515

Browse files
committed
fix(material/chips): adds border on chip-action focus
Updates Angular Material Chips component so that when mat-mdc-chip-action is focused on a border appears around either the text of the chip or the action icon, whichever is being focused. This improves the accessibility by aiding the user in seeing which element/action is being focused on. Fixes b/286103414
1 parent 663585a commit ffeb515

File tree

1 file changed

+27
-11
lines changed

1 file changed

+27
-11
lines changed

src/material/chips/chip.scss

+27-11
Original file line numberDiff line numberDiff line change
@@ -669,15 +669,36 @@ $token-slots: m2-chip.get-token-slots();
669669
left: 0;
670670
pointer-events: none;
671671
}
672+
673+
}
672674

675+
// Targets .mdc-evolution-chip__cell
676+
.mat-mdc-chip-action .mat-focus-indicator::before,
677+
// Targets mdc-evolution-chip__icon
678+
.mat-mdc-chip-action.mat-focus-indicator::before {
673679
// For the chip element, default inset/offset values are necessary to ensure that
674680
// the focus indicator is sufficiently contrastive and renders appropriately.
675-
.mat-focus-indicator::before {
676-
$default-border-width: focus-indicators-private.$default-border-width;
677-
$border-width: var(--mat-focus-indicator-border-width, #{$default-border-width});
678-
$offset: calc(#{$border-width} + 2px);
679-
margin: calc(#{$offset} * -1);
680-
}
681+
$default-border-width: focus-indicators-private.$default-border-width;
682+
$border-width: var(--mat-focus-indicator-border-width, #{$default-border-width});
683+
$offset: calc(#{$border-width} + 2px);
684+
685+
content: '';
686+
display: block;
687+
position: absolute;
688+
padding: $offset;
689+
margin: calc(#{$offset} * -1);
690+
border-width: $border-width;
691+
border: solid;
692+
border-color: var(--mat-focus-indicator-border-color), black;
693+
opacity: 0;
694+
height: auto;
695+
}
696+
697+
// The chip has multiple focus targets so we have to put the indicator on
698+
// a separate element, rather than on the focusable element itself.
699+
.mat-mdc-chip-action:focus .mat-focus-indicator::before,
700+
.mat-mdc-chip-action.mat-focus-indicator:focus::before {
701+
opacity: 1;
681702
}
682703

683704
.mat-mdc-chip-remove {
@@ -735,8 +756,3 @@ $token-slots: m2-chip.get-token-slots();
735756
}
736757
}
737758

738-
// The chip has multiple focus targets so we have to put the indicator on
739-
// a separate element, rather than on the focusable element itself.
740-
.mat-mdc-chip-action:focus .mat-focus-indicator::before {
741-
content: '';
742-
}

0 commit comments

Comments
 (0)