feat(mixin): new target-size() mixin to ensure sufficient hit area (4…

…4×44px)

scss/_mixins.scss

@@ -15,6 +15,7 @@
 @import "mixins/visually-hidden";
 @import "mixins/reset-text";
 @import "mixins/text-truncate";
+@import "mixins/target-size"; // Boosted mod
 
 // Utilities
 @import "mixins/utilities";

scss/_variables.scss

@@ -1445,6 +1445,6 @@ $pre-line-height:                   1.25 !default; // Boosted mod
 // Boosted mod
 //
 
-//// Accordions
-//$accordion-spacer:            .875rem !default;
-//$accordion-spacer-sm:         $spacer / 2 !default;
+//// Minimum target size (44×44px)
+$target-size: 2.75rem !default;
+

scss/mixins/_target-size.scss

@@ -0,0 +1,23 @@
+// Minimum target size should be 44×44 CSS pixels
+//
+// See https://www.w3.org/WAI/WCAG21/Understanding/target-size.html
+// See https://w3c.github.io/wcag/understanding/pointer-target-spacing.html
+// See https://checklists.opquast.com/en/qualiteweb/the-size-of-the-clickable-elements-is-sufficient
+
+// scss-docs-start target-size
+@mixin target-size($size: $target-size, $pseudo-element: before, $position: relative, $width: $size, $height: $size) {
+  position: $position;
+
+  &::#{$pseudo-element} {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: $width;
+    min-width: 100%;
+    height: $height;
+    min-height: 100%;
+    content: "";
+    transform: translate3d(-50%, -50%, 0);
+  }
+}
+// scss-docs-end target-size

site/content/docs/5.0/getting-started/accessibility.md

@@ -57,6 +57,13 @@ On browsers that support `prefers-reduced-motion`, and where the user has *not*
 
 Boosted includes [WICG's `:focus-visible` polyfill](https://github.com/WICG/focus-visible) to ensure an enhanced focus visibility for keyboard users while shutting down focus styles on active state.
 
+### Minimum target size
+
+Boosted provides `target-size()` mixin to ensure a minimum target size, adding a centered pseudo-element with a minimum size —defaulting to `44px` to pass [WCAG 2.1 "Target Size" Success Criterion (2.5.5)](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html)— alongside a few arguments to fit specific needs (eg. different width and height, using `::after` instead of `::before`, etc.).
+
+{{< scss-docs name="target-size" file="scss/mixins/_target-size.scss" >}}
+
+
 ## Additional resources
 
 - [Web Content Accessibility Guidelines (WCAG) 2.1](https://www.w3.org/TR/WCAG21/)