Selecting an item from the media gallery is not keyboard accessible and has no role or state
- Dominant language
- JavaScript
- Stars
- 19.4k
- Forks
- 3.1k
- Avg merge
- 1d 14h
- Merged PRs (30d)
- 9
Description
**Describe the bug**
Using keyboard I should be able to select a media file from the files dialog.
Using a screen reader I should hear the role of the item when it receives focus, as well as its current state
**To Reproduce**
In the CMS click either the Choose File or Image widget, use a keyboard, tab to one of the files and press Enter or Space
Repeat with a screen reader and listen out for a role
**Expected behavior**
The item becomes "selected"
A suitable role is output by the screen reader, along with feedback to indicate it is selected
**Screenshots**
**Applicable Versions:**
decap-cms-app 3.0.12
decap-cms-core 3.2.8
decap-cms 3.0.12
MacOS 14.1.2
Chrome 121.0.6167.85
Safari
Firefox
**CMS configuration**
Not related to config
**Additional context**
What would perhaps work here, is adding role=checkbox to each item (The item currently has tabindex=0 ), then it will have a role
Adding aria-checked=true (when checked), then it will have a state
For the cardGridContainer wrapper, add role=group or use a fieldset and add an accessible name via aria-labelledby=[ID Ref of the a text node that has the label "Select files" this can be displayed or visually hidden, you can even add display: none; if you wish, as aria-labelledby ignores that
Listen for Space press and run the same function as is working for mouse clicks (also, preventDefault to prevent scroll)
As an added nicety for screen freader users, add aria-hidden="true" to the card-file-icon, as this is repetitive information, that information exists in the text string of the file name
Contributor guide
Assessment
This issue has not been assessed yet.