feat(button): Add support for increased touch target to button. (#4948)

material-components · Jul 25, 2019 · 1d7a2e6 · 1d7a2e6
1 parent b2e0fea
commit 1d7a2e6
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 2 deletions.
diff --git a/packages/mdc-button/README.md b/packages/mdc-button/README.md
@@ -137,6 +137,25 @@ Disabled buttons cannot be interacted with and have no visual interaction effect
 </button>
 ```
 
+## 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 button:
+
+```html
+<span>
+  <button class="mdc-button mdc-button--touch">
+    <div class="mdc-button__ripple"></div>
+    <span class="mdc-button__label">My Accessible Button</span>
+    <div class="mdc-button__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-button/_mixins.scss b/packages/mdc-button/_mixins.scss
@@ -27,6 +27,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";
@@ -61,6 +62,10 @@ $mdc-button-ripple-target: ".mdc-button__ripple";
       }
     }
 
+    .mdc-button__touch {
+      @include mdc-touch-target($query);
+    }
+
     @include mdc-button-ink-color(primary, $query);
   }
 
@@ -116,6 +121,11 @@ $mdc-button-ripple-target: ".mdc-button__ripple";
       @include mdc-button--dense_;
     }
   }
+
+  .mdc-button--touch {
+    @include mdc-touch-target-component(
+      $component-height: $mdc-button-height, $query: $query);
+  }
   // postcss-bem-linter: end
 }
 

diff --git a/packages/mdc-touch-target/_mixins.scss b/packages/mdc-touch-target/_mixins.scss
@@ -24,7 +24,7 @@
 @import "@material/feature-targeting/mixins";
 @import "./variables";
 
-/** Styles applied to the component's inner touch target element. */
+// Styles applied to the component's inner touch target element.
 @mixin mdc-touch-target($query: mdc-feature-all()) {
   $feat-structure: mdc-feature-create-target($query, structure);
 
@@ -38,7 +38,7 @@
   }
 }
 
-/** Styles applied to the component with the increased touch target. */
+// Styles applied to the component with the increased touch target.
 @mixin mdc-touch-target-component($component-height, $query: mdc-feature-all()) {
   $feat-structure: mdc-feature-create-target($query, structure);