Fix the '+(xx) others' link losing focus after activation

[matthillco]

What/Why

From Trello:
When using the ‘+ 12 others’ link with JAWS, the focus is lost. Using the tab key gets you to the first inserted link. But when navigating ‘in context’, using arrow keys to read through the page, the focus for JAWS users gets moved back to the start of the page which causes them to lose their place.

More info

This was reported as an issue in JAWS. After testing, I also observed this as a problem in other screen-readers. However, this issue was potentially a problem for all users as it did not focus a relevant element after activation. It would be confusing for non-screen-reader users who use the keyboard to navigate.

The behaviour has now changed:

• Anchor element is replaced with a button for improved accessibility
• After activation, focus the first link in the now-visible dropdown

Styling modified:

• Button inherits parent styles to appear like a link
• Text size increased to 16px to match surrounding elements

I've tested this extensively in Assistiv Labs using JAWS, NVDA and Talkback and the behaviour now seems consistent:

• Use tab or up/down arrows to move through elements in screen reader view
• When the +XX others text is focused, user activates it with enter or space
• Other languages are displayed and the +XX others text is removed
• The first language in the revealed list now has focus

⚠️ This repo is Continuously Deployed: make sure you follow the guidance ⚠️

Follow these steps if you are doing a Rails upgrade.

[AshGDS]

Looks good, but I have a couple questions

• The button disappears when the content is expanded - is this correct? Could this confuse users into not knowing if the button has been expanded, as it no longer exists after interacting with it?
• Should the button have an aria-controls on it as well, like our accordion component does?

[matthillco]

@AshGDS, thanks for the comments

• The button disappears when the content is expanded - is this correct? Could this confuse users into not knowing if the button has been expanded, as it no longer exists after interacting with it?

I agree, it's a strange pattern. However, the requirement for this work is just to fix a problem with lost focus once the button is removed. As there is a task on the Trello card to review this pattern for a refactor, I think it's best not to confuse the issue as part of this work.

• Should the button have an aria-controls on it as well, like our accordion component does?

I'm not sure. My accessibility knowledge on that is not extensive, but reading up on aria-controls suggests that usage is optional. There's certainly no harm adding it though, thanks.

[matthillco]

@AshGDS I've added aria-controls as you suggested, thanks.

[AshGDS]

Thanks - a small change needed but looking good