ButtonWidget
Button Widget
Button widgets allows for user-triggered actions, and they are most often used for discrete, atomic actions. Buttons support the optional state pressed. Buttons with this state present are toggle buttons. When pressed is "true" the button is depressed, when pressed is "false" it is not depressed.
Keyboard Interaction
With focus on the button, pressing Spacebar or Enter keys executes the action for that button.
- If the button activation closes the containing entity or launches another entity, then focus moves to the newly opened entity.
- If the button activation does not close or dismiss the containing entity, then focus remains on the button. An example might be an Apply or Recalculate button.
Mouse Interaction
- Clicking on the button executes the action for the button.
- If focus is on another element when a button is clicked with a mouse, the focus moves to the clicked button.
- If focus is on another element and the mouse is moved over a button, a visual indicator is provided to show that the button may be clicked, but focus does not yet move.
- If focus is on another element and the mouse is moved over a button then moved away, the visual indicator goes away and focus is unchanged.
Styling
When the button is in a pressed state -- either briefly when Enter or Spacebar are pressed or when the primary mouse button has been pressed but not released, then the visual appearance is altered to differentiate the pressed from an unpressed state.
ARIA Roles and Properties
- The button receives a role of button.
- The button description receives a role of role="wairole:description" and the describedby property.
- When the action associated with a button is unavailable, the button displays in a disabled state.