Font Library: Focus loss when disabling buttons on the fly

Description

WIthin the Fonts modal dialog, a few buttons get a HTML disaled attribute on the fly after they are activated. As such, they become not focusable.

While this doesn't impact mouse users, it triggers a focus loss for all keyboard users.

This is the main reason why long time ago we stablished a pattern for such buttons in the editor which follows the pattern suggested in the ARIA Authoring Practices Guidelins:

https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/ Developing a Keyboard Interface Focusability of disabled controls

Use aria-disabled instead.
noop the button.

See also ongoing discussion on https://github.com/WordPress/gutenberg/issues/56547.

Turns out the buttons within the Fonts modal dialog don't follow this best practice. As such, they're one more case in the editor of buttons disabled on the fly that trigger a focus loss. Cc @ciampo

Worth reminding focus losses are a terrible experience for keyboard users and assistive technology users.

In this specific case, the focus loss is even more serious, as focus lands outside of the modal dialog which is something that should never, ever, happen.

The Animated GIF screencapture below illustrates one of these cases. It happens with other buttons as well so they should all be fixed.

focus loss

Step-by-step reproduction instructions

Go to Site editor > Styles > Typography > Manage fonts.
Click one of the installed Theme fonts e.g. 'Cardo' or 'Inter' with Twenty Twenty-Four as active theme.
Uncheck the font checkbox.
Use the keyboard and move focus to the 'Update' button at the bottom of the modal dialog.
Press Enter and wait your change is saved.
Press the Tab key.
Observe focus was lost and now the tab order starts from scratch from the document root.
Observe focus is now on the 'Toggle navigation' button at the top left of the screen, outside the modal dialog.

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

WordPress / gutenberg