Skip to content

Commit 702dac7

Browse files
saiponnadasaiponnada
authored
fix(eek): refactored EEK to use role img instead of figure (#620)
1 parent f4b52b7 commit 702dac7

File tree

12 files changed

+54
-54
lines changed

12 files changed

+54
-54
lines changed

‎packages/ebayui-core-react/src/ebay-eek/__tests__/index.spec.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ async function ratingCheck(max, min, rating, number) {
99

1010
wrapper = render(<EbayEek max={max} min={min} rating={rating} />);
1111

12-
wrapper.getAllByRole("figure").forEach((figure) => {
13-
expect(figure).toHaveClass(eekClass);
12+
wrapper.getAllByRole("img").forEach((eekRoot) => {
13+
expect(eekRoot).toHaveClass(eekClass);
1414
});
1515
}
1616

@@ -26,7 +26,7 @@ describe("<EbayEek>", () => {
2626
expect(wrapper.getByText("A+++")).toHaveProperty("nextElementSibling");
2727
expect(wrapper.getByText("D")).toHaveProperty("previousElementSibling");
2828
expect(wrapper.getByText("B")).toHaveClass("eek__rating");
29-
expect(wrapper.getByRole("figure")).toHaveClass("eek--rating-5");
29+
expect(wrapper.getByRole("img")).toHaveClass("eek--rating-5");
3030
});
3131

3232
it("renders invalid eek", async () => {
@@ -40,7 +40,7 @@ describe("<EbayEek>", () => {
4040
expect(wrapper.getByText("A")).toHaveProperty("nextElementSibling");
4141
expect(wrapper.getByText("D")).toHaveProperty("previousElementSibling");
4242
expect(wrapper.getByText("B")).toHaveClass("eek__rating");
43-
expect(wrapper.getByRole("figure")).toHaveClass("eek");
43+
expect(wrapper.getByRole("img")).toHaveClass("eek");
4444
});
4545

4646
it("renders the correct eek if rating is outside", async () => {

‎packages/ebayui-core-react/src/ebay-eek/__tests__/index.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ or import styles using SCSS/CSS
4444
rating: { description: "The energy rating", control: "text" },
4545
max: { description: "The maximum range", control: "text" },
4646
min: { description: "The minimum range", control: "text" },
47-
a11yText: { description: "Accessible label for the energy rating figure", control: "text" },
47+
a11yText: { description: "Accessible label for the energy rating graphic", control: "text" },
4848
},
4949
};
5050

‎packages/ebayui-core-react/src/ebay-eek/eek-rating.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const EbayEek: FC<EbayEekProps> = ({ min = "", max = "", rating, a11yText, class
1717
const className = classNames(extraClasses, "eek", { [`eek--rating-${parsedRating}`]: !!parsedRating });
1818
const backupA11yText = `Energy Rating: ${rating}. Range: ${max} - ${min}.`;
1919
return (
20-
<div className={className} role="figure" aria-label={a11yText || backupA11yText}>
20+
<div className={className} role="img" aria-label={a11yText || backupA11yText}>
2121
<div className="eek__container" aria-hidden>
2222
<span className="eek__rating-range">
2323
<span>{max}</span>

‎packages/ebayui-core/src/components/ebay-eek/index.marko‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ $ (input as any).toJSON = noop;
1616
$ const eekRating = eekUtil(input);
1717
<div
1818
...processHtmlAttributes(htmlInput)
19-
role="figure"
19+
role="img"
2020
style=style
2121
aria-label=a11yText ||
2222
`Energy Rating: ${rating}. Range: ${max} - ${min}.`

‎packages/ebayui-core/src/components/ebay-eek/test/__snapshots__/test.server.js.snap‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ exports[`eek > passes through additional html attributes 1`] = `
66
class="eek class1"
77
data-passed-through="true"
88
data-testid="AttributePassthrough"
9-
role="figure"
9+
role="img"
1010
style="color:red"
1111
type="number"
1212
>
@@ -86,7 +86,7 @@ exports[`eek > passes through additional html attributes 2`] = `
8686
class="eek class1"
8787
data-passed-through="true"
8888
data-testid="AttributePassthrough"
89-
role="figure"
89+
role="img"
9090
style="color:red"
9191
type="number"
9292
>
@@ -184,7 +184,7 @@ exports[`eek > renders default eek 4`] = `
184184
<div
185185
aria-label="Energy Rating: B. Range: A+++ - D."
186186
class="eek eek--rating-5"
187-
role="figure"
187+
role="img"
188188
>
189189
<div
190190
aria-hidden="true"
@@ -286,7 +286,7 @@ exports[`eek > renders invalid eek 4`] = `
286286
<div
287287
aria-label="Energy Rating: B. Range: A - D."
288288
class="eek"
289-
role="figure"
289+
role="img"
290290
>
291291
<div
292292
aria-hidden="true"
@@ -388,7 +388,7 @@ exports[`eek > renders large eek 4`] = `
388388
<div
389389
aria-label="Energy Rating: B. Range: A+++ - D."
390390
class="eek eek--rating-5 eek--large"
391-
role="figure"
391+
role="img"
392392
>
393393
<div
394394
aria-hidden="true"
@@ -470,7 +470,7 @@ exports[`eek > renders rating 1 1`] = `
470470
<div
471471
aria-label="Energy Rating: A++. Range: A++ - E."
472472
class="eek eek--rating-1"
473-
role="figure"
473+
role="img"
474474
>
475475
<div
476476
aria-hidden="true"
@@ -552,7 +552,7 @@ exports[`eek > renders rating 2 1`] = `
552552
<div
553553
aria-label="Energy Rating: A+. Range: A++ - E."
554554
class="eek eek--rating-2"
555-
role="figure"
555+
role="img"
556556
>
557557
<div
558558
aria-hidden="true"
@@ -634,7 +634,7 @@ exports[`eek > renders rating 3 1`] = `
634634
<div
635635
aria-label="Energy Rating: A. Range: A++ - E."
636636
class="eek eek--rating-3"
637-
role="figure"
637+
role="img"
638638
>
639639
<div
640640
aria-hidden="true"
@@ -716,7 +716,7 @@ exports[`eek > renders rating 4 1`] = `
716716
<div
717717
aria-label="Energy Rating: B. Range: A++ - E."
718718
class="eek eek--rating-4"
719-
role="figure"
719+
role="img"
720720
>
721721
<div
722722
aria-hidden="true"
@@ -798,7 +798,7 @@ exports[`eek > renders rating 5 1`] = `
798798
<div
799799
aria-label="Energy Rating: C. Range: A++ - E."
800800
class="eek eek--rating-5"
801-
role="figure"
801+
role="img"
802802
>
803803
<div
804804
aria-hidden="true"
@@ -880,7 +880,7 @@ exports[`eek > renders rating 6 1`] = `
880880
<div
881881
aria-label="Energy Rating: D. Range: A++ - E."
882882
class="eek eek--rating-6"
883-
role="figure"
883+
role="img"
884884
>
885885
<div
886886
aria-hidden="true"
@@ -962,7 +962,7 @@ exports[`eek > renders rating 7 (not 8) 1`] = `
962962
<div
963963
aria-label="Energy Rating: F. Range: A++ - G."
964964
class="eek eek--rating-7"
965-
role="figure"
965+
role="img"
966966
>
967967
<div
968968
aria-hidden="true"
@@ -1044,7 +1044,7 @@ exports[`eek > renders rating 7 (not 8) 2`] = `
10441044
<div
10451045
aria-label="Energy Rating: G. Range: A++ - G."
10461046
class="eek eek--rating-7"
1047-
role="figure"
1047+
role="img"
10481048
>
10491049
<div
10501050
aria-hidden="true"
@@ -1126,7 +1126,7 @@ exports[`eek > renders rating 7 1`] = `
11261126
<div
11271127
aria-label="Energy Rating: E. Range: A++ - E."
11281128
class="eek eek--rating-7"
1129-
role="figure"
1129+
role="img"
11301130
>
11311131
<div
11321132
aria-hidden="true"
@@ -1208,7 +1208,7 @@ exports[`eek > renders the correct eek if rating is outside 1`] = `
12081208
<div
12091209
aria-label="Energy Rating: A++. Range: A+ - D."
12101210
class="eek"
1211-
role="figure"
1211+
role="img"
12121212
>
12131213
<div
12141214
aria-hidden="true"

‎packages/ebayui-core/src/components/ebay-eek/test/test.server.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import template from "../index.marko";
77
describe("eek", () => {
88
async function ratingCheck(max, min, rating) {
99
const { getByRole } = await render(template, { max, min, rating });
10-
expect(getByRole("figure")).toMatchSnapshot();
10+
expect(getByRole("img")).toMatchSnapshot();
1111
}
1212

1313
it("renders default eek", async () => {
@@ -19,7 +19,7 @@ describe("eek", () => {
1919
expect(getByText("A+++")).toMatchSnapshot();
2020
expect(getByText("D")).toMatchSnapshot();
2121
expect(getByText("B")).toMatchSnapshot();
22-
expect(getByRole("figure")).toMatchSnapshot();
22+
expect(getByRole("img")).toMatchSnapshot();
2323
});
2424

2525
it("renders large eek", async () => {
@@ -32,7 +32,7 @@ describe("eek", () => {
3232
expect(getByText("A+++")).toMatchSnapshot();
3333
expect(getByText("D")).toMatchSnapshot();
3434
expect(getByText("B")).toMatchSnapshot();
35-
expect(getByRole("figure")).toMatchSnapshot();
35+
expect(getByRole("img")).toMatchSnapshot();
3636
});
3737

3838
it("renders invalid eek", async () => {
@@ -44,7 +44,7 @@ describe("eek", () => {
4444
expect(getByText("A")).toMatchSnapshot();
4545
expect(getByText("D")).toMatchSnapshot();
4646
expect(getByText("B")).toMatchSnapshot();
47-
expect(getByRole("figure")).toMatchSnapshot();
47+
expect(getByRole("img")).toMatchSnapshot();
4848
});
4949

5050
it("renders the correct eek if rating is outside", async () => {

‎packages/evo-marko/src/tags/evo-eek/index.marko‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ static function eekUtil(max:string, min:string, rating:string) {
5858
<div
5959
...htmlInput
6060
aria-label=a11yText
61-
role="figure"
61+
role="img"
6262
class=[
6363
"eek",
6464
eekRating ? `eek--rating-${eekRating}` : null,

‎packages/evo-marko/src/tags/evo-eek/test/test.server.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ describe("eek", () => {
2525
expect(getByText("A+++")).toMatchSnapshot();
2626
expect(getByText("D")).toMatchSnapshot();
2727
expect(getByText("B")).toMatchSnapshot();
28-
expect(getByRole("figure")).toMatchSnapshot();
28+
expect(getByRole("img")).toMatchSnapshot();
2929
});
3030

3131
it("renders large eek", async () => {
@@ -39,7 +39,7 @@ describe("eek", () => {
3939
expect(getByText("A+++")).toMatchSnapshot();
4040
expect(getByText("D")).toMatchSnapshot();
4141
expect(getByText("B")).toMatchSnapshot();
42-
expect(getByRole("figure")).toMatchSnapshot();
42+
expect(getByRole("img")).toMatchSnapshot();
4343
});
4444

4545
it("renders invalid eek", async () => {
@@ -52,7 +52,7 @@ describe("eek", () => {
5252
expect(getByText("A")).toMatchSnapshot();
5353
expect(getByText("D")).toMatchSnapshot();
5454
expect(getByText("B")).toMatchSnapshot();
55-
expect(getByRole("figure")).toMatchSnapshot();
55+
expect(getByRole("img")).toMatchSnapshot();
5656
});
5757

5858
it("renders the correct eek if rating is outside", async () => {

‎packages/skin/src/sass/eek/stories/eek.stories.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
export default { title: "Skin/EEK" };
22

33
export const typical = () => `
4-
<div class="eek eek--rating-4" role="figure" aria-label="Energy Rating: B. Range: A++ - E">
4+
<div class="eek eek--rating-4" role="img" aria-label="Energy Rating: B. Range: A++ - E">
55
<div class="eek__container">
66
<span class="eek__rating-range">
77
<span aria-hidden="true">A++</span>
@@ -21,7 +21,7 @@ export const typical = () => `
2121
`;
2222

2323
export const large = () => `
24-
<div class="eek eek--large eek--rating-1" role="figure" aria-label="Energy Rating: A+++. Range: A+++ - D">
24+
<div class="eek eek--large eek--rating-1" role="img" aria-label="Energy Rating: A+++. Range: A+++ - D">
2525
<div class="eek__container">
2626
<span class="eek__rating-range">
2727
<span aria-hidden="true">A+++</span>
@@ -42,7 +42,7 @@ export const large = () => `
4242

4343
export const RTL = () => `
4444
<div dir="rtl">
45-
<div class="eek eek--rating-4" role="figure" aria-label="Energy Rating: B. Range: A++ - E">
45+
<div class="eek eek--rating-4" role="img" aria-label="Energy Rating: B. Range: A++ - E">
4646
<div class="eek__container">
4747
<span class="eek__rating-range">
4848
<span aria-hidden="true">A++</span>
@@ -64,7 +64,7 @@ export const RTL = () => `
6464

6565
export const RTLLarge = () => `
6666
<div dir="rtl">
67-
<div class="eek eek--large eek--rating-1" role="figure" aria-label="Energy Rating: A+++. Range: A+++ - D">
67+
<div class="eek eek--large eek--rating-1" role="img" aria-label="Energy Rating: A+++. Range: A+++ - D">
6868
<div class="eek__container">
6969
<span class="eek__rating-range">
7070
<span aria-hidden="true">A+++</span>

‎src/routes/_index/components/eek/accessibility+meta.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{
22
"pageTitle": "EEK Accessibility Guidelines — Creating Inclusive Energy Efficiency Labels",
3-
"pageDescription": "Learn how to make EEK (Energy Efficiency Class) components fully accessible with proper figure semantics and ARIA labels. Follow these guidelines to ensure energy rating information is clear and accessible to all users, including those using assistive technologies."
3+
"pageDescription": "Learn how to make EEK (Energy Efficiency Class) components fully accessible using role=img and ARIA labels. Follow these guidelines to ensure energy rating information is clear and accessible to all users, including those using assistive technologies."
44
}

0 commit comments

Comments
 (0)