feat(chips): Add support for increased touch target to chips. (#4970)

* feat(chips): Add support for increased touch target to chips. * feat(chips): Add support for increased touch target to chips.
material-components · Aug 8, 2019 · 6aa109d · 6aa109d
1 parent 8e7fd7d
commit 6aa109d
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 1 deletion.
diff --git 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
 </div>
 ```
 
+## 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
+<span>
+  <button class="mdc-chip mdc-chip--touch">
+    <div class="mdc-chip__ripple"></div>
+    <span role="gridcell">
+      <span role="button" tabindex="0" class="mdc-chip__text">Chip One</span>
+    </span>
+    <div class="mdc-chip__touch"></div>
+  </button>
+</span>
+```
+
+Note that the wrapper `<span>` 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
@@ -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
@@ -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;
   }
 }