@eagami/ui 5.18.0 → 5.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eagami/ui",
-  "version": "5.18.0",
+  "version": "5.20.0",
   "description": "Lightweight, accessible, themeable Angular UI component library and icon set built on CSS custom properties",
   "author": "Michal Wiraszka <michal@eagami.com>",
   "license": "MIT",

package/src/styles/_mixins.scss

@@ -2,6 +2,11 @@
 //   @use '../../styles/mixins' as ea;
 //   .ea-foo__close { @include ea.icon-button; }
 
+// WCAG 2.2 SC 2.5.8 Target Size (Minimum), Level AA. Any pointer target the
+// library ships has to reach this in at least one dimension pair, or qualify
+// for one of the SC's exceptions (inline, spacing, essential).
+$target-size-min: 24px;
+
 // Standard focus indicator. The ring is a soft box-shadow halo, but box-shadow
 // is dropped in forced-colors (Windows High Contrast) mode, which would leave
 // keyboard users with no visible focus. Pair the halo with a real outline that
@@ -47,6 +52,8 @@
 // it reads clearly inside the box regardless of how much padding the icon's own
 // viewBox carries (the feather `x`, for instance, only fills its middle half).
 @mixin icon-button {
+  // Anchors the grown pointer target below
+  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -67,6 +74,25 @@
     font-size: 1.25em;
   }
 
+  // The visible box is deliberately small on the dense tiers (17.5px at 2xs,
+  // 21px at xs), which is under the 24px WCAG 2.2 SC 2.5.8 target minimum.
+  // SC 2.5.8 measures the interactive target rather than the painted control,
+  // so the target is grown here and the visuals are left alone.
+  //
+  // A layout that stacks or abuts these buttons closer than the minimum must
+  // opt out via `--ea-icon-button-target: 0`, because grown targets that
+  // overlap steal each other's clicks, which is worse than the undersized
+  // targets the SC's spacing exception already covers.
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: max(100%, var(--ea-icon-button-target, #{$target-size-min}));
+    height: max(100%, var(--ea-icon-button-target, #{$target-size-min}));
+    transform: translate(-50%, -50%);
+  }
+
   &:hover {
     background-color: var(--color-state-hover);
     color: var(--color-text-primary);

package/src/styles/wcag-floors.spec.ts

@@ -0,0 +1,122 @@
+/// <reference types="node" />
+import { readFileSync, readdirSync } from 'node:fs';
+import { join } from 'node:path';
+
+/**
+ * Source-level guards for the accessibility floors the library commits to.
+ *
+ * These cannot be covered by the per-component axe specs: jsdom has no layout,
+ * so nothing at runtime can measure a rendered target box or a computed
+ * font-size. The floors are therefore asserted against the stylesheets that
+ * define them. Both floors regressed silently once, when the `2xs` tier scaled
+ * every em-derived dimension down a step without anything failing.
+ */
+
+const SRC = process.cwd();
+
+function read(relativePath: string): string {
+  return readFileSync(join(SRC, relativePath), 'utf8');
+}
+
+function componentStylesheets(): { name: string; css: string }[] {
+  const lib = join(SRC, 'src/lib');
+  return readdirSync(lib, { withFileTypes: true })
+    .filter(entry => entry.isDirectory())
+    .flatMap(dir =>
+      readdirSync(join(lib, dir.name))
+        .filter(file => file.endsWith('.component.scss'))
+        .map(file => ({
+          name: `${dir.name}/${file}`,
+          css: readFileSync(join(lib, dir.name, file), 'utf8'),
+        })),
+    );
+}
+
+/** Font-size in px of the smallest tier, from the typography tokens. */
+const SMALLEST_TIER_PX = 10;
+
+describe('WCAG floors', () => {
+  describe('SC 2.5.8 Target Size (Minimum)', () => {
+    const mixins = read('src/styles/_mixins.scss');
+
+    it('declares the 24px minimum as a single shared constant', () => {
+      expect(mixins).toMatch(/\$target-size-min:\s*24px;/);
+    });
+
+    it('grows the shared icon-button target to that minimum', () => {
+      const mixin = mixins.slice(mixins.indexOf('@mixin icon-button'));
+      const body = mixin.slice(0, mixin.indexOf('\n}\n'));
+
+      // The painted box stays small on the dense tiers, so the target has to be
+      // grown independently of width/height, defaulting to the shared minimum
+      expect(body).toContain('position: relative');
+      expect(body).toMatch(
+        /width:\s*max\(100%,\s*var\(--ea-icon-button-target,\s*#\{\$target-size-min\}\)\)/,
+      );
+      expect(body).toMatch(
+        /height:\s*max\(100%,\s*var\(--ea-icon-button-target,\s*#\{\$target-size-min\}\)\)/,
+      );
+    });
+
+    it('makes a component that shrinks the box decide about the grown target', () => {
+      // A box smaller than the minimum either grows its target or opts out; it
+      // must not silently keep a 24px target that can overlap its neighbour
+      const shrunk = componentStylesheets().filter(({ css }) =>
+        /--ea-icon-button-size:\s*(0|1(\.\d+)?)em/.test(css),
+      );
+
+      // Zero matches is a valid state: it means nothing currently shrinks the
+      // box below the minimum, which is the outcome this rule is steering toward
+      for (const { name, css } of shrunk) {
+        expect(`${name}: ${/--ea-icon-button-target:/.test(css)}`).toBe(`${name}: true`);
+      }
+    });
+
+    it('routes every icon button through the mixin rather than hand-rolling the box', () => {
+      const handRolled = componentStylesheets().filter(({ css }) =>
+        /\.ea-[a-z-]+__(close|clear|dismiss)\s*\{[^}]*\bwidth:/.test(css),
+      );
+
+      expect(handRolled.map(f => f.name)).toEqual([]);
+    });
+  });
+
+  describe('Legible floors for field sub-text', () => {
+    it('floors the field label at 12px however far the tier scales down', () => {
+      const css = read('src/lib/field/field-label.component.scss');
+
+      expect(css).toMatch(
+        /font-size:\s*max\(var\(--ea-field-label-size[^)]*\)[^,]*,\s*0\.75rem\)/,
+      );
+    });
+
+    it('floors error and hint text at 11px however far the tier scales down', () => {
+      const css = read('src/lib/field/field-messages.component.scss');
+
+      expect(css).toMatch(
+        /font-size:\s*max\(var\(--ea-field-messages-size[^)]*\)[^,]*,\s*0\.6875rem\)/,
+      );
+    });
+
+    it('keeps the floor at the point of use, not in each component that sets the variable', () => {
+      // 18 components declare these variables; a floor copied into each would
+      // be missed by the next one added
+      const setters = componentStylesheets().filter(({ css }) =>
+        /--ea-field-(label|messages)-size:/.test(css),
+      );
+
+      expect(setters.length).toBeGreaterThan(10);
+      for (const { name, css } of setters) {
+        expect(`${name}: ${/--ea-field-\w+-size:\s*max\(/.test(css)}`).toBe(
+          `${name}: false`,
+        );
+      }
+    });
+
+    it('would otherwise scale sub-text below the floors at the smallest tier', () => {
+      // Documents why the floors exist: the unclamped em values at 2xs
+      expect(SMALLEST_TIER_PX * 0.875).toBeLessThan(12);
+      expect(SMALLEST_TIER_PX * 0.8125).toBeLessThan(11);
+    });
+  });
+});