[gatsby-site] Accessibility issues in rotating plugin feature

[marcysutton]

Description

I didn't get a chance to review the plugin tagline rotator PRs before they were merged, so I went through the feature today and here's what I found!

The nav arrow buttons are real button elements with labels, which is so appreciated. I love how you used matchMedia to lean on prefers-reduced-motion for animating based on user a preference! It also announces the changed tagline when you interact with the buttons, since focus is kept in the same place when you click. Great job!

Here are some things we can make even better:

Reduced motion

The user's preference for reduced motion isn't being applied to CSS transitions, only the auto-rotating of taglines. You could use matchMedia here again to set a CSS class that turns off the transitions. Or use the CSS media query? I haven't seen that done in a CSS-in-JS context yet where everything is inline, so I'd be curious to see how you handle that.

Screen reader announcements

There's an aria-live attribute changing between polite and off on the dynamic part of the tagline ("SEO?" "Wordpress Integration?"). It would be cool to announce the whole sentence, like "Need SEO? There's a plugin for that." Perhaps the attribute could be moved higher in the DOM to announce more of it, and we could add aria-atomic="true" and aria-relevant="all", and then test some more.

I think not announcing the auto-rotating carousel in assistive technology was a good decision, even if the sighted experience is different. Auto-rotating announcements are usually a bad idea because they get so distracting, and there's no obvious way to turn them off. So good job 👍

You can test this by turning on Voiceover with Command + F5 and listening to the page on load (no rotating announcements), clicking the arrow buttons, and then you'll hear the tagline announcements.

Rotator navigation

For the previous/next buttons, it would help to include more descriptive text (previous what?). We could try something like "previous plugin category", "next plugin category"? Is there anything closer to describing that feature?

Random idea: could the rotator scroll with arrow keys? That is totally a bell and whistle, so feel free to ignore :)

---

I can tackle some of these things unless someone beats me to them; I mainly wanted to capture these while they were fresh in my mind!

There are also some things to fix on the plugin pages overall, and some things to fix with the skip link and page routing. But I'll open separate issues for those to limit the scope here.