Add accessible labelling to submenu buttons.

[tellthemachines]

Description

Fixes #36598.

Submenu buttons, whether in Page List or the Submenu block, don't provide enough context about their use to screen readers. This PR adds an aria-label to the buttons with the item name, followed by "submenu".

In VoiceOver, this means that instead of just reading out "collapsed, button" it now reads out "[Page name], submenu, collapsed, button". I haven't checked NVDA/Windows yet.

How has this been tested?

Create a Submenu in a Navigation block, and/or add a Page List with submenus to the Navigation block.
Test with both "open on click" and the default open on hover option (with open on hover, make sure submenu indicators are enabled, otherwise the submenu just opens on focus instead of click).
Verify that screen readers read out the parent item label and the word "submenu" when submenu button is focused.

I'd appreciate especially testing on Windows screen readers!

Screenshots

Types of changes

Bug fix (non-breaking change which fixes an issue)

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• I've tested my changes with keyboard and screen readers.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

[carolinan]

I believe the word submenu in the label needs to be translation ready?

[carolinan]

Tested with NVDA on Windows using Chrome, Firefox and Opera.
The submenu toggle button works well for both the page list and submenu.
Both for the first level and submenus of submenu items.

Open on click disabled:
The button after the link is announced as "button collapsed [parent item name] submenu".

Open on click enabled:
The button is announced as; "button collapsed [parent item name] submenu".

The order is different if tabs are used to navigate, but the same information is included:
[parent item name] submenu button collapsed.

This can be approved when the tests pass.

[tellthemachines]

The tests are finally passing 😅 I think this is ready for review again.

[kevin940726]

LGTM 👍 .

The only thing I could nitpick on is whether we should make the manual concatenation of $label and __( 'submenu ') a translatable string instead. So that translators could re-order them based on language conventions, or add other punctuation marks if needed. I do think it might be over-engineered though and might not be needed.

[tellthemachines]

Thanks for the review @kevin940726 ! Good point about the string concatenation. I don't know in depth how translation works, would translators be able to decide the order of translatable string and variable? It's worth looking into, perhaps as a further enhancement.

[kevin940726]

I don't know in depth how translation works, would translators be able to decide the order of translatable string and variable?

Yes, for example in this case, label + ' ' + __('submenu') is always gonna be translated like that. But if we use a variable to represent label inside the translation text, something like sprintf( __('%s submenu'), label ), then the translators will be able to rearrange them to submenu %s or even submenu: %s.

It's worth looking into, perhaps as a further enhancement.

Agreed!