Progress indicator navigation not reachable by keyboard

[kirsty-hames]

The following is feedback from an external accessibility audit:

Background: All controls reachable with a mouse or pointing device must also be accessible to users who rely on keyboard-only navigation, including screen reader users.

Current behaviour: The narrative carousel component provides two ways to navigate between slides – the “next/previous” arrow keys, and a series of dots at the bottom of each slide where users can skip directly to a specific slide. These are not in the tab index and so cannot be reached with keyboard navigation.

To replicate: Using keyboard navigation, move through this component and observe the focus position.

Expected behaviour: Keyboard users should be able to navigate to these controls using the tab key. They should also be properly labelled to allow their use by screen reader users.

Recommended Fix: Apply the role of button to these controls and ensure that they are correctly labelled and included in the tab index. Keyboard handling should also be set so that they can be activated with both the space and enter keys, and the currently selected slide should be set programmatically as well as visually.

[kirsty-hames]

I think the progress indicators were purposefully removed from the tab order as having two ways to navigate a component being more confusing. Alternative to the recommendation above, would it be better if the progress indicators were used for progress status only and not be clickable as this isn't inclusive to all users?

[guywillis]

Makes sense to me to remove the functionality of the progress dots and leave them as visual indicators.

[swashbuck]

Will be included in PR #250

[swashbuck]

In addition to removing the click functionality, should narrative__slide-indicators be using aria-hidden="true" as well?

[swashbuck]

Ready for review in #250

[kirsty-hames]

In addition to removing the click functionality, should narrative__slide-indicators be using aria-hidden="true" as well?

Seeing as there's no readable content within the narrative__slide-indicators I don't think we need to apply aria-hidden="true". I haven't had any issues with these being identified by a screen reader when testing.

[kirsty-hames]

I can confirm this has been fixed by #250 and adaptlearning/adapt-contrib-vanilla#399
Tested: desktop browsers (Mac Safari, Chrome and FF), iPhone and Android tablet.