Description

When formatting text with items such as Code, Superscript, Subscript, etc, there is now an alert for screen readers to announce that the formatting has been added/removed. I also added this for Bold, Italics, and Underline. However, the alert will only be fired on shortcut key, not button click. Double feedback isn't really needed due to aria-pressed="true".

The only item not modified is text-color/Highlight. That needs it's own set of accessibility enhancements and I will do this in another PR.

I also added description text to the More menu and added role="menuitemcheckbox" that way users can tell if an item is enabled or disabled. I kept the alerts here as the More menu closes before checked/unchecked state is read. There is a similar issue for the Alignment Control which I may attempt to fix later.

How to test

Test 1

For this test, you will hear that formatting is applied/removed while using the keyboard.

1. Open the Gutenberg editor.
2. Navigate to a block or add a fresh block.
3. Select some text. For this example, I selected some text within a Paragraph block by holding down Shift+Right Arrow until I captured my selection.
4. Toggle Bold with CTRL+B and you should hear "Bold applied."
5. Remove Bold with CTRL+B and you should hear "Bold removed."
6. Try this out with other formatting shortcuts.

Test 2

In this test, you will explore the block formatting toolbar.

1. Open the Gutenberg editor.
2. Navigate to a block or add a fresh block.
3. Select some text. For this example, I selected some text within a Paragraph block by holding down Shift+Right Arrow until I captured my selection.
4. Press Shift+Tab to focus the Block Toolbar.
5. Press Right Arrow until you hear More. I added some description text to this button, so you should hear "More, Displays more block tools" with NVDA or JAWS. With Voiceover, you should hear "More, this item contains help tag." Of course, what you hear depends on the verbosity setting of the screen reader.
6. Open the More menu by pressing Enter.
7. Notice how the menu items that toggle formatting such as Highlight or Inline Code are now checkboxes that way you can hear the current state of the item and if it is applied to the content you have selected.
8. Try selecting Inline Code. You should hear "Inline Code applied" and the More menu should close. Focus should be placed back on the selected text within the block you are currently editing.
9. Press Shift+Tab to enter the Block Toolbar.
10. Navigate via Right Arrow to the More menu and open it with Enter.
11. Notice how Inline Code currently says "Inline Code, checked" as the formatting option is currently applied.
12. If you select Inline Code again to remove the formatting, you should hear "Inline Code removed" and focus should be placed back on the selected text within the block you are currently editing.

How has this been tested?

I tested using NVDA in Firefox. I checked to see which code called the function I modified and ensured params were updated.

Screenshots

Types of changes

This is a new feature.

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).