Make font size dropdown more accessible.

[alexstine]

Description

The overall change in this pull request will allow screen readers to see the currently selected font size without having to open the menu. This message is communicated via aria-describedby. Since the aria-label overrides the button text, I had to provide a way for screen readers to see the currently selected font size value.

How has this been tested?

I tested this using NVDA, JAWS, and Voiceover. Browsers used include Firefox, Google Chrome, and Safari.

Screenshots

Types of changes

I guess you could consider this a Bug fix.

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

[alexstine]

I believe this is mostly ready for review. This brings a good improvement for the font size component as well as support for other components that may use this custom select box. This PR was primarily created for the font size fixes but there were a couple components involved that needed adjusting.

[jorgefilipecosta]

The code change looks good to me and works well on my tests 👍

[tellthemachines]

Tested with VoiceOver/Safari and NVDA/Firefox and this is working really well ✅

[ntsekouras]

Thanks for the contribution @alexstine !

I was wondering if we should make this built in in the CustomSelectControl component. There are other usages of this component (check font weight, etc...) and we could use the a11y enhancement for all of them. For example we could have something like:

const describedBy = `Currently selected ${ label?.toLowerCase() }: ${
	selectedItem?.name
}`;

We could even have the new describedBy prop and if not provided, use something like the above snippet. What do you think?

[carolinan]

Tested with NVDA and chrome on Windows, works well. +1 for using it in the component and solving the translation.

[alexstine]

I made a few updates to the PR.

1. I added a fallback if there was no describedBy text passed in.
2. I decided it was better to allow describedBy to have a custom message passed in. See how descriptive I was able to make font size? Ideally, developers will follow suit and avoid one size fits all. However, if nothing is provided, number 1 takes care of that now.
3. I added sprintf, translation, and translation comments.

Please let me know if an issue is spotted.

@ntsekouras Thanks for the suggestion. As you can see, I adapted your idea a bit, but I think it will work fine this way.

[ntsekouras]

Thanks for your work on this @alexstine ! Great work 💯

This just needs the fixing of the linter issue. Maybe a better name to the var as well, but I don't consider this a blocker.

[ntsekouras]

Great work here, thanks! 💯