Orvain UI

Button Group

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

FreeReact and VueButton Group blocks10 blocksPro
AAWCAG 2.2 target
6/6contrast pairs passing
4keyboard interactions

The Button Group is a role="group" around native <button> items that share one frame. Each item is its own tab stop, and a selected item is exposed through aria-pressed. That keeps it simple and predictable for up to six items.

Keyboard#

Tab

Moves focus to the next item. Every item is a tab stop; disabled items are skipped.

Shift+Tab

Moves focus to the previous item.

Enter

Presses the focused item.

Space

Presses the focused item when the key is released.

Semantics#

role="group"

Groups the items. Give it an aria-label that names what they control, such as Date range.

Always
aria-pressed

true on the chosen item and false on the rest. Leave selected undefined for plain action buttons, so they are not announced as toggles.

selected is set
aria-label

An icon-only item needs its own name; the icon is hidden.

Only icon
disabled

The group passes disabled to every item, which leaves the tab order.

disabled on the group or an item
aria-hidden="true"

Chevrons and glyphs are wrapped and hidden from assistive tech.

Icons

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.

4.5:1

Item label · Rest, Hover, Selected

14px label against the item's wash: #6d6d6d at rest and on hover, #2a2a2a bold when selected.

WCAG 1.4.3 Contrast (Minimum) ↗
3:1

Icons · Only icon

An icon-only item's glyph is #2a2a2a, well over 3:1 in every state.

WCAG 1.4.11 Non-text Contrast ↗
Not colour alone

Selected state · Selected

The selected wash is 1.14:1 against white, too faint to carry the state alone. The bold weight and darker text carry it, and aria-pressed says it to assistive tech.

WCAG 1.4.1 Use of Color ↗WCAG 1.4.11 Non-text Contrast ↗
3:1

Focus indicator · Focus visible

A 2px #1a6ef8 stroke inside the item (4.54:1 on white), raised above its neighbours so the shared hairlines never cover it.

WCAG 1.4.11 Non-text Contrast ↗WCAG 2.4.13 Focus Appearance ↗
Not required

Group frame · Always

The #f2f2f2 frame and dividers measure 1.12:1. They are decoration; the labels show where each item is.

WCAG 1.4.11 Non-text Contrast ↗

Measured contrast#

Label and icon against the item's wash over the group's white fill, in each state. All 6 pairs reach their minimum.

PartRestHoverSelected
Item · Label5.17passes4.75passes12.60passes
Item · Icon14.35passes13.17passes12.60passes

Motion#

  • Background and colour changes take 150ms and are turned off under prefers-reduced-motion.

Checklist#

Give every group an aria-label that names what it controls.

Set selected on every item of a single-choice group (true on one, false on the rest), and leave it off for plain actions.

Every item is its own tab stop. That is fine for two to six items; a longer set, or one used as a toolbar, should move to a roving tabindex with arrow keys.

The smallest size, 2X-Small, is 28px tall and clears the 24px target minimum. An icon-only item there is 24px wide, exactly the minimum.

When the group wraps on a narrow screen, the order of items still reads left to right, top to bottom.