Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(ui5-carousel): selected state is added to item #9184

Merged
merged 4 commits into from
Jun 14, 2024
Merged

fix(ui5-carousel): selected state is added to item #9184

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d3b3c96
fix(ui5-carousel): selected state is announced by screen readers
GerganaKremenska Jun 11, 2024
648d3b0
Merge branch 'main' of github.com:SAP/ui5-webcomponents into carousel…
GerganaKremenska Jun 13, 2024
e592353
chore(ui5-carousel): give correct expected values to tests
GerganaKremenska Jun 13, 2024
5e333c7
fix(ui5-carousel): aria-hidden not needed
GerganaKremenska Jun 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/main/src/Carousel.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
role="option"
aria-posinset="{{posinset}}"
aria-setsize="{{setsize}}"
aria-selected = "{{selected}}"
part="item"
>
<slot name="{{this.item._individualSlot}}" tabindex="{{this.tabIndex}}"></slot>
Expand Down
1 change: 1 addition & 0 deletions packages/main/src/Carousel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -535,6 +535,7 @@ class Carousel extends UI5Element {
width: `${this._itemWidth || 0}px`,
},
classes: visible ? "" : "ui5-carousel-item--hidden",
selected: visible,
};
});
}
Expand Down
2 changes: 2 additions & 0 deletions packages/main/test/specs/Carousel.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,13 +100,15 @@ describe("Carousel general interaction", () => {
assert.strictEqual(await pageIndicatorDot1.getAttribute("aria-label"), PAGE_INDICATOR_ARIA_LABEL1, "The aria-label of page indicator is correct.");
assert.strictEqual(await pageIndicatorDot2.getAttribute("aria-label"), PAGE_INDICATOR_ARIA_LABEL2, "The aria-label of page indicator is correct.");

const carouselItem1 = await carousel.shadow$(".ui5-carousel-item:first-child");
const carouselItem3 = await carousel.shadow$(".ui5-carousel-item:nth-child(3)");
const carouselItem4 = await carousel.shadow$(".ui5-carousel-item:nth-child(4)");
const CAROUSEL_ITEM3_POS = "3";
const CAROUSEL_ITEM4_POS = "4";
const SETSIZE = "8";

// assert: check random carousel items ARIA
assert.strictEqual(await carouselItem1.getAttribute("aria-selected"), "true", "aria-selected of carousel item is correct.");
assert.strictEqual(await carouselItem3.getAttribute("aria-posinset"), CAROUSEL_ITEM3_POS, "The aria-posinset of carousel item is correct.");
assert.strictEqual(await carouselItem4.getAttribute("aria-posinset"), CAROUSEL_ITEM4_POS, "The aria-posinset of carousel item is correct.");
assert.strictEqual(await carouselItem3.getAttribute("aria-setsize"), SETSIZE, "The aria-setsize of carousel item is correct.");
Expand Down