1936663 - New/edit profile page - 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 new/edit profile page, except for the radio group suggestion split out into bug 1936665.

Figma annotations extracted to a screenshot 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. Avatar image

• Type: Note
• Name: "${avatar_name} icon"
• Role: graphic

2. Page title

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

3. Page subtitle

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

4. Learn more link

• Type: Tab Navigation
• Name: Learn more
• Role: Link
• Note: this link should open a new page

5. Profile name section label

• Type: Note
• Role: Label
• Note: it might make more sense to make this an H2 to fit with the theme and avatar picker sections in the same document.

6. Profile name text field

• Type: tab navigation
• Role: text field
• Note: this text box has the 'autofocus' attribute (should be focused on page load)

7. Theme subheading

• Type: Note
• Role: group
• The subheading text should be an H2

8. Theme picker (to be implemented separately in bug 1936665, included here for completeness)

• Type: tab navigation
• Role: radio button
• Note: Each theme option (Light, Marigold, Lichen, Magnolia, Lavender, Dark, Ocean, Terracotta, Moss, System) should be focusable and navigable, typically left to right, top to bottom. Selection should be indicated with aria-selected. It should be navigable with arrow keys.
  Individual Theme Buttons should have aria-label="${profile_name} theme".

9. Explore more themes link

• Type: tab navigation
• Role: Link
• Note: The "Explore more themes" link should come after the theme options. This is not a radio button, and is outside of the Theme group

10. Avatar subheading

• Type: Note
• Role: group
• The subheading text should be an H2

11. Avatar picker (to be implemented separately in bug 1936665, included here for completeness)

• Type: tab navigation
• Role: radio button
• Note: These should navigable in the order they appear (left to right).
  Selection should be indicated with aria-selected
  It should be navigable with arrow keys
  Individual Avatar Buttons should have aria-label="${profile_name} avatar".

12. Delete button

• Type: tab navigation
• Role: button

13. Done Editing button

• Type: tab navigation
• Role: button

Comment 1

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

Attachment: annotations overview

Comment 2

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

Attachment: guide to annotation colored label meanings

Comment 3

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

Attachment: close-up of annotation labels applied to page content

Comment 4

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

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

Comment 5

[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 6

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

I think we are good to close this issue.

It looks like the main gaps vs. the accessibility annotations are the big avatar image missing a label, which is fixed by bug 1936670, and the need for the avatar and theme selectors to have radio-like behavior, which is captured in bug 1934866 and bug 1934860, respectively.