diff --git a/packages/main/cypress/specs/Carousel.cy.tsx b/packages/main/cypress/specs/Carousel.cy.tsx index 5d421ca6e05f..9e871a96435e 100644 --- a/packages/main/cypress/specs/Carousel.cy.tsx +++ b/packages/main/cypress/specs/Carousel.cy.tsx @@ -252,6 +252,11 @@ describe("Carousel general interaction", () => { .find(".ui5-carousel-content") .should("have.attr", "role", "list"); + cy.get("#carousel5") + .shadow() + .find(".ui5-carousel-content") + .should("have.attr", "aria-label", "Item Container"); + cy.get("#carousel5") .shadow() .find(".ui5-carousel-item") diff --git a/packages/main/src/Carousel.ts b/packages/main/src/Carousel.ts index b800a2ec99bd..cc369f7f78e5 100644 --- a/packages/main/src/Carousel.ts +++ b/packages/main/src/Carousel.ts @@ -33,6 +33,7 @@ import { CAROUSEL_PREVIOUS_ARROW_TEXT, CAROUSEL_NEXT_ARROW_TEXT, CAROUSEL_ARIA_ROLE_DESCRIPTION, + CAROUSEL_ARIA_LIST_LABEL, } from "./generated/i18n/i18n-defaults.js"; import CarouselArrowsPlacement from "./types/CarouselArrowsPlacement.js"; import CarouselPageIndicatorType from "./types/CarouselPageIndicatorType.js"; @@ -977,6 +978,10 @@ class Carousel extends UI5Element { return Carousel.i18nBundle.getText(CAROUSEL_ARIA_ROLE_DESCRIPTION); } + get _ariaListLabel() { + return Carousel.i18nBundle.getText(CAROUSEL_ARIA_LIST_LABEL); + } + /** * Returns only visible (non-hidden) content items. * Items with the 'hidden' attribute are automatically excluded from carousel navigation. diff --git a/packages/main/src/CarouselTemplate.tsx b/packages/main/src/CarouselTemplate.tsx index c518f2d6e8f1..5ae041996380 100644 --- a/packages/main/src/CarouselTemplate.tsx +++ b/packages/main/src/CarouselTemplate.tsx @@ -21,7 +21,7 @@ export default function CarouselTemplate(this: Carousel) { onMouseDown={this._onmousedown} >