Implementation design · 001-mobile-action-bar

Mobile action bar

How we will build it.

Status Draft Spec 001-mobile-action-bar Owner Brian Corbin · @briancorbinxyz Branch 001-mobile-action-bar Created Read time

Build the bar as a flex row of icon buttons, each a min-height:24px;min-width:24px hit box with a gap that satisfies the SC 2.5.8 spacing test, and an aria-label per button. The one decision worth recording is the target-size floor (D-001): 24×24 at Level AA, grounded against the corpus, not the reflexive 44×44 that belongs to the AAA / Enhanced criterion.

1 · Technical context

Language(s)
HTML + CSS; no framework required for the bar itself.
Architecture
A single presentational component: a flex row of <button> elements, each an icon glyph with an accessible name.
Testing
A rendered-geometry assertion (computed box ≥ 24×24 px per button) plus an inter-target spacing check; an axe/a11y pass for accessible names.
Constraints
24×24 CSS px is the floor for every control (FR-001); spacing must pass the SC 2.5.8 24 px-circle test (FR-002); the 44×44 enhanced target is per-control opt-in (FR-003), never the baseline.

2 · Grounding & evidence

Every design-bearing fact this design rests on, and how it was confirmed. Status is verified (opened the source this turn), spike, or assumed.

Claim the design rests onSourceStatusFinding / note
The Level-AA minimum target size is 24×24 CSS px, introduced in WCAG 2.2 as SC 2.5.8 — not the 44×44 of the AAA SC 2.5.5. KB-0001@2023-10-05 (web-a11y corpus) verified Opened the corpus document this turn: WCAG 2.2 (W3C Rec, 5 Oct 2023) SC 2.5.8 Target Size (Minimum), Level AA = 24×24 CSS px, with spacing / inline / user-agent / essential exceptions. 44×44 is the AAA Enhanced target (SC 2.5.5, WCAG 2.1). Grounds D-001.
A CSS flex gap plus per-button min-size satisfies the SC 2.5.8 spacing exception for a dense bar. Spike: measure the computed target boxes and inter-target circle test at three, four, and five actions spike Pending. Expected to pass with a modest gap; the polish phase records the measured spacing. Grounds FR-002's spacing path.

3 · Approach

The bar is a <nav> holding a flex row of <button> controls. Each button sets min-inline-size:24px;min-block-size:24px (the FR-001 floor) and carries an aria-label (FR-004). The row's gap is sized so the SC 2.5.8 24 px-circle test passes even when buttons sit at the floor (FR-002). A control marked primary raises only its own box to 44×44 (FR-003); siblings are untouched. Nothing here depends on a colour theme or animation — those are deferred.

4 · Decisions

D-001 · Minimum interactive target size

Status
Accepted
Context
The action bar's icon buttons need a minimum hit target. The reflexive answer — 44×44 CSS px — is Apple's Human Interface Guidelines figure and WCAG 2.1's AAA SC 2.5.5 (Enhanced), not the AA floor. WCAG 2.2 introduced SC 2.5.8 Target Size (Minimum) at Level AA: 24×24 CSS px, with spacing, inline, and essential exceptions. Grounded against KB-0001@2023-10-05.
Decision
Set the minimum interactive target to 24×24 CSS px to meet WCAG 2.2 SC 2.5.8 (Level AA); treat 44×44 (SC 2.5.5, AAA) as an enhanced target for primary actions, not the baseline.
Consequences
+ A real AA floor, cited and edition-pinned — no longer an assumed 44. + Denser bars stay conformant. − AAA (44×44) is a separate, higher bar adopted per-control, not by default.

5 · Project structure

components/
  action-bar/
    action-bar.html   nav + flex row of icon buttons
    action-bar.css     24px min target + gap spacing + primary 44px opt-in
test/
  action-bar.geometry.test.js   computed box >= 24x24 and spacing circle test

6 · Risks & mitigations

RiskLikelihoodImpactMitigation
R-1 · A designer reintroduces 44×44 as the baseline, over-shooting AA and crowding a dense bar.MLEncode 24×24 as the token floor and 44×44 as an explicit per-control primary tier; the geometry test asserts siblings stay at 24.
R-2 · Icon-only buttons ship without accessible names.MMThe a11y test fails the build if any button lacks an aria-label (FR-004).

7 · Open questions

None outstanding — the target-size floor is decided in D-001 and grounded against KB-0001@2023-10-05; the spacing figure is a bounded spike, not an open question.

8 · Change log

  1. Initial design. Flex row of icon buttons at the 24×24 CSS px AA floor with SC 2.5.8-conformant spacing; target-size decision recorded as D-001, grounded against KB-0001@2023-10-05.