Aria-Label: change `{title} expand` to `expand {title}`

Summary

change order of words in aria label

Basic example

https://github.com/gatsbyjs/gatsby/blob/e36d73157e5964267fbcc62ed3b2d0e2582b735e/www/src/components/sidebar/section-title.js#L169-L172

 aria-label={ 
   isExpanded 
     ? i18n._(t`collapse ${item.title}`) 
     : i18n._(t`expand ${item.title}`) 

Motivation

when there are long titles then i guess it is better when the important part comes first when the voicereader say the label.

[capndave]

Madalyn - what a great and thorough insight/explanation! I’ll make the changes you suggested to this pr and open a new one for the item.table issue with aria-label. Best, -Dave

On Tue, May 12, 2020, 2:39 PM Madalyn [e-mail] wrote:

Hi there, @muescha https://github.com/muescha and @capndave https://github.com/capndave! I really appreciate the passion for accessibility!

That said, after consulting prior art around expand/collapse functionality, including the WAI-ARIA best practices https://www.w3.org/TR/wai-aria-practices/examples/accordion/accordion.html, I’ve found that ${title} expanded/collapsed is how assistive technology interprets toggle button behavior using aria-expanded and since that is the behavior we are implementing in this component, we should be consistent with that behavior.

Upon further investigation, it looks like having expand or collapse in that string is redundant to the aria-expanded attribute, meaning that assistive technology would read “${item.title} collapse, expanded” for example.

[image: VoiceOver UI shows “{0} collapse, expanded, button”] https://user-images.githubusercontent.com/3230904/81737407-0cc47c80-9466-11ea-940d-aab0c2bacf49.png

I recommend that instead of reordering words that we remove expand’ and collapsedfrom the label entirely and letaria-expanded` denote current state itself.

Additionally, it looks like item.title isn’t properly making it into the aria-label. If you’d like to tackle that in this PR that’d be awesome but I can also open a separate issue if you’d like to leave this scoped to handling expanded state. Thank you so much for your contribution!

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/gatsbyjs/gatsby/issues/23948#issuecomment-627551062, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADTOOZP4QWTH3FNNNKHNOU3RRGQXNANCNFSM4M45IDJA .

[capndave]

I’d like to work on this if @muescha is not already working on it! I haven’t contributed to Gatsby yet so please let me know if there is a particular protocol to follow for checking out issues.