Improve accesibility for Manage theme fonts page

[kishanjasani]

Issue: #230

• [x] The expand/collapse icon on each font family heading is missing a label. I think we should add a label based on these best practices. -> Add aria-expands: true/false based on the user action, Also added aria-label to the button and aria-hidden: true for icon.

• [x] It would be good to add the name of the font family in each remove button, so it's clear which font family they are linked to. For example, add an aria-label with the contents, "Remove DM Sans font family". -> Add aria-label for button and aria-hidden: true for icon.

• [x] Similar to above, it would be good to add an aria-label to the font face buttons too. -> Similarlly, Adds aria-label for button and aria-hidden: true for icon.

• [ ] The tab order of the font size range control is reversed because the flex-direction is set to row-reverse. This is probably because the RangeControl component only allows for the input to be shown on the right, and in this case, it works better on the left. I'm not sure what's possible here but thought it was worth mentioning. Maybe we could look into changing the tab order somehow.

All checked item has been improved, the last one is pending. Last item needs discussion, how we can improve that? Needs you opinion.

[kishanjasani]

@mikachan I think we need to create another PR for it. there are many changes in the font page.

[mikachan]

I think we need to create another PR for it. there are many changes in the font page.

Yeah that's true, it's probably easier to handle the changes in a new PR 👍

[vcanales]

Thanks for your contribution! Font management is being handled by core now, so we're working towards removing it from the plugin on the next release.