From 4e58a165c701a3510268af735297aabf3480fb89 Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Wed, 22 Jul 2026 17:30:32 -0700 Subject: [PATCH 1/4] fix(material/chips): update chips minimum touch target to 48px Updates Angular Components' Chips component so that chips use a touch-target span similar to buttons to ensure that chips meet the minimum touch-target size of 48x48 for accessibility standards. Fixes b/537441584 --- src/dev-app/chips/chips-demo.scss | 2 +- src/material/chips/chip-option.html | 1 + src/material/chips/chip-row.html | 1 + src/material/chips/chip-set.scss | 2 +- src/material/chips/chip.html | 1 + src/material/chips/chip.scss | 23 +++++++++++++++++++++++ 6 files changed, 28 insertions(+), 2 deletions(-) diff --git a/src/dev-app/chips/chips-demo.scss b/src/dev-app/chips/chips-demo.scss index 022cad5fe239..89ff872fec53 100644 --- a/src/dev-app/chips/chips-demo.scss +++ b/src/dev-app/chips/chips-demo.scss @@ -18,7 +18,7 @@ } .mat-mdc-basic-chip { - margin: auto 10px; + margin: 8px 10px; } mat-chip-grid input { diff --git a/src/material/chips/chip-option.html b/src/material/chips/chip-option.html index a24ad97fd148..7d150b49e644 100644 --- a/src/material/chips/chip-option.html +++ b/src/material/chips/chip-option.html @@ -27,6 +27,7 @@ + diff --git a/src/material/chips/chip-row.html b/src/material/chips/chip-row.html index c1715e7e4344..55ed032a3186 100644 --- a/src/material/chips/chip-row.html +++ b/src/material/chips/chip-row.html @@ -31,6 +31,7 @@ + @if (_hasTrailingIcon()) { diff --git a/src/material/chips/chip-set.scss b/src/material/chips/chip-set.scss index 3538a9daed9d..87d59ab63fe1 100644 --- a/src/material/chips/chip-set.scss +++ b/src/material/chips/chip-set.scss @@ -16,7 +16,7 @@ } .mdc-evolution-chip { - margin: 4px 0 4px 8px; + margin: 8px 0 8px 8px; } [dir='rtl'] & { diff --git a/src/material/chips/chip.html b/src/material/chips/chip.html index be514ac35fc8..1d9eb6efd943 100644 --- a/src/material/chips/chip.html +++ b/src/material/chips/chip.html @@ -11,6 +11,7 @@ + diff --git a/src/material/chips/chip.scss b/src/material/chips/chip.scss index 6324868ef8f6..0c379affa2c9 100644 --- a/src/material/chips/chip.scss +++ b/src/material/chips/chip.scss @@ -12,6 +12,8 @@ $_graphic-padding: 6px; $_trailing-action-padding: 8px; $_avatar-leading-padding: 4px; $_avatar-trailing-padding: 8px; +$_touch-target-size: 48px; +$_touch-target-vertical-padding: 8px; $fallbacks: m3-chip.get-tokens(); @@ -27,6 +29,27 @@ $fallbacks: m3-chip.get-tokens(); max-width: 100%; } +.mat-mdc-standard-chip, +.mat-mdc-basic-chip, +.mat-mdc-evolution-chip { + /* Ensures basic/unstyled chips also have a 32px min-height baseline */ + min-height: 32px; + + /* 8px top and bottom margin for 48px touch target separation */ + margin-top: $_touch-target-vertical-padding; + margin-bottom: $_touch-target-vertical-padding; +} + +.mat-mdc-chip-touch-target { + position: absolute; + top: 50%; + left: 0; + right: 0; + height: $_touch-target-size; + transform: translateY(-50%); + pointer-events: auto; +} + .mdc-evolution-chip__cell, .mdc-evolution-chip__action { height: 100%; From f85696c375b4b4416da41ae49a8d5638b3c1d496 Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Wed, 22 Jul 2026 17:38:47 -0700 Subject: [PATCH 2/4] refactor(material/chips): fix lint errors Updates previous changes to fix lint errors. --- src/material/chips/chip.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/material/chips/chip.scss b/src/material/chips/chip.scss index 0c379affa2c9..822686a2e6b5 100644 --- a/src/material/chips/chip.scss +++ b/src/material/chips/chip.scss @@ -32,10 +32,10 @@ $fallbacks: m3-chip.get-tokens(); .mat-mdc-standard-chip, .mat-mdc-basic-chip, .mat-mdc-evolution-chip { - /* Ensures basic/unstyled chips also have a 32px min-height baseline */ + // Ensures basic/unstyled chips also have a 32px min-height baseline. min-height: 32px; - /* 8px top and bottom margin for 48px touch target separation */ + // 8px top and bottom margin for 48px touch target separation. margin-top: $_touch-target-vertical-padding; margin-bottom: $_touch-target-vertical-padding; } From c78e96a9e3b2b3007cf7b8c3e6b17e9ecca623aa Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Mon, 27 Jul 2026 10:00:59 -0700 Subject: [PATCH 3/4] refactor(material/chips): follow angular touch-target density pattern Updates previous changes to Angular Components' Chip component to add a touch-target element and modifies the previously implemented styles to follow the density logic applied to touch-target theme/styles for checkbox and button. Fixes b/537441584 --- src/dev-app/chips/chips-demo.scss | 2 +- src/material/chips/_m2-chip.scss | 8 +++++++- src/material/chips/_m3-chip.scss | 1 + src/material/chips/chip.scss | 12 +----------- 4 files changed, 10 insertions(+), 13 deletions(-) diff --git a/src/dev-app/chips/chips-demo.scss b/src/dev-app/chips/chips-demo.scss index 89ff872fec53..575091eb6334 100644 --- a/src/dev-app/chips/chips-demo.scss +++ b/src/dev-app/chips/chips-demo.scss @@ -18,7 +18,7 @@ } .mat-mdc-basic-chip { - margin: 8px 10px; + margin: 16px 10px; } mat-chip-grid input { diff --git a/src/material/chips/_m2-chip.scss b/src/material/chips/_m2-chip.scss index 2263debd5fda..e05262ff350e 100644 --- a/src/material/chips/_m2-chip.scss +++ b/src/material/chips/_m2-chip.scss @@ -6,6 +6,11 @@ @function get-tokens($theme) { $system: m2-utils.get-system($theme); $density-scale: theming.clamp-density(map.get($system, density-scale), -2); + $touch-target-display: block; + + @if $density-scale < 0 { + $touch-target-display: none; + } @return ( base: ( @@ -43,7 +48,8 @@ chip-container-height: map.get(( 0: 32px, -1: 28px, - -2: 24px), $density-scale) + -2: 24px), $density-scale), + chip-touch-target-display: $touch-target-display, ), ); } diff --git a/src/material/chips/_m3-chip.scss b/src/material/chips/_m3-chip.scss index 23cc387aa05a..9149fc3a0d30 100644 --- a/src/material/chips/_m3-chip.scss +++ b/src/material/chips/_m3-chip.scss @@ -77,5 +77,6 @@ @return ( chip-container-height: list.nth((32px, 28px, 24px), $index), + chip-touch-target-display: list.nth((block, none, none), $index), ); } diff --git a/src/material/chips/chip.scss b/src/material/chips/chip.scss index 822686a2e6b5..067786ebb3aa 100644 --- a/src/material/chips/chip.scss +++ b/src/material/chips/chip.scss @@ -29,17 +29,6 @@ $fallbacks: m3-chip.get-tokens(); max-width: 100%; } -.mat-mdc-standard-chip, -.mat-mdc-basic-chip, -.mat-mdc-evolution-chip { - // Ensures basic/unstyled chips also have a 32px min-height baseline. - min-height: 32px; - - // 8px top and bottom margin for 48px touch target separation. - margin-top: $_touch-target-vertical-padding; - margin-bottom: $_touch-target-vertical-padding; -} - .mat-mdc-chip-touch-target { position: absolute; top: 50%; @@ -47,6 +36,7 @@ $fallbacks: m3-chip.get-tokens(); right: 0; height: $_touch-target-size; transform: translateY(-50%); + display: token-utils.slot(chip-touch-target-display, $fallbacks); pointer-events: auto; } From 9a178fedd81692e04e74408021c123bbeb4feb53 Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Mon, 27 Jul 2026 10:21:53 -0700 Subject: [PATCH 4/4] refactor(material/chips): remove unused scss variable Updates previous changes to remove unused scss variable that I added for my original solution. --- src/material/chips/chip.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/material/chips/chip.scss b/src/material/chips/chip.scss index 067786ebb3aa..b5a316cb75dc 100644 --- a/src/material/chips/chip.scss +++ b/src/material/chips/chip.scss @@ -13,7 +13,6 @@ $_trailing-action-padding: 8px; $_avatar-leading-padding: 4px; $_avatar-trailing-padding: 8px; $_touch-target-size: 48px; -$_touch-target-vertical-padding: 8px; $fallbacks: m3-chip.get-tokens();