Skip to content

feat(ui5-carousel): improve keyboard handling and update accessibility attributes #12256

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

Open
wants to merge 25 commits into
base: main
Choose a base branch
from
+544 −224
Open

feat(ui5-carousel): improve keyboard handling and update accessibility attributes #12256

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
9741fab
feat(ui5-carousel): focus is on the items
GerganaKremenska Sep 3, 2025
6febbf2
feat(ui5-carousel): updates accessibility and adds keyboard handling
kskondov Sep 25, 2025
49b3e68
Merge branch 'main' of github.com:SAP/ui5-webcomponents into carousel…
kskondov Sep 25, 2025
1729dd7
feat(ui5-carousel): adds keyboard handling and updates accessibility …
kskondov Sep 25, 2025
b0b93ef
feat(ui5-carousel): adds keyboard handling and updates accessibility …
kskondov Sep 25, 2025
a7a9703
feat(ui5-carousel): adds keyboard handling and updates accessibility …
kskondov Sep 25, 2025
f18bdd1
feat(ui5-carousel): adds keyboard handling and updates accessibility …
kskondov Sep 25, 2025
c307ce0
feat(ui5-carousel): adds keyboard handling and updates accessibility …
kskondov Sep 26, 2025
4565e9f
Merge branch 'main' into carousel_focus
ilhan007 Sep 26, 2025
d40510d
feat(ui5-carousel): adds keyboard handling and updates accessibility …
kskondov Sep 30, 2025
0876172
Merge branch 'main' of github.com:SAP/ui5-webcomponents into carousel…
kskondov Sep 30, 2025
0c102fe
Merge branch 'main' into carousel_focus
kskondov Sep 30, 2025
d93ed49
Merge branch 'carousel_focus' of github.com:SAP/ui5-webcomponents int…
kskondov Sep 30, 2025
086ddc5
feat(ui5-carousel): adds keyboard handling and updates accessibility …
kskondov Sep 30, 2025
2410d72
feat(ui5-carousel): improve keyboard handling and update accessibilit…
kskondov Sep 30, 2025
4ed8c54
Merge branch 'main' of github.com:SAP/ui5-webcomponents into carousel…
kskondov Sep 30, 2025
690e9a5
feat(ui5-carousel): improve keyboard handling and update accessibili…
kskondov Oct 1, 2025
23ddcd3
Merge branch 'main' into carousel_focus
GerganaKremenska Oct 3, 2025
a0e4c46
feat(ui5-carousel): improve keyboard handling and update accessibili…
kskondov Oct 7, 2025
27b8ee4
Merge commit 'refs/pull/12256/head' of github.com:UI5/webcomponents i…
kskondov Oct 7, 2025
4fe1445
Merge branch 'main' of github.com:SAP/ui5-webcomponents into carousel…
kskondov Oct 7, 2025
d812dee
feat(ui5-carousel): improve keyboard handling and update accessibili…
kskondov Oct 8, 2025
20e4331
feat(ui5-carousel): improve keyboard handling and update accessibilit…
kskondov Oct 8, 2025
e48d976
Merge branch 'main' of github.com:SAP/ui5-webcomponents into carousel…
kskondov Oct 8, 2025
d4e3273
Merge branch 'main' of github.com:SAP/ui5-webcomponents into carousel…
kskondov Oct 8, 2025
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
186 changes: 100 additions & 86 deletions packages/main/cypress/specs/Carousel.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,12 +42,12 @@ describe("Carousel general interaction", () => {
</Carousel>);

cy.get("#carousel1")
.realHover()
.trigger("mouseover")
.shadow()
.find(".ui5-carousel-navigation-arrows .ui5-carousel-navigation-button:not(.ui5-carousel-navigation-button--hidden)")
.find(".ui5-carousel-navigation-arrows .ui5-carousel-navigation-button:not(.ui5-carousel-navigation-button--hidden)").first()
.realClick();

cy.get("#carousel1").should("have.prop", "_selectedIndex", 2);
cy.get("#carousel1").should("have.prop", "_focusedItemIndex", 2);
});

it("Carousel navigates right", () => {
Expand All @@ -57,14 +57,15 @@ describe("Carousel general interaction", () => {
<Button>Button 2</Button>
<Button>Button 3</Button>
</Carousel>);
cy.get("#carousel1").should("have.prop", "_focusedItemIndex", 0);

cy.get("#carousel1")
.realHover()
.trigger("mouseover")
.shadow()
.find(".ui5-carousel-navigation-arrows .ui5-carousel-navigation-button:not(.ui5-carousel-navigation-button--hidden)")
.find(".ui5-carousel-navigation-arrows .ui5-carousel-navigation-button:not(.ui5-carousel-navigation-button--hidden)").last()
.realClick();

cy.get("#carousel1").should("have.prop", "_selectedIndex", 1);
cy.get("#carousel1").should("have.prop", "_focusedItemIndex", 1);
});

it("Navigation is rendered for carousel with less than 9 elements", () => {
Expand Down Expand Up @@ -117,19 +118,19 @@ describe("Carousel general interaction", () => {
</Carousel>);

cy.get("#carousel2")
.realHover()
.trigger('mouseover')
.shadow()
.find(".ui5-carousel-navigation-arrows .ui5-carousel-navigation-button:not(.ui5-carousel-navigation-button--hidden)")
.should("have.length", 1);

cy.get("#carousel2")
.realHover()
.trigger('mouseover')
.shadow()
.find(".ui5-carousel-navigation-arrows .ui5-carousel-navigation-button:not(.ui5-carousel-navigation-button--hidden)")
.realClick();

cy.get("#carousel2")
.realHover()
.trigger('mouseover')
.shadow()
.find(".ui5-carousel-navigation-arrows .ui5-carousel-navigation-button:not(.ui5-carousel-navigation-button--hidden)")
.should("have.length", 2);
Expand Down Expand Up @@ -216,8 +217,12 @@ describe("Carousel general interaction", () => {

cy.get("#carousel5")
.shadow()
.find(".ui5-carousel-item:first-child")
.should("have.attr", "aria-selected", "true");
.find(".ui5-carousel-content").find(":first-child")
.realClick();
cy.get("#carousel5")
.shadow()
.find(".ui5-carousel-content").find(":first-child")
.should("have.attr", "aria-hidden");

cy.get("#carousel5")
.shadow()
Expand All @@ -231,30 +236,6 @@ describe("Carousel general interaction", () => {
.should("have.attr", "aria-posinset", CAROUSEL_ITEM4_POS)
.and("have.attr", "aria-setsize", SETSIZE);

cy.get<Carousel>('#carousel5')
.then(($carousel) => {
const el = $carousel[0];

cy.get('#carousel5')
.shadow()
.find('.ui5-carousel-root')
.should('have.attr', 'aria-activedescendant', `${el._id}-carousel-item-1`);
});

cy.get("#carousel5")
.shadow()
.find(".ui5-carousel-navigation-button:nth-child(2)")
.realClick();

cy.get<Carousel>('#carousel5')
.then(($carousel) => {
const el = $carousel[0];
cy.get('#carousel5')
.shadow()
.find('.ui5-carousel-root')
.should('have.attr', 'aria-activedescendant', `${el._id}-carousel-item-2`);
});

cy.get("#carouselAccName")
.shadow()
.find(".ui5-carousel-root")
Expand All @@ -268,6 +249,11 @@ describe("Carousel general interaction", () => {
cy.get("#carousel5")
.shadow()
.find(".ui5-carousel-root")
.should("have.attr", "role", "region");

cy.get("#carousel5")
.shadow()
.find(".ui5-carousel-content")
.should("have.attr", "role", "list");

cy.get("#carousel5")
Expand Down Expand Up @@ -328,7 +314,7 @@ describe("Carousel general interaction", () => {
it("Event navigate fired when pressing navigation arrows", () => {
const navigateEventStub = cy.stub().as("myStub");
cy.mount(
<Carousel id="carousel8" itemsPerPage="S1 M4 L4 XL4" onNavigate={navigateEventStub}>
<Carousel id="carousel8" onNavigate={navigateEventStub}>
<Button>Button 1</Button>
<Button>Button 2</Button>
<Button>Button 3</Button>
Expand All @@ -340,29 +326,33 @@ describe("Carousel general interaction", () => {
</Carousel>);

cy.get("#carousel8")
.trigger("mouseover")
.shadow()
.find("ui5-button[data-ui5-arrow-forward]")
.find(".ui5-carousel-navigation-button[data-ui5-arrow-forward]")
.should("exist")
.realClick();
cy.get("@myStub").should("have.been.calledOnce");

cy.get("#carousel8")
.trigger("mouseover")
.shadow()
.find("ui5-button[data-ui5-arrow-forward]")
.find(".ui5-carousel-navigation-button[data-ui5-arrow-forward]")
.should("exist")
.realClick();
cy.get("@myStub").should("have.been.calledTwice");

cy.get("#carousel8")
.trigger("mouseover")
.shadow()
.find("ui5-button[data-ui5-arrow-back]")
.find(".ui5-carousel-navigation-button[data-ui5-arrow-back]")
.should("exist")
.realClick();
cy.get("@myStub").should("have.been.calledThrice");

cy.get("#carousel8")
.trigger("mouseover")
.shadow()
.find("ui5-button[data-ui5-arrow-back]")
.find(".ui5-carousel-navigation-button[data-ui5-arrow-back]")
.should("exist")
.realClick();
cy.get("@myStub").should("have.callCount", 4);
Expand Down Expand Up @@ -403,43 +393,15 @@ describe("Carousel general interaction", () => {

});

it("navigateTo method and visibleItemsIndices", () => {
cy.mount(
<Carousel id="carousel9" itemsPerPage="S1 M2 L2 XL2">
<Button>Button 1</Button>
<Button>Button 2</Button>
<Button>Button 3</Button>
<Button>Button 4</Button>
<Button>Button 5</Button>
<Button>Button 6</Button>
<Button>Button 7</Button>
<Button>Button 8</Button>
<Button>Button 9</Button>
<Button>Button 10</Button>
</Carousel>);

cy.get("#carousel9")
.invoke("prop", "visibleItemsIndices")
.should("deep.equal", [0, 1]);

cy.get<Carousel>("#carousel9").then(($carousel) => {
$carousel[0].navigateTo(1);
});

cy.get("#carousel9")
.invoke("prop", "visibleItemsIndices")
.should("deep.equal", [1, 2]);
});

it("F7 keyboard navigation", () => {
cy.mount(
<Carousel id="carouselF7" itemsPerPage="S3 M3 L3 XL3">
<Card class="myCard">
<div>
Page 1 <br />
<Button>Button 1</Button>
<Button id="carouselF7Button">Button 1</Button>
<br />
<Button id="carouselF7Button">Button 2</Button>
<Button>Button 2</Button>
<br />
<Input></Input>
</div>
Expand Down Expand Up @@ -497,31 +459,83 @@ describe("Carousel general interaction", () => {
</Carousel>);

cy.get(".myCard").should("be.visible");
cy.get("#carouselF7").shadow().find(".ui5-carousel-content").find(".ui5-carousel-item").first().focus();

cy.realPress("F7");
cy.wait(100)

cy.get("#carouselF7Button").realClick();
cy.get("#carouselF7Button").should('be.focused');

cy.realPress("F7");
cy.focused().should("have.class", "ui5-carousel-root");
cy.wait(100)

cy.realPress("F7");
cy.focused().should("have.class", "ui5-button-root");
cy.get("#carouselF7").shadow().find(".ui5-carousel-content").find(":first-child").should("be.focused");
});

cy.get("#carouselF7Input").realClick();
cy.realPress("F7");
cy.focused().should("have.class", "ui5-carousel-root");

cy.realPress("F7");
cy.focused().should("have.class", "ui5-input-inner");
it("'Home' and 'End' button press", () => {
cy.mount(
<Carousel id="testHomeAndEnd" arrowsPlacement="Navigation" hidePageIndicator>
<Button id="firstButton">Button 1</Button>
<Button>Button 2</Button>
<Button>Button 3</Button>
<Button>Button 4</Button>
<Button>Button 5</Button>
<Button>Button 6</Button>
<Button>Button 7</Button>
<Button>Button 8</Button>
<Button>Button 9</Button>
<Button>Button 10</Button>
</Carousel>);

cy.get("#carouselF7Button").realClick();
cy.realPress("F7");
cy.get("#firstButton").realClick();
cy.realPress("End");
cy.get("#testHomeAndEnd").should("have.prop", "_focusedItemIndex", 9);
cy.realPress("Home");
cy.get("#testHomeAndEnd").should("have.prop", "_focusedItemIndex", 0);
});

cy.get<Carousel>("#carouselF7").then(($carousel) => {
$carousel[0].navigateTo(1);
});
cy.realPress("F7");
cy.focused().should("have.class", "ui5-input-inner");
it("'PageUp' and 'PageDown' button press", () => {
cy.mount(
<Carousel id="testPageUpDown" itemsPerPage="S3 M3 L3 XL3">
<Button id="firstButton">Button 1</Button>
<Button>Button 2</Button>
<Button>Button 3</Button>
<Button>Button 4</Button>
<Button>Button 5</Button>
<Button>Button 6</Button>
<Button>Button 7</Button>
<Button>Button 8</Button>
<Button>Button 9</Button>
<Button>Button 10</Button>
<Button>Button 11</Button>
<Button>Button 12</Button>
<Button>Button 13</Button>
<Button>Button 14</Button>
<Button>Button 15</Button>
<Button>Button 16</Button>
<Button>Button 17</Button>
<Button>Button 18</Button>
<Button>Button 19</Button>
<Button>Button 20</Button>
<Button>Button 21</Button>
<Button>Button 22</Button>
</Carousel>);

cy.get("#firstButton").realClick();
cy.get("#testPageUpDown").should("have.prop", "_focusedItemIndex", 0);
cy.realPress("PageUp");
cy.get("#testPageUpDown").should("have.prop", "_focusedItemIndex", 10);
cy.realPress("PageUp");
cy.get("#testPageUpDown").should("have.prop", "_focusedItemIndex", 20);
cy.realPress("PageUp");
cy.get("#testPageUpDown").should("have.prop", "_focusedItemIndex", 21);
cy.realPress("PageDown");
cy.get("#testPageUpDown").should("have.prop", "_focusedItemIndex", 11);
cy.realPress("PageDown");
cy.get("#testPageUpDown").should("have.prop", "_focusedItemIndex", 1);
cy.realPress("PageDown");
cy.get("#testPageUpDown").should("have.prop", "_focusedItemIndex", 0);
});

it("Items per page", () => {
Expand Down
Loading
Loading