[dschom]

Because

• The five shared pairing illustrations landed in feat(settings): add shared pairing illustrations #20979 with placeholder labels and a TODO, pending an a11y decision.
• Per the a11y guidance on the ticket, an illustration whose card states the same thing in text is presentational under WCAG 1.1.1.

This pull request

• Renders the five pairing illustrations aria-hidden rather than labelling them with empty strings.
• Replaces the aria-label test's exclusion regex with a named decorative list, covering both the hidden and the labelled images.
• Corrects seven Pair2 page tests whose names and comments described the illustrations as exposed.

Issue that this pull request solves

Closes: FXA-14337

Checklist

Put an x in the boxes that apply

• My commit is GPG signed.
• If applicable, I have modified or added tests which pass locally.
• I have added necessary documentation (if appropriate).
• I have verified that my changes render correctly in RTL (if appropriate).
• I have manually reviewed all AI generated code.

How to review (Optional)

• Key files/areas to focus on: packages/fxa-settings/src/components/images/ — index.tsx and index.test.tsx. The other seven files change test names and comments only.
• Suggested review order: the two components/images files, then the Pair2 page tests.
• Risky or complex parts: none. Rendered DOM is unchanged — the empty-string labels already resolved to the same aria-hidden branch of PreparedImage.

Screenshots (Optional)

Please attach the screenshots of the changes made in case of change in user interface.

Other information (Optional)

• The audit found adequate surrounding context for all five illustrations, so the list of "images that need aria labels" the ticket asks for is empty, and no new FTL strings were needed.
• SyncDevicesImage is still exposed on five Pair2 cards with a verbose label and is a candidate for the same treatment. Left alone here — it is a pre-existing translated string.

[Copilot]

🟢 Approval recommended

The implementation preserves existing rendering while making decorative-image intent explicit and adequately tested.

Pull request overview

Marks five Pair2 illustrations as decorative while retaining accessible labels for meaningful images and QR codes.

Changes:

• Forces shared Pair2 illustrations into aria-hidden rendering.
• Adds explicit coverage for decorative and labelled image exports.
• Updates Pair2 accessibility test descriptions and expectations.

File summaries

File	Description
components/images/index.tsx	Marks five pairing illustrations decorative.
components/images/index.test.tsx	Tests decorative and labelled image groups.
Pair2/Supplicant/TimeoutAndCancel/index.test.tsx	Clarifies accessibility expectation.
Pair2/Supplicant/SyncSuccess/index.test.tsx	Clarifies accessibility expectation.
Pair2/Supplicant/ReadyToScan/index.test.tsx	Clarifies accessibility expectation.
Pair2/Authority/TimeoutAndCancel/index.test.tsx	Clarifies accessibility expectation.
Pair2/Authority/SyncSuccess/index.test.tsx	Clarifies accessibility expectation.
Pair2/Authority/ScanQR/index.test.tsx	Distinguishes QR labeling from decorative artwork.
Pair2/Authority/ContinueOnMobile/index.test.tsx	Clarifies accessibility expectation.

Review details

• Files reviewed: 9/9 changed files
• Comments generated: 0
• Review effort level: Balanced

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[vbudhram]

@dschom Seems reasonable, low risk too

[LZoog]

an illustration whose card states the same thing in text

FWIW, I don't think that's what these images are doing, and there's a "user delight" angle and big screen real estate and low vision user argument. However, these are easy enough for us to add back later and it's really up to the accessibility team based on the page context. I've sent Laurel a message and if she gives the thumbs up I'm good to r+.

[dschom]

an illustration whose card states the same thing in text

FWIW, I don't think that's what these images are doing, and there's a "user delight" angle and big screen real estate and low vision user argument. However, these are easy enough for us to add back later and it's really up to the accessibility team based on the page context. I've sent Laurel a message and if she gives the thumbs up I'm good to r+.

@LZoog I won't land until you r+

[LZoog]

I'm r+'ing since you're right that it's better to have aria-hidden=true on these instead of an empty aria-label, because that'll make it read more consistently across OS/screen readers. VO on Mac skips these but it's possible another could read these as "image" with nothing else.

I think it's worth filing a follow up to have the accessibility folks look at all of our pages with images similar to this for a more official recommendation on what makes sense for user delight / low sighted users. I'm betting they'll say most should be hidden but some deserve some text. This might also be better as a Zoom call with someone on their side so we can show them Storybook pages, or something like that, but either way, I know that's low priority and we can do it at any point later. 👍

[LZoog]

Just a nit pick but I think the wording in another comment, "already carry their meaning in text" is more accurate than, "Every card that renders one states the same thing in its heading and body copy." As written it just makes me think of an image with text in it that "states the same thing" but eh.