asma-ui-core 3.85.0 → 3.86.1

package/src/styles/touchReadiness.interaction.test.tsx

@@ -0,0 +1,161 @@
+import { afterEach, describe, it } from 'vitest'
+import { expect } from 'storybook/test'
+import { StyledButton } from 'src/components/inputs/button/StyledButton'
+import { StyledMenuItem } from 'src/components/navigation/menu/StyledMenuItem'
+import { StyledTab } from 'src/components/navigation/tabs/StyledTab'
+import { StyledTabs } from 'src/components/navigation/tabs/StyledTabs'
+import { cleanup, mount } from 'src/test-utils/renderInteraction'
+import { page } from 'src/test-utils/interaction-api'
+
+/**
+ * ASMA-8210 (TB-02) — the touch-readiness primitives in `src/styles/index.css`.
+ *
+ * Real Chromium rather than the unit project, because every claim here is a computed-style or a
+ * hit-testing question: `::after` geometry, `touch-action` and "is this point inside the target"
+ * are exactly what a DOM emulator invents. The suite mounts components directly (no stories), so
+ * it adds no VRT baseline — see `docs/a11y-keyboard-contract.md`.
+ */
+
+/** The `min-height` the mobile-gated `.asma-touch-target` rule declares, or null if it is missing. */
+const touchTargetMinHeightUnderMobileMedia = (): string | null => {
+    for (const sheet of Array.from(document.styleSheets)) {
+        let rules: CSSRule[]
+        try {
+            rules = Array.from(sheet.cssRules)
+        } catch {
+            continue // cross-origin sheet; ours are inline <style> tags, so nothing of interest here
+        }
+        for (const rule of rules) {
+            if (!(rule instanceof CSSMediaRule) || !rule.conditionText.includes('743px')) continue
+            for (const inner of Array.from(rule.cssRules)) {
+                if (inner instanceof CSSStyleRule && inner.selectorText.includes('.asma-touch-target')) {
+                    return inner.style.getPropertyValue('min-height')
+                }
+            }
+        }
+    }
+    return null
+}
+
+const alphaOf = (color: string): number => {
+    const channels = /rgba?\(([^)]+)\)/.exec(color)?.[1]?.split(',') ?? []
+    // rgb() has no alpha channel, so an unparsed or 3-channel colour is fully opaque.
+    return channels.length < 4 ? 1 : Number(channels[3])
+}
+
+describe('touch-readiness primitives', () => {
+    afterEach(cleanup)
+
+    it('gives .asma-hit-area a 44px pointer target without changing the drawn size', async () => {
+        // Fixed positioning pins the probe away from the body edge so the hit tests below are
+        // arithmetic, not a guess about layout. A fixed box is still the containing block its
+        // ::after resolves against.
+        const { container } = mount(
+            <button className='asma-hit-area' style={{ position: 'fixed', left: 100, top: 100, width: 24, height: 24 }}>
+                probe
+            </button>,
+        )
+        const probe = container.querySelector('button')!
+
+        // The class supplies `position: relative` WITHOUT `!important` — the rule lives outside
+        // `@layer utilities` precisely so Tailwind's `important: true` cannot importantify it
+        // (ASMA-8210 review). If this assertion fails, the rule regressed back into the layer and
+        // the inline `fixed` (and any Tailwind position utility) would silently lose again.
+        await expect(getComputedStyle(probe).position).toBe('fixed')
+
+        // The visual box is untouched — this is hit-area padding, not a size change (ASMA-8210).
+        const box = probe.getBoundingClientRect()
+        await expect(box.width).toBe(24)
+        await expect(box.height).toBe(24)
+
+        const overlay = getComputedStyle(probe, '::after')
+        await expect(overlay.minWidth).toBe('44px')
+        await expect(overlay.minHeight).toBe('44px')
+
+        // 92px is outside the 24px box (which starts at 100) but inside the 44px overlay centred on
+        // it (90 → 134). A press there must still land on the control.
+        await expect(document.elementFromPoint(92, 112)).toBe(probe)
+        // …and the target stays bounded: 85px is outside the overlay entirely.
+        await expect(document.elementFromPoint(85, 112)).not.toBe(probe)
+    })
+
+    it('suppresses the tap flash and the double-tap-zoom delay on a pressable control', async () => {
+        const { container } = mount(<StyledMenuItem>Item</StyledMenuItem>)
+        const item = container.querySelector('li')!
+
+        await expect(item.classList.contains('asma-pressable')).toBe(true)
+        await expect(item.classList.contains('asma-touch-target')).toBe(true)
+
+        const style = getComputedStyle(item)
+        await expect(style.touchAction).toBe('manipulation')
+        await expect(alphaOf(style.getPropertyValue('-webkit-tap-highlight-color'))).toBe(0)
+        // Resting opacity is untouched — the pressed feedback lives entirely under `:active`, which
+        // is why no VRT baseline moves.
+        await expect(style.opacity).toBe('1')
+    })
+
+    it('keeps the 44px row growth on phones only, so tablet and desktop are unchanged', async () => {
+        await expect(touchTargetMinHeightUnderMobileMedia()).toBe('var(--asma-touch-target-size, 44px)')
+
+        // The interaction project runs at 1280x720 (vite.config.ts), i.e. the VRT viewport. The rule
+        // above must not apply here, or every desktop baseline would shift.
+        await expect(window.matchMedia('(max-width: 743px)').matches).toBe(false)
+        const { container } = mount(<StyledMenuItem>Item</StyledMenuItem>)
+        await expect(getComputedStyle(container.querySelector('li')!).minHeight).toBe('40px')
+    })
+
+    it('on a phone viewport, grows sub-44px rows and never shrinks a designed minimum', async () => {
+        // 390x700 puts the tester iframe under the 743px gate — the cascade CI otherwise never
+        // sees (interaction and VRT both run at 1280x720). Guards ASMA-8210 review B1: the
+        // touch-target utility is a later-source override, not a floor, so a mis-scoped opt-in
+        // would silently SHRINK a tab's effective 48x90 minimum to 44px. Both tab variants rest
+        // at 48px — the small variant's `min-h-10` loses to the base `min-h-12` by emitted
+        // order (pre-existing quirk, `cn` is plain clsx) — so NEITHER may carry the override.
+        await page.viewport(390, 700)
+        try {
+            await expect(window.matchMedia('(max-width: 743px)').matches).toBe(true)
+            const { container } = mount(
+                <>
+                    <StyledTabs value={0}>
+                        <StyledTab label='Default' />
+                    </StyledTabs>
+                    <StyledTabs size='small' value={0}>
+                        <StyledTab label='Small' />
+                    </StyledTabs>
+                    <StyledMenuItem>Item</StyledMenuItem>
+                </>,
+            )
+            const tabs = Array.from(container.querySelectorAll('[role="tab"]'))
+            await expect(tabs.length).toBe(2)
+
+            // Tabs carry no touch-target class: the effective 48px/90px minimums survive on
+            // both variants, and neither shrinks.
+            for (const tab of tabs) {
+                const tabStyle = getComputedStyle(tab)
+                await expect(tabStyle.minHeight).toBe('48px')
+                await expect(tabStyle.minWidth).toBe('90px')
+                await expect(tab.classList.contains('asma-touch-target')).toBe(false)
+            }
+
+            // Menu item: 40px → 44px, and it must not gain a min-width it never declared
+            // (Chromium resolves the initial `min-width: auto` to 0px on a block-level li).
+            const itemStyle = getComputedStyle(container.querySelector('li')!)
+            await expect(itemStyle.minHeight).toBe('44px')
+            await expect(itemStyle.minWidth).toBe('0px')
+        } finally {
+            // The desktop viewport every other test in this project assumes (vite.config.ts).
+            await page.viewport(1280, 720)
+        }
+    })
+
+    it('opts the button into touch readiness without dimming its designed pressed state', async () => {
+        const { container } = mount(<StyledButton dataTest='touch-ready-probe'>Save</StyledButton>)
+        const button = container.querySelector('button')!
+
+        await expect(button.classList.contains('asma-touch-ready')).toBe(true)
+        // StyledButton.module.scss already paints `:active` from the button colour tokens. Taking
+        // `.asma-pressable` as well would layer a 0.7 opacity over those designed colours.
+        await expect(button.classList.contains('asma-pressable')).toBe(false)
+        await expect(getComputedStyle(button).touchAction).toBe('manipulation')
+    })
+})