fix(ui5-carousel): add aria-label to the list element (#12587)

* fix(ui5-carousel): add correct aria-label to the list element

Author: TeodorTaushanov

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

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.

packages/main/src/CarouselTemplate.tsx

@@ -21,7 +21,7 @@ export default function CarouselTemplate(this: Carousel) {
 			onMouseDown={this._onmousedown}
 		>
 			<div class={this.classes.viewport} part="content">
-				<div role="list" class={this.classes.content} style={{ transform: `translate3d(${this._isRTL ? "" : "-"}${this._currentSlideIndex * (this._itemWidth || 0)}px, 0, 0` }}>
+				<div role="list" aria-label={this._ariaListLabel} class={this.classes.content} style={{ transform: `translate3d(${this._isRTL ? "" : "-"}${this._currentSlideIndex * (this._itemWidth || 0)}px, 0, 0` }}>
 					{this.items.map(itemInfo =>
 						<div
 							data-sap-focus-ref

packages/main/src/i18n/messagebundle.properties

@@ -115,6 +115,9 @@ CAROUSEL_NEXT_ARROW_TEXT=Next Page
 #XACT: ARIA announcement for the attribute 'aria-roledescription' of the Carousel component
 CAROUSEL_ARIA_ROLE_DESCRIPTION=Carousel
 
+#XACT: ARIA announcement for the aria-label attribute of an element within a Carousel component with a list role
+CAROUSEL_ARIA_LIST_LABEL=Item Container
+
 #XFLD: Label of the container holding the colors
 COLORPALETTE_CONTAINER_LABEL=Color palette - Predefined colors