Skip to content

Commit e651afc

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 f3f277a commit e651afc

File tree

1 file changed

+27
-12
lines changed

1 file changed

+27
-12
lines changed

src/material/chips/chip.scss

Lines changed: 27 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -639,15 +639,36 @@ $fallbacks: m3-chip.get-tokens();
639639
left: 0;
640640
pointer-events: none;
641641
}
642+
643+
}
642644

645+
// Targets .mdc-evolution-chip__cell
646+
.mat-mdc-chip-action .mat-focus-indicator::before,
647+
// Targets mdc-evolution-chip__icon
648+
.mat-mdc-chip-action.mat-focus-indicator::before {
643649
// For the chip element, default inset/offset values are necessary to ensure that
644650
// the focus indicator is sufficiently contrastive and renders appropriately.
645-
.mat-focus-indicator::before {
646-
$default-border-width: focus-indicators-private.$default-border-width;
647-
$border-width: var(--mat-focus-indicator-border-width, #{$default-border-width});
648-
$offset: calc(#{$border-width} + 2px);
649-
margin: calc(#{$offset} * -1);
650-
}
651+
$default-border-width: focus-indicators-private.$default-border-width;
652+
$border-width: var(--mat-focus-indicator-border-width, #{$default-border-width});
653+
$offset: calc(#{$border-width} + 2px);
654+
655+
content: '';
656+
display: block;
657+
position: absolute;
658+
padding: $offset;
659+
margin: calc(#{$offset} * -1);
660+
border-width: $border-width;
661+
border: solid;
662+
border-color: var(--mat-focus-indicator-border-color), black;
663+
opacity: 0;
664+
height: auto;
665+
}
666+
667+
// The chip has multiple focus targets so we have to put the indicator on
668+
// a separate element, rather than on the focusable element itself.
669+
.mat-mdc-chip-action:focus .mat-focus-indicator::before,
670+
.mat-mdc-chip-action.mat-focus-indicator:focus::before {
671+
opacity: 1;
651672
}
652673

653674
.mat-mdc-chip-remove {
@@ -705,12 +726,6 @@ $fallbacks: m3-chip.get-tokens();
705726
}
706727
}
707728

708-
// The chip has multiple focus targets so we have to put the indicator on
709-
// a separate element, rather than on the focusable element itself.
710-
.mat-mdc-chip-action:focus .mat-focus-indicator::before {
711-
content: '';
712-
}
713-
714729
// Prevents icon from being cut off when text spacing is increased.
715730
// .mat-mdc-chip-remove selector necessary for remove button with icon.
716731
// Fixes b/250063405.

0 commit comments

Comments
 (0)