From 0b13dba28b2a245516f1eee5eff3cde203955d2f Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Fri, 28 Jun 2024 21:25:35 +0000 Subject: [PATCH 01/12] fix(material/chip): remove button is too small Fixes Angular Components Chip component where the touch target of the remove button of a chip is too small. Updates .mat-mdc-chip-remove to target more specific styles to override original style of padding: 8px so that the user has a larger touch target particularly on mobile devices. Fixes b/286959517 --- src/material/chips/chip.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/material/chips/chip.scss b/src/material/chips/chip.scss index cb7ab142ef12..2170b720cb78 100644 --- a/src/material/chips/chip.scss +++ b/src/material/chips/chip.scss @@ -713,6 +713,12 @@ $_avatar-trailing-padding: 8px; font-size: $_trailing-icon-size; box-sizing: content-box; } + /** Increases mdc-dhip-remove trailing icon action touch-target + in order to fix b/286959517. */ + &.mat-mdc-chip-trailing-icon.mdc-evolution-chip__action--trailing, + &.mat-mdc-chip-trailing-icon.mdc-evolution-chip__icon--trailing { + padding: 24px 12px; + } } .mat-chip-edit-input { From 0df5a2441d3ad703583d72a3e00035918ab59d93 Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Fri, 28 Jun 2024 21:45:20 +0000 Subject: [PATCH 02/12] refactor(material/chips): remove button is too small Fixes lint errors from previous commit for Angular Components Chip component where the remove button touch target is too small, particularly for touch/mobile devices. Increases padding on all sides. Fixes b/286959517 --- src/material/chips/chip.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/material/chips/chip.scss b/src/material/chips/chip.scss index 2170b720cb78..af1b44a3b189 100644 --- a/src/material/chips/chip.scss +++ b/src/material/chips/chip.scss @@ -713,8 +713,7 @@ $_avatar-trailing-padding: 8px; font-size: $_trailing-icon-size; box-sizing: content-box; } - /** Increases mdc-dhip-remove trailing icon action touch-target - in order to fix b/286959517. */ + //Increases mdc-dhip-remove trailing icon action touch-target in order to fix b/286959517 &.mat-mdc-chip-trailing-icon.mdc-evolution-chip__action--trailing, &.mat-mdc-chip-trailing-icon.mdc-evolution-chip__icon--trailing { padding: 24px 12px; From 570264adb69cdc33d70b69c285d9842c4d65f83f Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Mon, 1 Jul 2024 19:59:57 +0000 Subject: [PATCH 03/12] fix(material/chips): increase chip remove button touch target size Fixes issue with Angular Component Chip's touch target size by increasing the padding on chips with a trailing icon that has an action. Fixes b/286959517 BREAKING CHANGE: updates chip remove button touch target to increase accessibility of the button especially on touch/mobile devices. --- src/material/chips/chip.scss | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/src/material/chips/chip.scss b/src/material/chips/chip.scss index af1b44a3b189..a4e5d479dd61 100644 --- a/src/material/chips/chip.scss +++ b/src/material/chips/chip.scss @@ -713,10 +713,16 @@ $_avatar-trailing-padding: 8px; font-size: $_trailing-icon-size; box-sizing: content-box; } - //Increases mdc-dhip-remove trailing icon action touch-target in order to fix b/286959517 - &.mat-mdc-chip-trailing-icon.mdc-evolution-chip__action--trailing, - &.mat-mdc-chip-trailing-icon.mdc-evolution-chip__icon--trailing { - padding: 24px 12px; +} + +//Increases mdc-dhip-remove trailing icon action touch-target in order to fix b/286959517 +.mat-mdc-chip-trailing-icon.mdc-evolution-chip__action--trailing, +.mat-mdc-chip-trailing-icon.mdc-evolution-chip__icon--trailing, +.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action { + &.mat-mdc-chip-remove, + &.mat-mdc-standard-chip .mdc-evolution-chip__action--trailing, + &.mdc-evolution-chip--with-avatar .mdc-evolution-chip__action--trailing { + padding: 16px; } } From 56e6c183914e2339f10ed543efc5987ad038ba62 Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Tue, 2 Jul 2024 22:48:25 +0000 Subject: [PATCH 04/12] refactor(material/chips): chip remove touch target size is insufficient Updates fix to Autocomplete Component Chips component where the touch target size is too small and fails minimum accessibility size of 48x48 px. Addresses nit fixes from PR review. Fixes b/286959517 BREAKING CHANGE: updates padding size of remove touch target to satisfy minimum 48x48 accessibility size. --- 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 a4e5d479dd61..940f7841112e 100644 --- a/src/material/chips/chip.scss +++ b/src/material/chips/chip.scss @@ -715,7 +715,7 @@ $_avatar-trailing-padding: 8px; } } -//Increases mdc-dhip-remove trailing icon action touch-target in order to fix b/286959517 +// Increases mdc-chip-remove trailing icon action touch-target in order to fix b/286959517 .mat-mdc-chip-trailing-icon.mdc-evolution-chip__action--trailing, .mat-mdc-chip-trailing-icon.mdc-evolution-chip__icon--trailing, .mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action { From 81159aa729da0a2e526f153edfff0bc2b7cf0289 Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Fri, 28 Jun 2024 21:25:35 +0000 Subject: [PATCH 05/12] fix(material/chip): remove button is too small Fixes Angular Components Chip component where the touch target of the remove button of a chip is too small. Updates .mat-mdc-chip-remove to target more specific styles to override original style of padding: 8px so that the user has a larger touch target particularly on mobile devices. Fixes b/286959517 --- src/material/chips/chip.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/material/chips/chip.scss b/src/material/chips/chip.scss index 940f7841112e..6f05bd3836f3 100644 --- a/src/material/chips/chip.scss +++ b/src/material/chips/chip.scss @@ -713,6 +713,12 @@ $_avatar-trailing-padding: 8px; font-size: $_trailing-icon-size; box-sizing: content-box; } + /** Increases mdc-dhip-remove trailing icon action touch-target + in order to fix b/286959517. */ + &.mat-mdc-chip-trailing-icon.mdc-evolution-chip__action--trailing, + &.mat-mdc-chip-trailing-icon.mdc-evolution-chip__icon--trailing { + padding: 24px 12px; + } } // Increases mdc-chip-remove trailing icon action touch-target in order to fix b/286959517 From 6d85c21f36c2301a05035124feb5fe3bf5276fae Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Fri, 28 Jun 2024 21:45:20 +0000 Subject: [PATCH 06/12] refactor(material/chips): remove button is too small Fixes lint errors from previous commit for Angular Components Chip component where the remove button touch target is too small, particularly for touch/mobile devices. Increases padding on all sides. Fixes b/286959517 --- src/material/chips/chip.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/material/chips/chip.scss b/src/material/chips/chip.scss index 6f05bd3836f3..19fe1230b8e3 100644 --- a/src/material/chips/chip.scss +++ b/src/material/chips/chip.scss @@ -713,8 +713,7 @@ $_avatar-trailing-padding: 8px; font-size: $_trailing-icon-size; box-sizing: content-box; } - /** Increases mdc-dhip-remove trailing icon action touch-target - in order to fix b/286959517. */ + //Increases mdc-dhip-remove trailing icon action touch-target in order to fix b/286959517 &.mat-mdc-chip-trailing-icon.mdc-evolution-chip__action--trailing, &.mat-mdc-chip-trailing-icon.mdc-evolution-chip__icon--trailing { padding: 24px 12px; From ede061c09335f7b2cfa9fef448255614e1e7440d Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Mon, 1 Jul 2024 19:59:57 +0000 Subject: [PATCH 07/12] fix(material/chips): increase chip remove button touch target size Fixes issue with Angular Component Chip's touch target size by increasing the padding on chips with a trailing icon that has an action. Fixes b/286959517 BREAKING CHANGE: updates chip remove button touch target to increase accessibility of the button especially on touch/mobile devices. --- src/material/chips/chip.scss | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/src/material/chips/chip.scss b/src/material/chips/chip.scss index 19fe1230b8e3..4ba69b915e14 100644 --- a/src/material/chips/chip.scss +++ b/src/material/chips/chip.scss @@ -713,10 +713,16 @@ $_avatar-trailing-padding: 8px; font-size: $_trailing-icon-size; box-sizing: content-box; } - //Increases mdc-dhip-remove trailing icon action touch-target in order to fix b/286959517 - &.mat-mdc-chip-trailing-icon.mdc-evolution-chip__action--trailing, - &.mat-mdc-chip-trailing-icon.mdc-evolution-chip__icon--trailing { - padding: 24px 12px; +} + +//Increases mdc-dhip-remove trailing icon action touch-target in order to fix b/286959517 +.mat-mdc-chip-trailing-icon.mdc-evolution-chip__action--trailing, +.mat-mdc-chip-trailing-icon.mdc-evolution-chip__icon--trailing, +.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action { + &.mat-mdc-chip-remove, + &.mat-mdc-standard-chip .mdc-evolution-chip__action--trailing, + &.mdc-evolution-chip--with-avatar .mdc-evolution-chip__action--trailing { + padding: 16px; } } From 3b4202fefba5a8a2c6c023c52798ccac08e20c2a Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Mon, 8 Jul 2024 22:38:29 +0000 Subject: [PATCH 08/12] fix(material/chips): chips remove touch target is too small to be accessible Updates Angular Components Chips component by increasing its .mat-mdc-chip-remove::after styles to increase the size of the touch target to make it more accessible/clickable. Fixes b/286959517 --- src/material/chips/chip.scss | 37 ++++++++++-------------------------- 1 file changed, 10 insertions(+), 27 deletions(-) diff --git a/src/material/chips/chip.scss b/src/material/chips/chip.scss index 4ba69b915e14..5526979da8db 100644 --- a/src/material/chips/chip.scss +++ b/src/material/chips/chip.scss @@ -695,16 +695,21 @@ $_avatar-trailing-padding: 8px; // Used as a state overlay. &::after { - $offset: 2px; + $offset: 18px; /*size of the remove icon*/ content: ''; display: block; opacity: 0; position: absolute; - top: 0 - $offset; - bottom: 0 - $offset; - left: 8px - $offset; - right: 8px - $offset; + top: 2 - $offset; + bottom: 2 - $offset; + left: 12 - $offset; + right: 12 - $offset; border-radius: 50%; + // Increases touch target to improve accessibility and fix b/286959517 + z-index: 100; + pointer-events: all; + height: 48px; + width: 48px; } .mat-icon { @@ -715,28 +720,6 @@ $_avatar-trailing-padding: 8px; } } -//Increases mdc-dhip-remove trailing icon action touch-target in order to fix b/286959517 -.mat-mdc-chip-trailing-icon.mdc-evolution-chip__action--trailing, -.mat-mdc-chip-trailing-icon.mdc-evolution-chip__icon--trailing, -.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action { - &.mat-mdc-chip-remove, - &.mat-mdc-standard-chip .mdc-evolution-chip__action--trailing, - &.mdc-evolution-chip--with-avatar .mdc-evolution-chip__action--trailing { - padding: 16px; - } -} - -// Increases mdc-chip-remove trailing icon action touch-target in order to fix b/286959517 -.mat-mdc-chip-trailing-icon.mdc-evolution-chip__action--trailing, -.mat-mdc-chip-trailing-icon.mdc-evolution-chip__icon--trailing, -.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action { - &.mat-mdc-chip-remove, - &.mat-mdc-standard-chip .mdc-evolution-chip__action--trailing, - &.mdc-evolution-chip--with-avatar .mdc-evolution-chip__action--trailing { - padding: 16px; - } -} - .mat-chip-edit-input { cursor: text; display: inline-block; From 899b16f76afe28e93114d3ca3281b456ebe25293 Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Mon, 8 Jul 2024 22:50:58 +0000 Subject: [PATCH 09/12] refactor(material/chips): fix lint errors Updates fix for Angular Components Chips component where there were lint formatting 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 5526979da8db..673848e01f1a 100644 --- a/src/material/chips/chip.scss +++ b/src/material/chips/chip.scss @@ -695,7 +695,7 @@ $_avatar-trailing-padding: 8px; // Used as a state overlay. &::after { - $offset: 18px; /*size of the remove icon*/ + $offset: 18px; // size of the remove icon content: ''; display: block; opacity: 0; @@ -705,7 +705,7 @@ $_avatar-trailing-padding: 8px; left: 12 - $offset; right: 12 - $offset; border-radius: 50%; - // Increases touch target to improve accessibility and fix b/286959517 + // Increases touch target size to improve accessibility and fix b/286959517 z-index: 100; pointer-events: all; height: 48px; From a0ea4819010de0483ad5bcdbe7259ac5fb4590be Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Mon, 8 Jul 2024 23:06:39 +0000 Subject: [PATCH 10/12] refactor(material/chips): replace px with _trailing-icon-size variable Updates previous Angular Components Chip component fix and makes it adaptable by swapping the hard-coded 18px offset to equal the variable for -icon-size. --- 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 673848e01f1a..87a0ff384b19 100644 --- a/src/material/chips/chip.scss +++ b/src/material/chips/chip.scss @@ -695,7 +695,7 @@ $_avatar-trailing-padding: 8px; // Used as a state overlay. &::after { - $offset: 18px; // size of the remove icon + $offset: $_trailing-icon-size; // size of the remove icon content: ''; display: block; opacity: 0; From 6e5a5901ea0d09e528d2c000edc4d8e115180d48 Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Wed, 10 Jul 2024 23:20:01 +0000 Subject: [PATCH 11/12] refactor(material/chips): updates touch target centering method Updates previous Angular Component Chip component fix which added padding to the ::after pseudo-element and attempted to calculate centering. Changes calculation based on using with padding values countered with margin negative values to center the touch target. --- src/material/chips/chip.scss | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/material/chips/chip.scss b/src/material/chips/chip.scss index 87a0ff384b19..0763da6091d5 100644 --- a/src/material/chips/chip.scss +++ b/src/material/chips/chip.scss @@ -695,21 +695,20 @@ $_avatar-trailing-padding: 8px; // Used as a state overlay. &::after { - $offset: $_trailing-icon-size; // size of the remove icon + $_touch-target-size: 48px; + $_ripple-size: 24px; content: ''; display: block; opacity: 0; position: absolute; - top: 2 - $offset; - bottom: 2 - $offset; - left: 12 - $offset; - right: 12 - $offset; - border-radius: 50%; // Increases touch target size to improve accessibility and fix b/286959517 z-index: 100; pointer-events: all; - height: 48px; - width: 48px; + box-sizing: border-box; + padding: calc(($_touch-target-size - $_ripple-size)/2); + margin: calc((($_touch-target-size - $_ripple-size)/2) * -1); + -webkit-background-clip: content-box; + background-clip: content-box; } .mat-icon { From 144285403c45e1dbf8329715ae8f2156270da882 Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Fri, 12 Jul 2024 20:10:52 +0000 Subject: [PATCH 12/12] refactor(material/chips): updates ::after styles and fix lint errors Updates Angular Component Chips component fix to change ::after background property changes to be background-color specifically to avoid overriding background-clip styles. Suppresses lint warning material/no-prefixes for background-clip since it's majority compatible with browsers. Fixes b/286959517 --- src/material/chips/chip.scss | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/material/chips/chip.scss b/src/material/chips/chip.scss index 0763da6091d5..dfc3d2f08f80 100644 --- a/src/material/chips/chip.scss +++ b/src/material/chips/chip.scss @@ -538,7 +538,7 @@ $_avatar-trailing-padding: 8px; } &::after { - @include token-utils.create-token-slot(background, trailing-action-state-layer-color); + @include token-utils.create-token-slot(background-color, trailing-action-state-layer-color); } &:hover::after { @@ -552,7 +552,8 @@ $_avatar-trailing-padding: 8px; .mat-mdc-chip-selected .mat-mdc-chip-remove::after, .mat-mdc-chip-highlighted .mat-mdc-chip-remove::after { - @include token-utils.create-token-slot(background, selected-trailing-action-state-layer-color); + @include token-utils.create-token-slot(background-color, + selected-trailing-action-state-layer-color); } } @@ -697,17 +698,20 @@ $_avatar-trailing-padding: 8px; &::after { $_touch-target-size: 48px; $_ripple-size: 24px; + $offset: 3px; content: ''; display: block; opacity: 0; position: absolute; - // Increases touch target size to improve accessibility and fix b/286959517 - z-index: 100; - pointer-events: all; + top: 0 - $offset; + bottom: 0 - $offset; + left: 8px - $offset; + right: 8px - $offset; + border-radius: 50%; box-sizing: border-box; padding: calc(($_touch-target-size - $_ripple-size)/2); margin: calc((($_touch-target-size - $_ripple-size)/2) * -1); - -webkit-background-clip: content-box; + // stylelint-disable material/no-prefixes background-clip: content-box; }