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

JIRA: BGSOFUIRODOPI-3382
fixes #10198
fixes #8624
downport of #11032

Author: duygu-rmdn

packages/main/src/Carousel.hbs

@@ -1,7 +1,8 @@
 <section
 	class="ui5-carousel-root ui5-carousel-background-{{_backgroundDesign}}"
 	tabindex="0"
-	role="listbox"
+	role="list"
+	aria-roledescription={{_roleDescription}}
 	aria-label="{{ariaLabelTxt}}"
 	aria-activedescendant="{{ariaActiveDescendant}}"
 	@focusin="{{_onfocusin}}"
@@ -15,7 +16,7 @@
 				<div id="{{id}}"
 					class="ui5-carousel-item {{classes}}"
 					style="{{styles}}"
-					role="option"
+					role="listitem"
 					aria-posinset="{{posinset}}"
 					aria-setsize="{{setsize}}"
 					part="item"

packages/main/src/Carousel.ts

@@ -28,6 +28,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 CarouselPageIndicatorStyle from "./types/CarouselPageIndicatorStyle.js";
@@ -696,6 +697,10 @@ class Carousel extends UI5Element {
 		return getEffectiveAriaLabelText(this);
 	}
 
+	get _roleDescription() {
+		return Carousel.i18nBundle.getText(CAROUSEL_ARIA_ROLE_DESCRIPTION);
+	}
+
 	get nextPageText() {
 		return Carousel.i18nBundle.getText(CAROUSEL_NEXT_ARROW_TEXT);
 	}

packages/main/src/i18n/messagebundle.properties

@@ -100,6 +100,9 @@ CAROUSEL_PREVIOUS_ARROW_TEXT=Previous Page
 # Carousel Next Page text
 CAROUSEL_NEXT_ARROW_TEXT=Next Page
 
+#XACT: ARIA announcement for the attribute '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