From ea9880707d914641b84de93c8ee7cc88fa4538d2 Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Sat, 26 Apr 2025 01:16:36 +0000 Subject: [PATCH 1/4] 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 --- src/material/chips/chip.scss | 39 +++++++++++++++++++++++++----------- 1 file changed, 27 insertions(+), 12 deletions(-) diff --git a/src/material/chips/chip.scss b/src/material/chips/chip.scss index 27b9640c9dd1..635cb284a7cb 100644 --- a/src/material/chips/chip.scss +++ b/src/material/chips/chip.scss @@ -659,15 +659,36 @@ $fallbacks: m3-chip.get-tokens(); left: 0; pointer-events: none; } + +} +// Targets .mdc-evolution-chip__cell +.mat-mdc-chip-action .mat-focus-indicator::before, +// Targets mdc-evolution-chip__icon +.mat-mdc-chip-action.mat-focus-indicator::before { // For the chip element, default inset/offset values are necessary to ensure that // the focus indicator is sufficiently contrastive and renders appropriately. - .mat-focus-indicator::before { - $default-border-width: focus-indicators-private.$default-border-width; - $border-width: var(--mat-focus-indicator-border-width, #{$default-border-width}); - $offset: calc(#{$border-width} + 2px); - margin: calc(#{$offset} * -1); - } + $default-border-width: focus-indicators-private.$default-border-width; + $border-width: var(--mat-focus-indicator-border-width, #{$default-border-width}); + $offset: calc(#{$border-width} + 2px); + + content: ''; + display: block; + position: absolute; + padding: $offset; + margin: calc(#{$offset} * -1); + border-width: $border-width; + border: solid; + border-color: var(--mat-focus-indicator-border-color), black; + opacity: 0; + height: auto; +} + +// The chip has multiple focus targets so we have to put the indicator on +// a separate element, rather than on the focusable element itself. +.mat-mdc-chip-action:focus .mat-focus-indicator::before, +.mat-mdc-chip-action.mat-focus-indicator:focus::before { + opacity: 1; } .mat-mdc-chip-edit, .mat-mdc-chip-remove { @@ -725,12 +746,6 @@ $fallbacks: m3-chip.get-tokens(); } } -// The chip has multiple focus targets so we have to put the indicator on -// a separate element, rather than on the focusable element itself. -.mat-mdc-chip-action:focus .mat-focus-indicator::before { - content: ''; -} - // Prevents icon from being cut off when text spacing is increased. // .mat-mdc-chip-remove selector necessary for remove button with icon. // Fixes b/250063405. From 607b01ea6abf71ac12f4f31937fee8c29f0980f2 Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Mon, 28 Apr 2025 20:04:16 +0000 Subject: [PATCH 2/4] refactor(material/chips): fix lint error Removes trailing whitespace to fix lint error. --- src/material/chips/chip.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/material/chips/chip.scss b/src/material/chips/chip.scss index 635cb284a7cb..80c680fb76b6 100644 --- a/src/material/chips/chip.scss +++ b/src/material/chips/chip.scss @@ -659,7 +659,7 @@ $fallbacks: m3-chip.get-tokens(); left: 0; pointer-events: none; } - + } // Targets .mdc-evolution-chip__cell From 435b90bbf570ff3606045d8cffd85e5032938159 Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Fri, 9 May 2025 20:23:01 +0000 Subject: [PATCH 3/4] refactor(material/chips): update default color Updates previous change to set default border color to --- src/material/chips/chip.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/material/chips/chip.scss b/src/material/chips/chip.scss index 80c680fb76b6..633d97cca162 100644 --- a/src/material/chips/chip.scss +++ b/src/material/chips/chip.scss @@ -670,6 +670,7 @@ $fallbacks: m3-chip.get-tokens(); // the focus indicator is sufficiently contrastive and renders appropriately. $default-border-width: focus-indicators-private.$default-border-width; $border-width: var(--mat-focus-indicator-border-width, #{$default-border-width}); + $default-border-color: var(--mat-focus-indicator-border-color, #{focus-indicators-private.$default-border-color}); $offset: calc(#{$border-width} + 2px); content: ''; @@ -679,7 +680,7 @@ $fallbacks: m3-chip.get-tokens(); margin: calc(#{$offset} * -1); border-width: $border-width; border: solid; - border-color: var(--mat-focus-indicator-border-color), black; + border-color: $default-border-color; opacity: 0; height: auto; } From bd9f63ded2c3c42c70fea7578e36f357b793f8c6 Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Fri, 9 May 2025 20:47:50 +0000 Subject: [PATCH 4/4] refactor(material/chips): fix lint errors Updates previous changes to disable lint errors. --- src/material/chips/chip.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/material/chips/chip.scss b/src/material/chips/chip.scss index 633d97cca162..ab59c40d26ae 100644 --- a/src/material/chips/chip.scss +++ b/src/material/chips/chip.scss @@ -669,8 +669,9 @@ $fallbacks: m3-chip.get-tokens(); // For the chip element, default inset/offset values are necessary to ensure that // the focus indicator is sufficiently contrastive and renders appropriately. $default-border-width: focus-indicators-private.$default-border-width; + // stylelint-disable-next-line max-line-length + $border-color: var(--mat-focus-indicator-border-color, #{focus-indicators-private.$default-border-color}); $border-width: var(--mat-focus-indicator-border-width, #{$default-border-width}); - $default-border-color: var(--mat-focus-indicator-border-color, #{focus-indicators-private.$default-border-color}); $offset: calc(#{$border-width} + 2px); content: ''; @@ -680,7 +681,7 @@ $fallbacks: m3-chip.get-tokens(); margin: calc(#{$offset} * -1); border-width: $border-width; border: solid; - border-color: $default-border-color; + border-color: $border-color; opacity: 0; height: auto; }