Pressable
An unstyled clickable surface: button semantics - keyboard activation, focus ring, disabled state - with none of a button's looks.
Accessibility
- Enter and Space activate it and it lands in the tab order, whether it renders a native button
or a shimmed element - you never write
role,tabIndex, oronKeyDownyourself. Space is suppressed on keydown (so the page does not scroll) and fires on keyup, as a real button does. - Give it an accessible name: readable text among its children, or an
aria-labelwhen the content is icon-only. - The
:focus-visiblering is keyboard-only.outline: noneis the resting state, so pointer clicks show no ring. - Press feedback is decorative. Anything a sighted user learns from the press state must also be
conveyed semantically -
aria-pressedfor a toggle,aria-expandedfor a disclosure.