fix(avatar): Hide decorative fallback initials from assistive technology by minwookshin · Pull Request #4188 · Workday/canvas-kit

minwookshin · 2026-10-01T22:06:59Z

Summary

Hide fallback initials from assistive technology when Avatar is decorative, including while an image loads or fails. Add a no-image example beside the user's name and document the behavior.

Release Category

Components

Checklist

MDX documentation adheres to Canvas Kit's Documentation Guidelines
Label ready for review has been added to PR

For the Reviewer

PR title is short and descriptive
PR summary describes the change
PR Release Notes are included or removed if not applicable
Breaking Changes are included or removed if not applicable

Where Should the Reviewer Start?

modules/react/avatar/lib/Avatar.tsx: the fallback name now receives aria-hidden from isDecorative.

Testing Manually

Open Avatar → Decorative Initials in Storybook. The initials remain visible, while the adjacent name is the accessible text. Compare with the non-decorative avatar and the image example.

Validation: 4,168 unit/SSR tests passed; Avatar Cypress component tests passed (4, including axe); lint and spec, Cypress, and Storybook type checks passed.

Summary by CodeRabbit

Accessibility
- Decorative avatars now hide both images and fallback initials from assistive technology, while keeping them visible on screen.
- Added guidance and an example for using a decorative avatar beside a person’s name.
Tests
- Expanded accessibility checks for decorative initials and avatar image states.

coderabbitai · 2026-10-01T22:07:14Z

Important

Review skipped

Review was skipped as selected files did not have any reviewable changes.

⚙️ Run configuration

Configuration used: Repository: Workday/canvas-kit/.coderabbit.yaml
Review profile: CHILL
Plan: Advanced
Run ID: 90e76519-f2dd-470b-a4ba-d76340836267

📥 Commits

Reviewing files that changed from the base of the PR and between 44ed96b and b157809.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository: Workday/canvas-kit/.coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: 700122c2-39df-403f-a5fb-e10592b05448

📥 Commits

Reviewing files that changed from the base of the PR and between 431b7a4 and 9ce4ddd.

📒 Files selected for processing (6)

cypress/component/Avatar.spec.tsx
modules/react/avatar/lib/Avatar.tsx
modules/react/avatar/spec/Avatar.spec.tsx
modules/react/avatar/stories/Avatar.mdx
modules/react/avatar/stories/Avatar.stories.ts
modules/react/avatar/stories/examples/DecorativeInitials.tsx

Included review availability: This review used your included allowance. Your plan provides up to 2 included reviews per hour; 1 remain after this review.

📝 Walkthrough

When isDecorative is true, Avatar fallback initials are now hidden from assistive technology. Component tests and a Storybook example cover the behavior.

Changes: Decorative Avatar accessibility

Layer / File(s)	Summary
Hide fallback initials from assistive technology `modules/react/avatar/lib/Avatar.tsx`, `modules/react/avatar/spec/Avatar.spec.tsx`	The fallback name receives `aria-hidden={isDecorative}`. Tests cover decorative settings, custom initials, and image load and error behavior.
Document and verify the decorative Avatar example `modules/react/avatar/stories/examples/DecorativeInitials.tsx`, `modules/react/avatar/stories/Avatar.stories.ts`, `modules/react/avatar/stories/Avatar.mdx`, `cypress/component/Avatar.spec.tsx`	A Storybook example places a decorative Avatar beside a name. Documentation describes the behavior, and Cypress checks visibility and accessibility attributes.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Bug fix · Severity of issue fixed: Low

Suggested reviewers: mannycarrera4

Merge Risk: ⚪ Minimal · up to 9ce4d

Decorative avatars hide redundant initials from assistive technology while the adjacent name remains accessible. No actionable merge-blocking risk remains; merge after normal checks.

Security Architecture Review

Security architecture risk: ⚪ Minimal · up to 9ce4d

The change is limited to accessibility behavior and its documentation example. It does not introduce a new input path, resource-loading capability, privilege, or security boundary. No material security risk introduced or worsened by this change was identified.

Retained concerns
No architecture-level concerns identified.

Security review details

Security Blast Radius

inferred — The evidenced behavioral exposure is to consumers of decorative Avatar fallback content. The production delta changes assistive-technology semantics rather than increasing resource reachability or authority, and the new story supplies fixed demonstration data.

Trust Boundaries and Controls

inferred — Caller-controlled names and image URLs continue through the existing Avatar-to-BaseAvatar rendering boundary. The changed fallback attribute does not add a sink, alter URL selection, or replace an identity or security check; the underlying delegated implementations were not independently hydrated.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main change: hiding decorative fallback initials from assistive technology.
Linked Issues check	✅ Passed	PR `#4188` satisfies the coding requirement in issue `#4009`. `modules/react/avatar/lib/Avatar.tsx` applies `aria-hidden={isDecorative}` to fallback initials, in addition to the image. This hides initials…
Out of Scope Changes check	✅ Passed	The changes stay within issue `#4009`. The Avatar implementation and tests address decorative fallback accessibility. The Storybook example, story registration, and documentation explain and demonstrate…
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 5…

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create a new PR

Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Autopilot is currently an internal CodeRabbit preview.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

cypress · 2026-10-12T18:10:30Z

Workday/canvas-kit Run #11745

Run Properties: Passed #11745 • 79c1273d18 ℹ️: Merge b157809f6d36f9cff7472ccf590e9992d73d886b into dd5a27ab062642ac115722808e06...

Project	`Workday/canvas-kit`
Branch Review	`fix/avatar-decorative-initials`
Run status	`Passed #11745`
Run duration	`02m 49s`
Commit	`79c1273d18 ℹ️: Merge b157809f6d36f9cff7472ccf590e9992d73d886b into dd5a27ab062642ac115722808e06...`
Committer	`Minwook Shin`
View all properties for this run ↗︎

Test results
Failures	`0`
Flaky	`0`
Pending	`17`
Skipped	`0`
Passing	`873`
View all changes introduced in this branch ↗︎

UI Coverage `19.37%`
Untested elements	`1634`
Tested elements	`390`

Accessibility `99.18%`
Failed rules	`4 critical` `5 serious` `3 moderate` `2 minor`
Failed elements	`75`

minwookshin · 2026-10-21T01:54:58Z

The remaining CI failure is a Yarn registry 502 while installing dependencies, before the integration tests start. Could you rerun the failed job when you have a chance?

fix(avatar): hide decorative fallback initials from assistive technology

9ce4ddd

minwookshin requested a review from a team as a code owner October 1, 2026 22:07

Merge branch 'master' into fix/avatar-decorative-initials

8762fe9

mannycarrera4 added 2 commits October 13, 2026 11:22

Merge branch 'master' into fix/avatar-decorative-initials

44ed96b

Merge branch 'master' into fix/avatar-decorative-initials

b157809

mannycarrera4 approved these changes Oct 16, 2026

View reviewed changes

mannycarrera4 added the automerge label Oct 16, 2026

alanbsmith enabled auto-merge (squash) October 16, 2026 15:00

Navigation Menu

Repository navigation

fix(avatar): Hide decorative fallback initials from assistive technology - #4188

fix(avatar): Hide decorative fallback initials from assistive technology#4188
minwookshin wants to merge 4 commits into
Workday:masterfrom
minwookshin:fix/avatar-decorative-initials

minwookshin commented Oct 1, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Oct 1, 2026 •

edited

Loading

Review skipped

Uh oh!

cypress Bot commented Oct 12, 2026 •

edited

Loading

Uh oh!

minwookshin commented Oct 21, 2026

Uh oh!

This branch has not been deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

minwookshin commented Oct 1, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Release Category

Checklist

For the Reviewer

Where Should the Reviewer Start?

Testing Manually

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Oct 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

cypress Bot commented Oct 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Workday/canvas-kit Run #11745

Uh oh!

minwookshin commented Oct 21, 2026

Uh oh!

This branch has not been deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

minwookshin commented Oct 1, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Oct 1, 2026 •

edited

Loading

cypress Bot commented Oct 12, 2026 •

edited

Loading