Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Selecting an item from the media gallery is not keyboard accessible and has no role or state #7077

Open
daz079 opened this issue Jan 31, 2024 · 2 comments
Labels
area: media-library type: feature code contributing to the implementation of a feature and/or user facing functionality

Comments

@daz079
Copy link

daz079 commented Jan 31, 2024

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

@daz079 daz079 added the type: bug code to address defects in shipped code label Jan 31, 2024
@martinjagodic martinjagodic added type: feature code contributing to the implementation of a feature and/or user facing functionality area: media-library and removed type: bug code to address defects in shipped code labels Feb 1, 2024
@daz079
Copy link
Author

daz079 commented Feb 9, 2024

@martinjagodic

I'm not totally sure this is a "Feature", it's a Bug, it doesn't work with keyboard at all, that means many users with disabilities cannot use it at all.

If it were broken for mouse clicks, then it would be a bug, right? Kinda the same thing in my opinion, some folks can use a mouse, some can't, the ones that can't are excluded because of their disability, at present.

Any chance you will agree and recategorise this as a bug, so it doesn't get left on the back burner, please?

Thanks

@martinjagodic
Copy link
Member

There is no difference in priority with bug vs feature. As keyboard compatibility was never integrated, adding it would be a new feature.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: media-library type: feature code contributing to the implementation of a feature and/or user facing functionality
Projects
None yet
Development

No branches or pull requests

2 participants