fix(eek): refactored EEK to use role img instead of figure#620
fix(eek): refactored EEK to use role img instead of figure#620saiponnada merged 1 commit intomainfrom
Conversation
|
There was a problem hiding this comment.
Pull request overview
Refactors the EEK (Energy Efficiency Class) component across docs and packages to use role="img" instead of role="figure" to improve consistent screen reader announcement of the accessible label.
Changes:
- Updated EEK markup (Marko + React + docs/demo markup) to use
role="img". - Updated accessibility documentation and metadata to reflect the new role guidance.
- Updated Storybook stories, tests, and (where present) snapshots to query/expect the new role.
Reviewed changes
Copilot reviewed 12 out of 12 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| src/routes/_index/components/eek/css+page.marko | Updates documented/demo EEK markup examples from role="figure" to role="img". |
| src/routes/_index/components/eek/accessibility+page.marko | Updates accessibility guidance text and MDN link to reference img role instead of figure. |
| src/routes/_index/components/eek/accessibility+meta.json | Updates page description to reflect role=img guidance. |
| packages/skin/src/sass/eek/stories/eek.stories.js | Updates Skin Storybook EEK markup examples to role="img". |
| packages/evo-marko/src/tags/evo-eek/index.marko | Updates evo-marko EEK component root role to img. |
| packages/evo-marko/src/tags/evo-eek/test/test.server.ts | Updates evo-marko EEK tests to query getByRole("img"). |
| packages/ebayui-core/src/components/ebay-eek/index.marko | Updates ebayui-core Marko EEK component root role to img. |
| packages/ebayui-core/src/components/ebay-eek/test/test.server.js | Updates ebayui-core tests to query getByRole("img"). |
| packages/ebayui-core/src/components/ebay-eek/test/snapshots/test.server.js.snap | Updates snapshots to expect role="img" output. |
| packages/ebayui-core-react/src/ebay-eek/eek-rating.tsx | Updates React EEK root role to img. |
| packages/ebayui-core-react/src/ebay-eek/tests/index.stories.tsx | Updates Storybook control description to refer to a “graphic” instead of “figure”. |
| packages/ebayui-core-react/src/ebay-eek/tests/index.spec.tsx | Updates React tests to query getByRole("img") / getAllByRole("img"). |
| expect(getByText("A+++")).toMatchSnapshot(); | ||
| expect(getByText("D")).toMatchSnapshot(); | ||
| expect(getByText("B")).toMatchSnapshot(); | ||
| expect(getByRole("figure")).toMatchSnapshot(); | ||
| expect(getByRole("img")).toMatchSnapshot(); | ||
| }); |
There was a problem hiding this comment.
toMatchSnapshot() in this test file requires a committed Vitest snapshot file (typically test/__snapshots__/test.server.ts.snap). There is currently no snapshot file for evo-eek, so this change (and the existing toMatchSnapshot() calls) will fail CI unless snapshots are generated and checked in. Please run the evo-marko server tests with snapshot update and commit the generated snapshot output for this suite.
Description
Swapped role
figuretoimg. Withrole:figureAT is not announcing the label consistently because the descendants are hidden.Checklist