Icon targets — WCAG 2.2 AA

SC 2.5.8 Target Size (Minimum), Level AA — 24 × 24 CSS px. Venact packs its icon controls shoulder to shoulder in headers, tab bars and tree rows, so the spacing exception (non-intersecting 24px circles) never applies — the box itself has to carry the floor. Left column is main today; right column is the proposed change. Hover and press everything — the effects are live.

1 · Workbench tab bar — the icons in the screenshot

before

22px bar · bare <div onClick>

BOTTOM PANE

panel toggles 25×22 · pin/detach 15×22 · close 15×22 — all fail

after

24px bar · IconButton variant="header"

BOTTOM PANE

every control ≥ 24×24 · real <button> · aria-label · hover + focus

Not just size. The two panel toggles were <div onClick> — not focusable, no aria-label, and the only icon controls in the codebase with no hover treatment at all. They now route through the same IconButton shell as every other header action, so they inherit the hover token, the disabled rule and keyboard access.

2 · Section header — LEFT / RIGHT PANE accordion

before

SECTION_HEADER_HEIGHT 22 · glyph 11

WORKSPACE tree…

header actions 23×22 — 1px short on both axes

after

SECTION_HEADER_HEIGHT 24 · glyph 13

WORKSPACE tree…

header actions 25×24 — passes, and the glyph reads better at 13

3 · Tree row — commander chrome

before

TREE_ROW_HEIGHT 22 · box 22×22

row controls 22×22 · adjacent — no spacing exception

after

TREE_ROW_HEIGHT 24 · box 24×24

row controls 24×24 · glyph unchanged at 14

4 · Toolbar icons and the collapsed rail

before

ToolbarIcon 22×22 · rail 22 wide

TEMPLATE CODE

22×22 button · COLLAPSED_WIDTH 22 rail

after

ToolbarIcon 24×24 · rail 24 wide

TEMPLATE CODE

24×24 · rail follows COLLAPSED_WIDTH automatically

5 · What the glyph change actually looks like

HEADER_ICON_SIZE 11 → 13. The box grew 2px; the glyph grew 2px, so the optical padding is unchanged.

6 · The change

Token / shell	Before	After	File
CONTROL_MIN_TARGET	—	24 (new SSOT)	frontend/lib/controlTokens.js
SECTION_HEADER_HEIGHT	22	CONTROL_MIN_TARGET	components/parts/paneConstants.js
HEADER_ICON_SIZE	11	13	components/parts/paneConstants.js
COLLAPSED_WIDTH	22	24 (derives)	components/parts/paneConstants.js
IconButton tile / toolbar / header	no min	minWidth/minHeight 24	components/parts/IconButton.jsx
TAB_BAR_HEIGHT	22	CONTROL_MIN_TARGET	bottom/bottomConstants.js
TREE_ROW_HEIGHT / TREE_ICON_BOX	22	CONTROL_MIN_TARGET	workbench/treeChromeTokens.js
ToolbarIcon box	22 × 22	24 × 24	shared/ToolbarIcon.jsx
Tab-bar toggles / pin / detach / close	<div onClick>	IconButton variant="header"	workbench/WorkbenchTabBar.jsx
HEADER_ICON_SIZE (data-viewer)	local dup = 11	re-exports shared	data-viewer/tableViewConstants.js

Everything derives from one token, so there is no second place to forget. The hidden tab-bar overflow-measurement copies now render the same IconButton as the real controls rather than a hand-copied padding value, so they can’t drift.

What this buys, beyond the pixel count

The tab-bar toggles become real <button>s — keyboard focusable and activatable for the first time.
They gain aria-label, matching every other header action.
They gain the shared ICON_HOVER_BG hover and the pressed state they never had.
The data-viewer stops carrying a duplicate HEADER_ICON_SIZE.
The overflow measurement is now self-syncing instead of a copy that had to be kept in step by hand.

Deliberately left alone — tell me if you want these too. CONTROL_H_COMPACT = 22 (the compact text-button/select height) also sits under the AA floor, and the mono control family is a flat 24 that deliberately skips the 44px mobile floor. Both are a different control family from the icon work, with a much wider blast radius, so this change does not touch them.