Developer What component has
Keyboard support
| Key | Function |
|---|---|
Tab | Moves focus to the next focusable element. |
Shift+Tab | Moves focus to the previous focusable element. |
Space | Select the focused object and start dragging. |
Space (while dragging) | Stop dragging. |
Esc | Discard dragging. |
Roles & attributes
The list below describes roles and attributes that component already has.
| Role | Attribute | Element | Usage |
|---|---|---|---|
alert | div | Identifies the element as the container where alert content will be added or updated. | |
aria-live="assertive" | div | This doesn't have to be declared in the code because it is implicit in the alert role. Tells assistive technologies to interrupt other processes to provide users with immediate notification of relevant alert container changes. | |
tabIndex="0" | div | Makes the elements focusable and includes them in the page Tab sequence. | |
aria-label for grabbed item | div | Defines the string value or identifies the element (or elements) that provides an accessible name. Grabbed item will be read as: ${itemText} grabbed, current position is ${index + 1} of ${itemsCount} . | |
aria-label for grabbing item | div | Defines the string value or identifies the element (or elements) that provides an accessible name. Grabbing item will be read as: Grabbing ${itemText}, drop position is ${itemIndex + 1} of ${itemsCount} . | |
aria-label for dropped item | div | Defines the string value or identifies the element (or elements) that provides an accessible name. Dropped item will be read as: ${itemText} dropped, final position is ${index + 1} of ${itemsCount} . |
Other recommendations
See more accessibility recommendations in the common Accessibility guide.
Automated screen reader testing
Intergalactic v15.29.0, React v18.2.0, Playwright v1.25.1, Guidepup v0.13.1, MacOS Monterey 12.
Running screen reader against this file.
1. Screen reader goes into the active element.
2. Screen reader says "Overview selected tab, 1 of 3".
3. Screen reader goes to the next element.
4. Screen reader says "new Issues tab, 2 of 3".
5. Screen reader presses the "Space" button.
6. Screen reader says "newIssues grabbed, current position is 2 of 3".
7. Screen reader goes to the next element.
8. Screen reader says "new Issues tab, 3 of 3".
9. Screen reader presses the "Space" button.
10. Screen reader says "newIssues dropped, final position is 3 of 3".1. Screen reader goes into the active element.
2. Screen reader says "Overview selected tab, 1 of 3".
3. Screen reader goes to the next element.
4. Screen reader says "new Issues tab, 2 of 3".
5. Screen reader presses the "Space" button.
6. Screen reader says "newIssues grabbed, current position is 2 of 3".
7. Screen reader goes to the next element.
8. Screen reader says "new Issues tab, 3 of 3".
9. Screen reader presses the "Space" button.
10. Screen reader says "newIssues dropped, final position is 3 of 3".