diff --git a/packages/mdc-chips/README.md b/packages/mdc-chips/README.md index 4becc69d631..f06d403f68e 100644 --- a/packages/mdc-chips/README.md +++ b/packages/mdc-chips/README.md @@ -249,6 +249,27 @@ To pre-select filter chips that have a leading icon, also add the class `mdc-chi ``` +## Additional Information + +### Accessibility + +Material Design spec advises that touch targets should be at least 48 x 48 px. +To meet this requirement, add the following to your chip: + +```html + + + +``` + +Note that the wrapper `` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins). + ## Style Customization ### CSS Classes diff --git a/packages/mdc-chips/_mixins.scss b/packages/mdc-chips/_mixins.scss index 07d420a1f33..8278aed99d6 100644 --- a/packages/mdc-chips/_mixins.scss +++ b/packages/mdc-chips/_mixins.scss @@ -31,6 +31,7 @@ @import "@material/rtl/mixins"; @import "@material/theme/functions"; @import "@material/theme/mixins"; +@import "@material/touch-target/mixins"; @import "@material/typography/mixins"; @import "@material/shape/mixins"; @import "@material/shape/functions"; @@ -84,6 +85,10 @@ $mdc-chip-ripple-target: ".mdc-chip__ripple"; @include mdc-theme-prop(color, on-surface); } } + + .mdc-chip__touch { + @include mdc-touch-target($query); + } } .mdc-chip--exit { @@ -489,6 +494,11 @@ $mdc-chip-ripple-target: ".mdc-chip__ripple"; margin: $gap-size / 2; } } + + .mdc-chip--touch { + @include mdc-touch-target-component( + $component-height: $mdc-chip-height-default, $query: $query); + } } @mixin mdc-chip-leading-icon-color($color, $opacity: $mdc-chip-icon-opacity, $query: mdc-feature-all()) { diff --git a/packages/mdc-touch-target/_mixins.scss b/packages/mdc-touch-target/_mixins.scss index eed9cc7fb24..ef34e5c0281 100644 --- a/packages/mdc-touch-target/_mixins.scss +++ b/packages/mdc-touch-target/_mixins.scss @@ -42,7 +42,10 @@ @mixin mdc-touch-target-component($component-height, $query: mdc-feature-all()) { $feat-structure: mdc-feature-create-target($query, structure); + $vertical-margin-value: ($mdc-touch-target-height - $component-height) / 2; + @include mdc-feature-targets($feat-structure) { - margin: ($mdc-touch-target-height - $component-height) / 2 0; + margin-top: $vertical-margin-value; + margin-bottom: $vertical-margin-value; } }