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;
}
}