Open afercia opened 5 months ago
SantosGuillamot
commented
3 months ago The "Connected" icon is not used anymore and instead, the block icon is reused adding a message saying "Block is connected". I'm pretty sure that there are more accessibility improvements we need to work on, but should we close this specific issue as it doesn't seem to apply anymore?
afercia
commented
3 months ago Late to the party but I'm afraid the text This block is connected placed at the end fo the menu breaks the ARIA menu pattern.
A role=menu is only expected to contain children with role menuitem, menuitemcheckbox, menuitemradio and, optionally, groups with separators.
The textThis block is connected. is just a <span> element placed within a role="group". A menu group is not expected to contain plain text
Also, the arrows keyboard interaction, which is the expected interaction for a menu, will never reach this text as it works only for items in the menu. Screen reader users will have very few chances to discover this text at the bottom of the menu as they wouldn't expect it to be there.
I haven't followed the discussion where this design was provided but there have been already other cases of extraneous content in a role=menu and they have been removed. I'd kindly ask to remove this text from the menu to preserve the ARIA menu pattern expected semantics.
I'd argue that also from a visuals perspective, burying down in a menu such important information isn't ideal I'd tend to think it's unlikely users will ever expect the 'connected' information to be inside the 'Transform to' It can't be added in the block toolbar as well. As an alternative solutoin, I'd sugget to explore placing this information in the inspetor block card.
SantosGuillamot
commented
3 months ago Thanks a lot for the feedback and sorry for introducing those issues.
If I am not mistaken, that was introduced in this pull request by @kevin940726 and the discussion happened here.
@richtabor @jasmussen As you were involved in that conversation, maybe you can help here. Any alternative to the "The block is connected" text, which is causing accessibility issues?
jasmussen
commented
3 months ago It sounds like it's the placement in the DOM of the text that's causing issues, not the content of the text. The pattern is similar to this one:
Should that menu be fixed too?
kevin940726
commented
3 months ago As an alternative solutoin, I'd sugget to explore placing this information in the inspetor block card.
Happy to explore this if we think it'd be better for accessibility. It'd be better to have a unified way to display such text as shown in the edit mode popover too though!
afercia
commented
3 months ago The pattern is similar to this one:
Visually, it's similar. Semantically, it is not. That text is placed outside of the role=menu:
It's unlikely screen reader users will ever get that text though, unless they switch their scren reader to browse mode and manually explore the content of the popover.
Description
Spltting this out from https://github.comsically/WordPress/gutenberg/issues/58595#issuecomment-2060646354
The 'connected' visual indicator added to the block toolbar is not OK. It's a focusable div element with an aria-label attribute, which is not OK and it's something that was already pointed out several times as a bad practice. Never use a focusable div unless it reproduces all the native semantics and behaviors of the corresponding HTML element that is supposed to replace.
Additionally:
It should be changed to an aria-disabled, nooped, button. It should show a tooltip.
As mentioned in several other issues and PRs, please remind:
Step-by-step reproduction instructions
Animated GIF to illustrate:
Screenshots, screen recording, code snippet
No response
Environment info
No response
Please confirm that you have searched existing issues in the repo.
Yes
Please confirm that you have tested with all plugins deactivated except Gutenberg.
Yes