SpeedDial component renders a native button element that implicitly includes any passed prop. Text to describe the button can be defined with the aria-labelledby or aria-label props. Addititonally the button includes includes aria-haspopup, aria-expanded for states along with aria-controls to define the relation between the popup and the button.
The popup overlay uses menu role on the list and each action item has a menuitem role with an aria-label as the menuitem label. The id of the menu refers to the aria-controls of the button.
| Key | Function |
|---|---|
| enter | Toggles the visibility of the menu. |
| space | Toggles the visibility of the menu. |
| down arrow | Opens the menu and moves focus to the first item. |
| up arrow | Opens the menu and moves focus to the last item. |
| right arrow | Opens the menu and moves focus to the last item. |
| left arrow | Opens the menu and moves focus to the first item. |
| escape | Closes the menu. |
| Key | Function |
|---|---|
| enter | Actives the menuitem, closes the menu and sets focus on the menu button. |
| space | Actives the menuitem, closes the menu and sets focus on the menu button. |
| escape | Closes the menu and sets focus on the menu button. |
| arrow keys | Navigates between the menu items. |
| home | Moves focus to the first item. |
| end | Moves focus to the last item. |