Orvain UI

Compact Button

How the Compact Button works with a keyboard and assistive tech, and where it stands against WCAG 2.2 AA.

FreeReact and Vue
AAWCAG 2.2 target
4/4contrast pairs passing
4keyboard interactions

The Compact Button is a native <button> holding a single icon, used for close, more, copy and expand. With no visible text it depends entirely on its aria-label for a name, and on its size for a target that can be hit.

Keyboard#

Tab

Moves focus to the button.

Shift+Tab

Moves focus to the previous focusable element.

Enter

Activates the button.

Space

Activates the button when the key is released.

Semantics#

<button type="button">

Native role and keyboard handling.

Always
aria-label

The icon gives no name, so every compact button carries one: Close, More actions, Copy link.

Always
aria-expanded

A More or Expand button says whether what it controls is open.

Opens a menu or panel
aria-hidden

The glyph itself is hidden from assistive tech; the label speaks for it.

Icon

Colour contrast#

Every variant and state has to meet WCAG 2.2 Level AA. Measure the colours as they land on screen: a translucent hover or press wash over whatever sits behind it.

3:1

Glyph · Rest, Hover

The icon stands in for text, so it needs 3:1 against the surface. #5a5a5a on white and #1a1a1a on the #f2f2f2 hover wash both clear it comfortably.

WCAG 1.4.11 Non-text Contrast ↗
Not required

Stroke · Stroke mode

The #e1e1e1 ring is decoration; the glyph already shows there is a control.

WCAG 1.4.11 Non-text Contrast ↗
3:1

Focus indicator · Focus visible

The preview rings focus in #59eaa9, which measures 1.53:1 on white and fails. Use the system ring (#1a6ef8, 4.54:1) instead.

WCAG 1.4.11 Non-text Contrast ↗WCAG 2.4.13 Focus Appearance ↗
24 × 24px

Target size · Every size

Sizes run from 24 to 32px, so the whole box is the target and meets the minimum. A 16px glyph in a 24px box is fine; a 16px box is not.

WCAG 2.5.8 Target Size (Minimum) ↗

Measured contrast#

Glyph against the button's surface at rest and on hover, measured on white. The glyph only needs 3:1; both clear 4.5:1 as well. All 4 pairs reach their minimum.

ModeRestHover
Ghost · Glyph6.90passes15.55passes
Stroke · Glyph6.90passes15.55passes

Motion#

  • The hover wash fades over 150ms. It is a colour change only and nothing moves.

Checklist#

Every compact button has an aria-label that names the action, not the icon (Close, not X).

The preview's #59eaa9 focus ring fails 3:1 on white. The code library should use the system focus ring.

Compact Button has no Figma source yet, so its colours are the preview's own; check them against the library when it lands.

Neighbouring compact buttons keep at least 4px apart so a 24px target is not crowded by the next one.

Pair a compact button with a Tooltip showing its label for sighted mouse users.