Selecting an item from the media gallery is not keyboard accessible and has no role or state #7077
Labels
area: media-library
type: feature
code contributing to the implementation of a feature and/or user facing functionality
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
The text was updated successfully, but these errors were encountered: