Skip to content

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

@daz079

Description

@daz079

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: media-librarytype: featurecode contributing to the implementation of a feature and/or user facing functionality

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions