Accessible action states

Loading problem workspace…

Accessible action states · UIHero

Accessible action states

Style a primary action with clear hover, keyboard-focus, and disabled states.

EasyCSS Interaction States

20 min81.3% acceptance

Description

Complete the button styles so pointer and keyboard users receive distinct interaction feedback. The focus indicator must remain visible against the preview surface, disabled controls must not look interactive, and the layout must work when labels wrap.

Requirements

Enabled primary actions have readable foreground and background colors with a visible boundary.
Hovering an enabled primary action produces a visible color change without changing its dimensions.
Keyboard focus produces a high-contrast :focus-visible indicator without layout shift.
Disabled actions have reduced visual emphasis, use a non-interactive cursor, and do not adopt the enabled hover treatment.
Long button labels wrap without overflowing their action row or overlapping adjacent controls.

Keyboard focus

Input

Press Tab until Save changes receives focus

Expected output

A high-contrast focus indicator appears without shifting the button

Constraints

Use :focus-visible for the keyboard focus treatment
Do not remove outlines unless an equally clear replacement is provided
Disabled buttons must expose a non-interactive cursor and reduced emphasis

Hints

Hint 1

Establish readable colors and stable dimensions for the base button before styling interactions.

Hint 2

Give hover and keyboard focus separate selectors so each input method receives appropriate feedback.

Hint 3

Override interactive treatments for disabled buttons and reduce their emphasis without hiding the label.

focus-visiblebuttonsaccessibility

Loading problem workspace…