Fix: a11y - edit page - add block/blocks-chooser

[Manas-Kenge]

• I signed and returned the Plone Contributor Agreement, and received and accepted an invitation to join a team in the Plone GitHub organization.
• I verified there aren't other open pull requests for the same change.
• I followed the guidelines in Contributing to Volto.
• I succesfully ran code linting checks on my changes locally.
• I succesfully ran unit tests on my changes locally.
• I succesfully ran acceptance tests on my changes locally.
• If needed, I added new tests for my changes.
• If needed, I added documentation for my changes, either in the Storybook or narrative documentation.
• I included a change log entry in my commits.

---

Closes #5212

This pull request fixes accessibility in the "Add Block" modal. Focus now stays inside the modal, pressing Enter expands the accordion and moves focus inside, while ESC closes it and returns focus to the header.

[netlify]

✅ Deploy Preview for plone-components canceled.

Name	Link
🔨 Latest commit	a75e8b7
🔍 Latest deploy log	https://app.netlify.com/sites/plone-components/deploys/678c9d80ce7afb0008c9b0e8

[Manas-Kenge]

@stevepiercy Can you review this?

[stevepiercy]

I only triaged this PR. It still needs technical review. I'll add the teams to the request.

[stevepiercy]

The news looks good. This PR still needs technical review.

[JeffersonBledsoe]

Hi @Manas-Kenge, thanks for the work on this. While the work in this PR is definitely an improvement on the existing functionality and is much appreciated, I think the multiple problems noted with the blocks chooser noted in the linked issue need further discussion and some more definitive criteria for what a 'fixed' version of the chooser should be. Let's put this PR on hold while we get a clearer picture of what all the problems are and what the best way of solving them should be. cc @plone/volto-accessibility .

Notes I made while doing a quick test of this PR using VoiceOver on mac via Safari and Google Chrome:

• "Add block button" markup should reflect what the button is going to control and it's state. We could aria-expanded and aria-controls to associate the button with the picker. We also need to add aria-haspopup="dialog".
• When using the search, we should use a live region to convey the results are changing (e.g. list the number of results or say there are no results).
• We should include a close button. This isn't a simple enhancement for an input picker (like a calendar selection for a date input) and so the 'ESC to close' shortcut shouldn't be the only thing we provide to close this dialog. Even alot of accessible date pickers provide a dedicated close button. This does not currently exist.
• When closing the picker without selecting something, focus should return to the "Add block" button. This does not currently work.
• When the picker is closed through the selection of a block, the focus should move to the new block. This PR has this behaviour.
• Some users may expect focus to return to the start of the picker when pressing 'TAB' after being on the last focusable element. This is common behaviour for forms within dialogs. This needs further research so isn't a "MUST" requirement.

[Manas-Kenge]

Thank you, @JeffersonBledsoe, for the detailed review and thoughtful feedback.

Regarding the close button, I initially implemented an 'X' button for closing the blocks chooser but noticed it negatively impacted the UI, as it increased the height of the accordion more than necessary. To maintain a clean design, I decided to remove it. However, I understand the importance of accessibility and am happy to add it if the accessibility team decides that including a close button is essential.

As for using aria-expanded, aria-controls, aria-haspopup I will look into it.

I'll await further input from the accessibility team to ensure these changes are properly implemented. Please let me know how you’d like to proceed after discussing these points further.