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

SAP · Mar 11, 2025 · 9a3d9b4 · 9a3d9b4
1 parent cf79c33
commit 9a3d9b4
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 0 deletions.
diff --git a/packages/main/cypress/specs/Carousel.cy.tsx b/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");
+	});
+});
diff --git a/packages/main/src/Carousel.ts b/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

diff --git a/packages/main/src/CarouselTemplate.tsx b/packages/main/src/CarouselTemplate.tsx
@@ -13,6 +13,7 @@ export default function CarouselTemplate(this: Carousel) {
 			tabindex={0}
 			role="list"
 			aria-label={this.ariaLabelTxt}
+			aria-roledescription={this._roleDescription}
 			aria-activedescendant={this.ariaActiveDescendant}
 			onFocusIn={this._onfocusin}
 			onKeyDown={this._onkeydown}

diff --git a/packages/main/src/i18n/messagebundle.properties b/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