1666636 - Clickable "step" indicators for multistage about:welcome: a11y implementation

Status: RESOLVED WONTFIX

(Firefox :: Messaging System, enhancement, P1)

Description

[Emily McMinn :emcminn]

+++ This bug was initially created as a clone of Bug #1661784 +++

As well as indicating what page of the onboarding process we're on, we should be able to navigate back and forth by clicking the "step" markers.

N.B.: We should be careful not to break accessibility when implementing this; the indicators need to be keyboard accessible and should announce their interactive status to screen readers. ETA Some of this work (list structure with buttons) was done in 1661784. The focus here is to land strings to be localized that can be used as descriptive labels for each button, and adjust the aria properties of the buttons to use them correctly.

---

We can address accessibility in this bug now that the basic implementation is done. The step indicators are clickable and keyboard accessible (Tab + enter or space), but they need to be seen by screen readers.

Per @Jteh:

Ideally, I'd like to see something like this (where ARIA is acceptable in place of native HTMl):
<nav>
<ol>
<li><button aria-current="step">Getting Started</button></li>
<li><button>Import</button></li>
<li><button>Choose a look</button></li>
</ol>
</nav>

1. This does require that each screen has a label. I'm not sure if that's feasible or not.
2. Note that aria-current="step" should be moved to whichever indicator is associated with the current screen.
3. <ol> generates visible numbers, and if you style those away, they'll also disappear for a11y. You may need to do something like <ul><li><button>3. Choose a look</button></li></ul>
4. You can use aria-label for buttons (HTML or ARIA) without text content, as long as they have a width and height > 0.

Comment 1

[Emily McMinn :emcminn]

We're closing this and 1661784 as WONTFIX for now; the work has turned up several regressions and fixing them will require some significant refactoring. It's been decided the step indicators for multistage about:welcome will remain a visual element only for now.