Skip to content

fix(eek): refactored EEK to use role img instead of figure#620

Merged
saiponnada merged 1 commit intomainfrom
eek-fix
Apr 13, 2026
Merged

fix(eek): refactored EEK to use role img instead of figure#620
saiponnada merged 1 commit intomainfrom
eek-fix

Conversation

@saiponnada
Copy link
Copy Markdown
Contributor

Description

Swapped role figure to img. With role:figure AT is not announcing the label consistently because the descendants are hidden.

Checklist

  • I verify the linked issue has been triaged ("Needs Triage" label removed)
  • I verify all changes are within scope of the linked issue
  • I added/updated/removed testing (Storybook in Skin) coverage as appropriate
  • I tested the UI in all supported browsers
  • I tested the UI in dark mode and RTL mode

Copilot AI review requested due to automatic review settings April 13, 2026 17:32
@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Apr 13, 2026

⚠️ No Changeset found

Latest commit: 810b6f8

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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").

Comment on lines 25 to 29
expect(getByText("A+++")).toMatchSnapshot();
expect(getByText("D")).toMatchSnapshot();
expect(getByText("B")).toMatchSnapshot();
expect(getByRole("figure")).toMatchSnapshot();
expect(getByRole("img")).toMatchSnapshot();
});
Copy link

Copilot AI Apr 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.
@saiponnada saiponnada merged commit 702dac7 into main Apr 13, 2026
10 checks passed
@saiponnada saiponnada deleted the eek-fix branch April 13, 2026 20:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

ebay-eek: AT doesn't announce the aria-label consistently.

3 participants