Repository navigation
fix(avatar): Hide decorative fallback initials from assistive technology - #4188
Conversation
|
Important Review skippedReview was skipped as selected files did not have any reviewable changes.
 |
| 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:
Estimated code review effort: 2 (Simple) | ~10 minutes
Change: Bug fix · Severity of issue fixed: Low
Suggested reviewers: mannycarrera4
Merge Risk: 
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
9ce4dThe 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 #4188satisfies the coding requirement in issue#4009.modules/react/avatar/lib/Avatar.tsxappliesaria-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.
Comment @coderabbitai help to get the list of available commands.
Workday/canvas-kit
 |
||||||||||||||||||||||||||||||||||||||||
| Project |
Workday/canvas-kit
|
| Branch Review |
fix/avatar-decorative-initials
|
| Run status |
|
| Run duration | 02m 44s |
| Commit |
|
| Committer | Minwook Shin |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
 |
0
|
 |
0
|
 |
17
|
 |
0
|
 |
917
|
| View all changes introduced in this branch ↗︎ | |
UI Coverage
14.36%
|
|
|---|---|
|
|
2557
|
|
|
426
|
Accessibility
99.22%
|
|
|---|---|
|
|
4 critical
5 serious
3 moderate
2 minor
|
|
|
75
|
|
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? |
Summary
Fixes #4009.
Hide fallback initials from assistive technology when
Avataris 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
ready for reviewhas been added to PRFor the Reviewer
Where Should the Reviewer Start?
modules/react/avatar/lib/Avatar.tsx: the fallback name now receivesaria-hiddenfromisDecorative.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