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 | Selects the focused object and start dragging. |
↓, ↑, ←, → arrow keys | Move the focused object in the direction indicated by the key. |
Space (while dragging) | Stops dragging. |
Esc | Discards 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-live messages
Text message for assistive technologies that will be read when the user interacts with the component.
| Action | Message template |
|---|---|
| Item was just grabbed | ${itemText} grabbed, current position is ${index + 1} of ${itemsCount} |
| Item is grabbing | Grabbing ${itemText}, drop position is ${itemIndex + 1} of ${itemsCount} |
| Item is dropped | ${itemText} dropped, final position is ${index + 1} of ${itemsCount} |
If grabbed item or zone to drop has zoneName, messages will be like in the follow table.
| Action | Message template |
|---|---|
| Item was just grabbed | ${itemText} grabbed, current position is ${itemPosition} of ${itemsCount} in ${zoneName} |
| Item is grabbing over area with another items | Grabbing ${itemText}, drop position is ${itemPosition} of ${itemsCount} in ${zoneName} |
| Item is grabbing over area without any items | Grabbing ${itemText}, drop in ${zoneName} |
| Item is dropped in drop zone with another items | ${itemText} dropped, final position is ${itemPosition} of ${itemsCount} in ${zoneName} |
| Item is dropped in drop zone without any items | ${itemText} dropped in ${zoneName} |
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".