fix(ui5-carousel): update roles to match ACC specification (#11032)

JIRA: BGSOFUIRODOPI-3382
fixes #10198
fixes #8624

Author: duygu-rmdn

packages/main/cypress/specs/Carousel.cy.tsx

@@ -0,0 +1,27 @@
+import Carousel from "../../src/Carousel.js";
+import Text from "../../src/Text.js";
+
+describe("Accessibility", () => {
+	it("tests carousel aria roles", () => {
+		cy.mount(
+			<Carousel id="carousel">
+				<Text id="text">Test</Text>
+			</Carousel>
+		);
+
+		cy.get("#carousel")
+			.shadow()
+			.find(".ui5-carousel-root")
+			.should("have.attr", "role", "list");
+
+		cy.get("#carousel")
+			.shadow()
+			.find(".ui5-carousel-item")
+			.should("have.attr", "role", "listitem");
+
+		cy.get("#carousel")
+			.shadow()
+			.find(".ui5-carousel-root")
+			.should("have.attr", "aria-roledescription", "Carousel");
+	});
+});

packages/main/src/Carousel.ts

@@ -27,6 +27,7 @@ import {
 	CAROUSEL_DOT_TEXT,
 	CAROUSEL_PREVIOUS_ARROW_TEXT,
 	CAROUSEL_NEXT_ARROW_TEXT,
+	CAROUSEL_ARIA_ROLE_DESCRIPTION,
 } from "./generated/i18n/i18n-defaults.js";
 import CarouselArrowsPlacement from "./types/CarouselArrowsPlacement.js";
 import CarouselPageIndicatorType from "./types/CarouselPageIndicatorType.js";
@@ -700,6 +701,10 @@ class Carousel extends UI5Element {
 		return Carousel.i18nBundle.getText(CAROUSEL_PREVIOUS_ARROW_TEXT);
 	}
 
+	get _roleDescription() {
+		return Carousel.i18nBundle.getText(CAROUSEL_ARIA_ROLE_DESCRIPTION);
+	}
+
 	/**
 	 * The indices of the currently visible items of the component.
 	 * @public

packages/main/src/CarouselTemplate.tsx

@@ -11,8 +11,9 @@ export default function CarouselTemplate(this: Carousel) {
 				[`ui5-carousel-background-${this._backgroundDesign}`]: true,
 			}}
 			tabindex={0}
-			role="listbox"
+			role="list"
 			aria-label={this.ariaLabelTxt}
+			aria-roledescription={this._roleDescription}
 			aria-activedescendant={this.ariaActiveDescendant}
 			onFocusIn={this._onfocusin}
 			onKeyDown={this._onkeydown}
@@ -30,7 +31,7 @@ export default function CarouselTemplate(this: Carousel) {
 							}}
 							style={{ width: `${this._itemWidth || 0}px` }}
 							part="item"
-							role="option"
+							role="listitem"
 							aria-posinset={itemInfo.posinset}
 							aria-setsize={itemInfo.setsize}
 							aria-selected = {itemInfo.selected}

packages/main/src/i18n/messagebundle.properties

@@ -103,6 +103,9 @@ CAROUSEL_PREVIOUS_ARROW_TEXT=Previous Page
 # Carousel Next Page text
 CAROUSEL_NEXT_ARROW_TEXT=Next Page
 
+#XACT: ARIA announcement for the ettribute 'aria-roledescription' of the Carousel component
+CAROUSEL_ARIA_ROLE_DESCRIPTION=Carousel
+
 #XFLD: Label of the container holding the colors
 COLORPALETTE_CONTAINER_LABEL=Color palette - Predefined colors