1936669 - Profile selector window - Audit and fix a11y properties

Status: RESOLVED FIXED

(Toolkit :: Startup and Profile System, defect, P2)

Description

[Jared Hirsch [:jhirsch] (he/him) (Needinfo please)]

Audit and fix: focus order, tab order, roles, and labels as spec'd for the profile selector window.

Figma annotations extracted to screenshots and copied out here for reference:

---

Entry types for the list below:

Type: Presentational
(Mobile and Desktop) Used for decorative elements that should be ignored by screen readers.

Type: Note
(Mobile) Used for all annotations
(Desktop) Used for non-interactive components and landmarks

Type: Arrow key navigation
(Desktop only) For interactive elements that can be reached by using the arrow keys (usually within a component reached through the tab key)

Type: Tab navigation
(Desktop only) For interactive elements that can be reached by using the tab-key.

---

Focus order:

1. Firefox logo

• Type: Presentational
• Name: "${browser_name} logo"
• Role: Presentation

2. Page title ("Choose a Firefox profile")

• Type: Note
• Name: [use on-screen string]
• Role: Heading 1

3. Page description ("Keep your work and personal browsing...")

• Type: Note
• Name: [use on-screen string]
• Role: paragraph

4. Learn more link

• Type: tab navigation
• Name: Learn more
• Role: Link
• Note: Provides additional information about Firefox profiles.

5. Profile card group

Note: at this point the focus order annotations pass into a single profile card, however there is no annotation about making the card picker behave like a radio group, that is, supporting directional arrow behavior and indicating that exactly one choice should be made. We might want to follow up on this with the a11y eng team.

For now I'll assume that the set of profile cards and the "create a new profile" card should be treated as some sort of group. We'll finish out the focus order for the page, then go through what should be focusable/tabbable in each profile card in the group.

6. Choose a profile when Firefox opens

• Type: tab navigation
• Name: Choose a profile when Firefox opens
• Role: Checkbox
• Note: Toggles the setting to show the profile selector screen when Firefox opens.

---

Now, considering the focus order within one profile card in detail:

Note the avatar image is not annotated, so it shouldn't be exposed to screen readers.

1. (Profile card itself)

• Type: tab navigation
• Name: Launch [profile name]
• Role: Button
• Note: Launches the selected profile in a new Firefox instance.

2. Profile name

• Type: Note
• Name: [use on-screen string]
• Role: Text

3. Edit button

• Name: Edit
• Type: tab navigation
• Role: Button
• Note: Launches the selected profile in a new Firefox instance and takes user to the profile edit page.

4. Delete button

• Name: Delete
• Type: tab navigation
• Role: Button
• Note: Launches the selected profile in a new Firefox instance and takes user to the profile delete confirmation page.

Comment 1

[Jared Hirsch [:jhirsch] (he/him) (Needinfo please)]

Attachment: annotations overview

Comment 2

[Jared Hirsch [:jhirsch] (he/him) (Needinfo please)]

Attachment: close-up of annotation labels applied to profile selector window

Comment 3

[Jared Hirsch [:jhirsch] (he/him) (Needinfo please)]

Attachment: close-up of annotation labels applied to a single profile card

Comment 4

[Jared Hirsch [:jhirsch] (he/him) (Needinfo please)]

Attachment: legend describing colored annotations

Comment 5

[Jared Hirsch [:jhirsch] (he/him) (Needinfo please)]

Mass setting S2 severity for 0.5% release bugs. Apologies for the bug spam!

Comment 6

[Jared Hirsch [:jhirsch] (he/him) (Needinfo please)]

Note - there is a thorough guide to these annotations: https://acorn.firefox.com/latest/resources/designer/a11y-figma-annotations-KFdQgdPq

Comment 7

[Jared Hirsch [:jhirsch] (he/him) (Needinfo please)]

Happily, the profile selector window seems correct except for one minor missing label on the logo image. Opening a patch for that now.

Comment 8

[Jared Hirsch [:jhirsch] (he/him) (Needinfo please)]

Attachment: Bug 1936669 - Add missing l10n ID to logo image on profile selector window. r?#profiles-reviewers

This was a bug to audit the profile selector window and verify
the a11y annotations are all correct, but this was the only issue.

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/8c96f114703a
Add missing l10n ID to logo image on profile selector window. r=profiles-reviewers,fluent-reviewers,flod,cmkm

Comment 10

[Serban Stanca [:SerbanS]]

https://hg.mozilla.org/mozilla-central/rev/8c96f114703a