Description

When testing the work in #53884 it was found that the focus order sequencing fails within the nested modal.

Basically, the Font Library opens in a modal. You can focus on each font in the library. Once you click or enter into a font in the library, you go into a nested context screen that lists the weight variations of that font: 100, 200, 400, etc.

The issue lies when you enter into a font’s nested context screen. The focus shifts to the first variation’s checkbox, which allows the builder to enable or disable that variant.

However, the first focus should go to the ‘Back’ button, which would take the builder back to the Font Library overview, and then the next focus would be the first checkbox for the first variant.

This was initially discussed in the Make #accessibility channel.

Step-by-step reproduction instructions

I believe the only means to test the Font Library: Frontend [Stage 1] work is by checking out PR #53884 as the work has not been merged yet.

Hopefully, the detailed description (above) will guide users on how to recreate this bug along with the video (below).

Screenshots, screen recording, code snippet

Proposed actionable items to address this issue

• The 'Back' button should receive the first focus when entering into the Font Variant Overview. This would allow the user to go back immediately and skip over the variant list altogether.
• After the 'Back' button is focused the variant checkboxes will receive focus.
• The variant checkboxes should behave a checkboxes and allow the use of the Space Bar to toggle each on/off.

Environment info

• OS: macOS 13.5.2
• Browser: Firefox 117.0
• PHP: 8.1.22
• WordPress: 6.3.1
• Theme: twentytwentythree v1.2
• Active Plugins: Gutenberg build from this PR Font Library: Frontend [Stage 1] #53884

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