Improve labels on `textarea` inputs within VRA drawers

[aviannamiller]

Currently, textarea inputs within drawers use aria-label="Content" for their accessible names. It would be a vast improvement to screen reader announcements to instead describe these fields more specifically according to their corresponding onscreen labels (like in the example below, "Author").

[kimisgold]

These textareas sit within groups labeled by the property headings, which I think we've been okay with in other plugins. Here's a related discussion for Contribution. I'm open to the possibility that this needs more detailed labeling than that, but want to make sure I understand why.

[aviannamiller]

Absolutely. I'm thinking it's a matter of that aria-label overriding some of those group relation announcements that you would otherwise get in a similar implementation. When I test with NVDA, JAWS, TalkBack, and VoiceOver on mobile, I am only encountering an announcement akin to "edit text, Content"; this is the case whether I tab forwards or backwards through the drawers. The same is true for forward tab navigation with VoiceOver on desktop, but navigating backwards (shift+tab) does then reveal that grouping (as "Content, edit text, Notes, group").

From there, though, would a direct link still need to be established between drawer name, as label, and textarea?

[kimisgold]

So I found that the role="group" and associated label were placed on the wrong container for one of the commonly used drawer markup blocks. They've been moved to the appropriate container. Can you check to see if that addresses what you're seeing?

[aviannamiller]

Structurally, things look good in the accessibility tree, but I am not experiencing anything different with screen reader announcements (across all tested screen readers). It does appear that the aria-label is the only component recognized within/as the accessible name for each textarea.

Just for the sake of comparison, the inputs (as well as the remove/undo buttons) on Contribution's drawers do reference their associated drawer names in their announcements, though those elements look to be nested under those .drawer-name elements. I'm not sure how much of a difference that makes, though?