spectrum-web-components
spectrum-web-components copied to clipboard
adobe
fix(avatar): Avatar component now always includes alt attribute
Description
This PR enhances the <sp-avatar> component to improve accessibility, particularly for decorative avatars. The update introduces a new property, isdecorative, and updates the rendering and accessibility logic for avatars used purely for decoration.
Key Changes
- New Property: Adds an isdecorative boolean property to
<sp-avatar>.- When set to true:
- The img element receives aria-hidden="true" and alt="".
- The avatar is hidden from assistive technologies, following accessibility best practices for decorative images.
- When false (default), the component expects a label for accessibility.
- When set to true:
- Warning for Missing Accessibility: If neither label nor isdecorative is set, a warning is logged to the console, guiding developers to supply a label or mark the avatar as decorative.
- Story Updates: Storybook stories now include controls and an example for the isdecorative property.
- Tests: Expanded and improved test coverage to verify:
- Proper ARIA attributes for decorative and non-decorative avatars
- Console warning when accessibility requirements are not met
- Reflection of the isdecorative attribute
Motivation
Some avatars are decorative and should not be announced by screen readers. This change allows consumers of <sp-avatar> to explicitly mark avatars as decorative, ensuring correct ARIA attributes are applied and accessibility warnings are surfaced during development.
Related Links
Checklist
- [x] Added
isdecorativeproperty to<sp-avatar> - [x] Updated rendering logic for ARIA attributes
- [x] Added Storybook example and controls for
isdecorative - [x] Improved unit tests for accessibility and attribute reflection
- [x] Added warning for missing label or
isdecorative
Let me know if you want this tailored further, or if you have a specific template you’d like me to use!
Related issue(s)
- SWC-915
- fixes https://github.com/adobe/spectrum-web-components/issues/5513
Screenshots (if appropriate)
Author's checklist
- [ ] I have read the CONTRIBUTING and PULL_REQUESTS documents.
- [ ] I have reviewed at the Accessibility Practices for this feature, see: Aria Practices
- [ ] I have added automated tests to cover my changes.
- [ ] I have included a well-written changeset if my change needs to be published.
- [ ] I have included updated documentation if my change required it.
Reviewer's checklist
- [ ] Includes a Github Issue with appropriate flag or Jira ticket number without a link
- [ ] Includes thoughtfully written changeset if changes suggested include
patch,minor, ormajorfeatures - [ ] Automated tests cover all use cases and follow best practices for writing
- [ ] Validated on all supported browsers
- [ ] All VRTs are approved before the author can update Golden Hash
Manual review test cases
-
[ ] Descriptive Test Statement
- Go here
- Do this action
- Expect this result
-
[ ] Descriptive Test Statement
- Go here
- Do this action
- Expect this result
Device review
- [ ] Did it pass in Desktop?
- [ ] Did it pass in (emulated) Mobile?
- [ ] Did it pass in (emulated) iPad?
🦋 Changeset detected
Latest commit: 6f855e074cc05ad9bfc3f4078925092c92eb2849
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 84 packages
| Name | Type |
|---|---|
| @spectrum-web-components/avatar | Minor |
| @spectrum-web-components/bundle | Minor |
| documentation | Patch |
| @spectrum-web-components/eslint-plugin | Minor |
| @spectrum-web-components/accordion | Minor |
| @spectrum-web-components/action-bar | Minor |
| @spectrum-web-components/action-button | Minor |
| @spectrum-web-components/action-group | Minor |
| @spectrum-web-components/action-menu | Minor |
| @spectrum-web-components/alert-banner | Minor |
| @spectrum-web-components/alert-dialog | Minor |
| @spectrum-web-components/asset | Minor |
| @spectrum-web-components/badge | Minor |
| @spectrum-web-components/breadcrumbs | Minor |
| @spectrum-web-components/button-group | Minor |
| @spectrum-web-components/button | Minor |
| @spectrum-web-components/card | Minor |
| @spectrum-web-components/checkbox | Minor |
| @spectrum-web-components/clear-button | Minor |
| @spectrum-web-components/close-button | Minor |
| @spectrum-web-components/coachmark | Minor |
| @spectrum-web-components/color-area | Minor |
| @spectrum-web-components/color-field | Minor |
| @spectrum-web-components/color-handle | Minor |
| @spectrum-web-components/color-loupe | Minor |
| @spectrum-web-components/color-slider | Minor |
| @spectrum-web-components/color-wheel | Minor |
| @spectrum-web-components/combobox | Minor |
| @spectrum-web-components/contextual-help | Minor |
| @spectrum-web-components/dialog | Minor |
| @spectrum-web-components/divider | Minor |
| @spectrum-web-components/dropzone | Minor |
| @spectrum-web-components/field-group | Minor |
| @spectrum-web-components/field-label | Minor |
| @spectrum-web-components/help-text | Minor |
| @spectrum-web-components/icon | Minor |
| @spectrum-web-components/icons-ui | Minor |
| @spectrum-web-components/icons-workflow | Minor |
| @spectrum-web-components/icons | Minor |
| @spectrum-web-components/iconset | Minor |
| @spectrum-web-components/illustrated-message | Minor |
| @spectrum-web-components/infield-button | Minor |
| @spectrum-web-components/link | Minor |
| @spectrum-web-components/menu | Minor |
| @spectrum-web-components/meter | Minor |
| @spectrum-web-components/modal | Minor |
| @spectrum-web-components/number-field | Minor |
| @spectrum-web-components/overlay | Minor |
| @spectrum-web-components/picker-button | Minor |
| @spectrum-web-components/picker | Minor |
| @spectrum-web-components/popover | Minor |
| @spectrum-web-components/progress-bar | Minor |
| @spectrum-web-components/progress-circle | Minor |
| @spectrum-web-components/radio | Minor |
| @spectrum-web-components/search | Minor |
| @spectrum-web-components/sidenav | Minor |
| @spectrum-web-components/slider | Minor |
| @spectrum-web-components/split-view | Minor |
| @spectrum-web-components/status-light | Minor |
| @spectrum-web-components/swatch | Minor |
| @spectrum-web-components/switch | Minor |
| @spectrum-web-components/table | Minor |
| @spectrum-web-components/tabs | Minor |
| @spectrum-web-components/tags | Minor |
| @spectrum-web-components/textfield | Minor |
| @spectrum-web-components/thumbnail | Minor |
| @spectrum-web-components/toast | Minor |
| @spectrum-web-components/tooltip | Minor |
| @spectrum-web-components/top-nav | Minor |
| @spectrum-web-components/tray | Minor |
| @spectrum-web-components/underlay | Minor |
| @spectrum-web-components/custom-vars-viewer | Minor |
| @spectrum-web-components/story-decorator | Minor |
| @spectrum-web-components/vrt-compare | Minor |
| @spectrum-web-components/base | Minor |
| @spectrum-web-components/grid | Minor |
| @spectrum-web-components/opacity-checkerboard | Minor |
| @spectrum-web-components/reactive-controllers | Minor |
| @spectrum-web-components/shared | Minor |
| @spectrum-web-components/styles | Minor |
| @spectrum-web-components/theme | Minor |
| @spectrum-web-components/truncated | Minor |
| example-project-rollup | Patch |
| example-project-webpack | Patch |
Not sure what this means? Click here to learn what changesets are.
Click here if you're a maintainer who wants to add another changeset to this PR
![changeset-bot[bot] avatar](https://avatars.githubusercontent.com/in/28616?v=4 "Published by a pub.dev verified publisher"){kind=small}
Branch preview
Review the following VRT differences
When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:
- Spectrum | Light | Medium | LTR
- Spectrum | Dark | Large | RTL
- Express | Light | Medium | LTR
- Express | Dark | Large | RTL
- Spectrum-two | Light | Medium | LTR
- Spectrum-two | Dark | Large | RTL
- High Contrast Mode | Medium | LTR
If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Tachometer results
Chrome
avatar permalink
test-basic
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 444 kB | 18.80ms - 19.48ms | - | faster ✔ 4% - 9% 0.74ms - 1.82ms |
| branch | 422 kB | 19.99ms - 20.85ms | slower ❌ 4% - 10% 0.74ms - 1.82ms |
- |
Firefox
avatar permalink
test-basic
| Version | Bytes | Avg Time | vs remote | vs branch |
|---|---|---|---|---|
| npm latest | 444 kB | 41.82ms - 44.38ms | - | unsure 🔍 -8% - +2% -3.48ms - +0.80ms |
| branch | 422 kB | 42.73ms - 46.15ms | unsure 🔍 -2% - +8% -0.80ms - +3.48ms |
- |