Accessibility in React Speed dial component
30 Jan 20232 minutes to read
Accessibility is achieved in the Speed Dial component through WAI-ARIA standard and keyboard navigations. The Speed Dial component can be effectively accessed through assistive technologies such as screen readers.
The Speed Dial component is interactive with below keyboard shortcuts.
|Enter||Open/close the menu. If a SpeedDial item is focused, should triggers the clicked event for the item.|
|Up-arrow||Navigates up or to the previous menu item.|
|Left-Arrow||Navigates left or to the previous menu item.|
|Down-Arrow||Navigates down or to the previous menu item.|
|Right-Arrow||Navigates right or to the previous menu item.|
|Home||Navigates to the first menu item.|
|End||Navigates to the last menu item.|
|Esc||Closes the menu.|
The following ARIA attributes are used in SpeedDial component based on its state.
|role||This attribute is added to the input element to describe the actual role.|
|aria-label||Attribute provides the text label with some default description for the SpeedDial and its items.|
|aria-expanded||It indicates whether the SpeedDial current state is expanded or collapsed.|
|aria-haspopup||It indicates whether the SpeedDial has popup items or not.|
|aria-controls||Attribute is set to the SpeedDial button and it points to the corresponding content.|
|aria-disabled||It indicates the disabled state of the SpeedDial and its items.|