FontSizePicker accessibility issues

[talldan]

Description

#27594 was recently merged. The new components are behind a flag and won't ship to core, but I noticed a few accessibility issues that will need to be resolved.

• The font size select doesn’t announce whether it’s collapsed or not when focused
• When opened, the font size picker relays the incorrect amount of items
• The reset button is skipped in tab order when typing in a custom font size for the first time, as it only becomes enabled when focus leaves the input

I haven't tested using NVDA, would be good to get someone with good experience of accessibility testing to do a more thorough test.

Step-by-step reproduction instructions

With Voiceover active

1. Add a paragraph block
2. Navigate to the Block Inspector
3. Tab to the Font Size Picker dropdown
4. Note that the collapsed/expanded state wasn't read by VO
5. Open the Font Size Picker dropdown
6. Note that the number of items read by VO is incorrect, and the first focused item seems to have an index of 2
7. Press escape to dismiss the dropdown and tab to the Custom Font Size input
8. Enter a value, tab to the reset button
9. Note that the reset button was bypassed in the tab order.

WordPress information

• WordPress version: 5.6
• Gutenberg version: 9.8
• Are all plugins except Gutenberg deactivated? Y
• Are you using a default theme (e.g. Twenty Twenty-One)? Y (2021)

Device information

• Device: Desktop
• Operating system: Mac OS
• Browser: Safari with Voiceover

[ItsJonQ]

@talldan Haiii! I created a PR for this earlier today :)

Would you be able to see if this helps?
#28408

[diegohaz]

Tested with NVDA and JAWS. I could reproduce the same behaviors, except that they announce the correct number of items (1 of 7).

[talldan]

Outdated, the component is quite different today.