afercia
commented
22 hours ago Noticed that when the track editor UI is switched to the 'edit' view and closing the Popover by pressing the Escape key, the track editor stays in 'editing' mode. In fact, opening it again shows the editing UI. This may be confusing for users. I think the intiial view should always be the track list. Animated GIF to illustrate with focus highlighted with a red outline:
Description
The UI to add Text tracks to a Video block lives in a Popover that opens from the block toolbar.
This UI has 3 different states with a different UI. All of them render within an ARIA role=menu, which is provides specific semantic and keyboard interaction which are appropriate for only one of the states. The other two need to be refactored to provide better accessibility and improve hte expected interaction.
It is worth reminding, as reported many times already, that ARIA menus can only contain menu items, their variants manu item radio / checkbox, groups and separators. The expected keyboard interaction is to be able to narivate the menu items with the arrow keys.
Initial state
The ARIA menu contains a descriptive paragraph. At the very least, this paragraph should be moved outiside of the ARIA menu. Howeer, given the expected keyboard interaction, screen reader users may not have a clue some extra content is rendered in this popover because they will likely use arrow keys navigation to explore the menu thus entirely skipping the pargraph. I'd argue the paragraph should be enitrely removeed as a dropdown with an ARIA menu isn;t the right place for descriptions or instructions.
State with list of uploaded tracks
This is the only state where semantics, ARIA roles and interaction are the expected ones. The menu only contains menu items, split in two groups. Keyboard interaction works as expected. All content is perceivable.
Edit state
In this state, the ARIA menu contains a form elements like inputs and buttons. This is incorrect. Arrow keys navigation still kicks in and moves focus through the focusable elements, which is unexpected. It also fails on the select element, as on macOS the down arrow key opens the select. This UI is basically a form and should not be inside an ARIA menu. In this state, the UI should switch to a generic Popover content with no ARIA menu.
In similar cases, for example the Replace media dropdown, the ARIA menu only contains menu items. The additional link editing UI is a form that is rendered outisde of the menu. Screenshot:
Still not ideal, but it's a better pattern.
Step-by-step reproduction instructions
Screenshots, screen recording, code snippet
No response
Environment info
No response
Please confirm that you have searched existing issues in the repo.
Please confirm that you have tested with all plugins deactivated except Gutenberg.
Please confirm which theme type you used for testing.