Skip to content

Commit 6fdf58a

Browse files
committed
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
1 parent 90c5bb6 commit 6fdf58a

File tree

1 file changed

+10
-27
lines changed

1 file changed

+10
-27
lines changed

src/material/chips/chip.scss

Lines changed: 10 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -695,16 +695,21 @@ $_avatar-trailing-padding: 8px;
695695

696696
// Used as a state overlay.
697697
&::after {
698-
$offset: 2px;
698+
$offset: 18px; /*size of the remove icon*/
699699
content: '';
700700
display: block;
701701
opacity: 0;
702702
position: absolute;
703-
top: 0 - $offset;
704-
bottom: 0 - $offset;
705-
left: 8px - $offset;
706-
right: 8px - $offset;
703+
top: 2 - $offset;
704+
bottom: 2 - $offset;
705+
left: 12 - $offset;
706+
right: 12 - $offset;
707707
border-radius: 50%;
708+
// Increases touch target to improve accessibility and fix b/286959517
709+
z-index: 100;
710+
pointer-events: all;
711+
height: 48px;
712+
width: 48px;
708713
}
709714

710715
.mat-icon {
@@ -715,28 +720,6 @@ $_avatar-trailing-padding: 8px;
715720
}
716721
}
717722

718-
//Increases mdc-dhip-remove trailing icon action touch-target in order to fix b/286959517
719-
.mat-mdc-chip-trailing-icon.mdc-evolution-chip__action--trailing,
720-
.mat-mdc-chip-trailing-icon.mdc-evolution-chip__icon--trailing,
721-
.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action {
722-
&.mat-mdc-chip-remove,
723-
&.mat-mdc-standard-chip .mdc-evolution-chip__action--trailing,
724-
&.mdc-evolution-chip--with-avatar .mdc-evolution-chip__action--trailing {
725-
padding: 16px;
726-
}
727-
}
728-
729-
// Increases mdc-chip-remove trailing icon action touch-target in order to fix b/286959517
730-
.mat-mdc-chip-trailing-icon.mdc-evolution-chip__action--trailing,
731-
.mat-mdc-chip-trailing-icon.mdc-evolution-chip__icon--trailing,
732-
.mdc-evolution-chip--with-primary-graphic.mdc-evolution-chip--with-trailing-action {
733-
&.mat-mdc-chip-remove,
734-
&.mat-mdc-standard-chip .mdc-evolution-chip__action--trailing,
735-
&.mdc-evolution-chip--with-avatar .mdc-evolution-chip__action--trailing {
736-
padding: 16px;
737-
}
738-
}
739-
740723
.mat-chip-edit-input {
741724
cursor: text;
742725
display: inline-block;

0 commit comments

Comments
 (0)