feat(checkbox): add WCAG AA recommended minimum 24px square hotspot o…

…ptimized for touch users (#7773)

**Related Issue:** #6692 

## Summary

This adds an invisible 24px hotspot for pointer and touch clicks around
the checkbox for all scales. If the `--calcite-checkbox-size` custom
property is modified to be larger than 24px, this hotspot won't prevent
the clickable area from expanding to the new size; it will just serve to
enlarge the clickable area when the size is less than the WCAG AA
recommended minimum size of 24px.

---------

Co-authored-by: Erik Harper <eriklharper@pm.me>

packages/calcite-components/src/components/checkbox/checkbox.e2e.ts

@@ -8,6 +8,7 @@ import {
   labelable,
   hidden,
 } from "../../tests/commonTests";
+import { html } from "../../../support/formatting";
 
 describe("calcite-checkbox", () => {
   describe("honors hidden attribute", () => {
@@ -167,4 +168,114 @@ describe("calcite-checkbox", () => {
       shadowFocusTargetSelector: ".toggle",
     });
   });
+
+  describe("WCAG AA recommended minimum 24px click area", () => {
+    it("small checkbox allows clicks 5px around all sides", async () => {
+      const page = await newE2EPage();
+      await page.setContent(html`<calcite-checkbox scale="s"></calcite-checkbox>`);
+      const checkbox = await page.find("calcite-checkbox");
+      const { left, top, right, bottom } = await page.evaluate(() =>
+        document.querySelector("calcite-checkbox").getBoundingClientRect().toJSON()
+      );
+
+      const maxExtraPixels = 5;
+
+      await page.mouse.click(left - maxExtraPixels, top - maxExtraPixels);
+      await page.waitForChanges();
+
+      expect(await checkbox.getProperty("checked")).toBe(true);
+
+      await page.mouse.click(right + maxExtraPixels, top + maxExtraPixels);
+      await page.waitForChanges();
+
+      expect(await checkbox.getProperty("checked")).toBe(false);
+
+      await page.mouse.click(left - maxExtraPixels, bottom - maxExtraPixels);
+      await page.waitForChanges();
+
+      expect(await checkbox.getProperty("checked")).toBe(true);
+
+      await page.mouse.click(right + maxExtraPixels, bottom + maxExtraPixels);
+      await page.waitForChanges();
+
+      expect(await checkbox.getProperty("checked")).toBe(false);
+
+      await page.mouse.click(right + maxExtraPixels + 1, bottom + maxExtraPixels + 1);
+      await page.waitForChanges();
+
+      expect(await checkbox.getProperty("checked")).toBe(false);
+    });
+
+    it("medium checkbox allows clicks 4px around all sides", async () => {
+      const page = await newE2EPage();
+      await page.setContent(html`<calcite-checkbox scale="m"></calcite-checkbox>`);
+      const checkbox = await page.find("calcite-checkbox");
+      const { left, top, right, bottom } = await page.evaluate(() =>
+        document.querySelector("calcite-checkbox").getBoundingClientRect().toJSON()
+      );
+
+      const maxExtraPixels = 4;
+
+      await page.mouse.click(left - maxExtraPixels, top - maxExtraPixels);
+      await page.waitForChanges();
+
+      expect(await checkbox.getProperty("checked")).toBe(true);
+
+      await page.mouse.click(right + maxExtraPixels, top + maxExtraPixels);
+      await page.waitForChanges();
+
+      expect(await checkbox.getProperty("checked")).toBe(false);
+
+      await page.mouse.click(left - maxExtraPixels, bottom - maxExtraPixels);
+      await page.waitForChanges();
+
+      expect(await checkbox.getProperty("checked")).toBe(true);
+
+      await page.mouse.click(right + maxExtraPixels, bottom + maxExtraPixels);
+      await page.waitForChanges();
+
+      expect(await checkbox.getProperty("checked")).toBe(false);
+
+      await page.mouse.click(right + maxExtraPixels + 1, bottom + maxExtraPixels + 1);
+      await page.waitForChanges();
+
+      expect(await checkbox.getProperty("checked")).toBe(false);
+    });
+
+    it("large checkbox allows clicks 3px around all sides", async () => {
+      const page = await newE2EPage();
+      await page.setContent(html`<calcite-checkbox scale="l"></calcite-checkbox>`);
+      const checkbox = await page.find("calcite-checkbox");
+      const { left, top, right, bottom } = await page.evaluate(() =>
+        document.querySelector("calcite-checkbox").getBoundingClientRect().toJSON()
+      );
+
+      const maxExtraPixels = 3;
+
+      await page.mouse.click(left - maxExtraPixels, top - maxExtraPixels);
+      await page.waitForChanges();
+
+      expect(await checkbox.getProperty("checked")).toBe(true);
+
+      await page.mouse.click(right + maxExtraPixels, top + maxExtraPixels);
+      await page.waitForChanges();
+
+      expect(await checkbox.getProperty("checked")).toBe(false);
+
+      await page.mouse.click(left - maxExtraPixels, bottom - maxExtraPixels);
+      await page.waitForChanges();
+
+      expect(await checkbox.getProperty("checked")).toBe(true);
+
+      await page.mouse.click(right + maxExtraPixels, bottom + maxExtraPixels);
+      await page.waitForChanges();
+
+      expect(await checkbox.getProperty("checked")).toBe(false);
+
+      await page.mouse.click(right + maxExtraPixels + 1, bottom + maxExtraPixels + 1);
+      await page.waitForChanges();
+
+      expect(await checkbox.getProperty("checked")).toBe(false);
+    });
+  });
 });

packages/calcite-components/src/components/checkbox/checkbox.scss

@@ -58,13 +58,23 @@
 }
 
 .toggle {
-  @apply focus-base;
+  @apply focus-base relative;
 
   &:active,
   &:focus,
   &:focus-visible {
     @apply focus-outset;
   }
+
+  &::after {
+    content: "";
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    min-block-size: theme("width.6");
+    min-inline-size: theme("width.6");
+    position: absolute;
+    transform: translateX(-50%) translateY(-50%);
+  }
 }
 
 @include disabled();