diff --git a/packages/mdc-button/_mixins.scss b/packages/mdc-button/_mixins.scss
index d7a15db5e5d..c22aa5ea4da 100644
--- a/packages/mdc-button/_mixins.scss
+++ b/packages/mdc-button/_mixins.scss
@@ -72,7 +72,7 @@ $mdc-button-ripple-target: ".mdc-button__ripple";
}
.mdc-button__touch {
- @include mdc-touch-target($query);
+ @include mdc-touch-target($query: $query);
}
@include mdc-button-ink-color(primary, $query);
diff --git a/packages/mdc-chips/_mixins.scss b/packages/mdc-chips/_mixins.scss
index f88b226b40e..bf351dbd9ea 100644
--- a/packages/mdc-chips/_mixins.scss
+++ b/packages/mdc-chips/_mixins.scss
@@ -89,7 +89,7 @@ $mdc-chip-ripple-target: ".mdc-chip__ripple";
}
.mdc-chip__touch {
- @include mdc-touch-target($query);
+ @include mdc-touch-target($query: $query);
}
}
diff --git a/packages/mdc-fab/README.md b/packages/mdc-fab/README.md
index 8d71493b4da..3d47c951e35 100644
--- a/packages/mdc-fab/README.md
+++ b/packages/mdc-fab/README.md
@@ -143,6 +143,24 @@ In browsers that fully support CSS custom properties, the above mixins will work
### Additional Information
+#### Accessibility
+
+Material Design spec advises that touch targets should be at least 48x48px.
+While the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:
+
+```html
+
+```
+
+Note that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).
+
#### Positioning
Developers must position MDC FAB as needed within their application's design.
diff --git a/packages/mdc-fab/_mixins.scss b/packages/mdc-fab/_mixins.scss
index c6933ead69d..722420106c0 100644
--- a/packages/mdc-fab/_mixins.scss
+++ b/packages/mdc-fab/_mixins.scss
@@ -25,11 +25,12 @@
@import "@material/feature-targeting/mixins";
@import "@material/ripple/mixins";
@import "@material/ripple/variables";
-@import "@material/theme/functions";
-@import "@material/theme/mixins";
+@import "@material/rtl/mixins";
@import "@material/shape/mixins";
@import "@material/shape/functions";
-@import "@material/rtl/mixins";
+@import "@material/theme/functions";
+@import "@material/theme/mixins";
+@import "@material/touch-target/mixins";
@import "@material/typography/mixins";
@import "./variables";
@@ -43,6 +44,8 @@ $mdc-fab-ripple-target: ".mdc-fab__ripple";
@mixin mdc-fab-without-ripple($query: mdc-feature-all()) {
// postcss-bem-linter: define fab
+ @include mdc-touch-target-wrapper($query);
+
.mdc-fab {
@include mdc-fab-base_($query: $query);
@include mdc-fab-container-color(secondary, $query: $query);
@@ -58,6 +61,17 @@ $mdc-fab-ripple-target: ".mdc-fab__ripple";
@include mdc-fab--extended_($query: $query);
}
+ .mdc-fab--touch {
+ @include mdc-touch-target-component(
+ $component-height: $mdc-fab-mini-height,
+ $component-width: $mdc-fab-mini-height,
+ $query: $query);
+
+ .mdc-fab__touch {
+ @include mdc-touch-target($set-width: true, $query: $query);
+ }
+ }
+
.mdc-fab__label {
@include mdc-fab--label_($query: $query);
}
diff --git a/packages/mdc-touch-target/_mixins.scss b/packages/mdc-touch-target/_mixins.scss
index 457404ab418..30f172308fd 100644
--- a/packages/mdc-touch-target/_mixins.scss
+++ b/packages/mdc-touch-target/_mixins.scss
@@ -43,16 +43,32 @@
}
/// Styles applied to the component's inner touch target element.
-@mixin mdc-touch-target($query: mdc-feature-all()) {
+/// By default, only sets the inner element height to the minimum touch target
+/// height ($mdc-touch-target-height).
+/// @param {Boolean} $set-width [false] - Sets the inner element width to the
+/// minimum touch target width ($mdc-touch-target-width).
+@mixin mdc-touch-target($set-width: false, $query: mdc-feature-all()) {
$feat-structure: mdc-feature-create-target($query, structure);
@include mdc-feature-targets($feat-structure) {
position: absolute;
top: 50%;
right: 0;
- left: 0;
height: $mdc-touch-target-height;
- transform: translateY(-50%);
+ }
+
+ @if $set-width {
+ @include mdc-feature-targets($feat-structure) {
+ /* @noflip */
+ left: 50%;
+ width: $mdc-touch-target-width;
+ transform: translate(-50%, -50%);
+ }
+ } @else {
+ @include mdc-feature-targets($feat-structure) {
+ left: 0;
+ transform: translateY(-50%);
+ }
}
}