refactor(ui5-li, ui5-list): changes accessibleRole type (#8825)

Changes the type of `accessibleRole` property for both `ui5-li` and `ui5-list`. BREAKING CHANGE: The `accessibleRole` property for both `ui5-li` and `ui5-list` has been updated from a string type to an enum type. Additionally, the new enums `ListItemAccessibleRole` and `ListAccessibleRole` have been introduced for these properties respectively. The available options for the `ui5-li`: `ListItem`- Represents the ARIA role "listitem". (by default) `MenuItem` - Represents the ARIA role "menuitem". `TreeItem ` - Represents the ARIA role "treeitem". `Option ` - Represents the ARIA role "option". `None` - Represents the ARIA role "none". The available options for the `ui5-list`: `List`- Represents the ARIA role "list". (by default) `Menu` - Represents the ARIA role "menu". `Tree` - Represents the ARIA role "tree". `ListBox` - Represents the ARIA role "listbox". If you have previously used: ```html <ui5-li accessible-role="menuitem"> List Item</ui5-li> <ui5-list accessible-role="tree"> List </ui5-list> ``` Now use: ```html <ui5-li accessible-role="MenuItem"> List Item</ui5-li> <ui5-list accessible-role="Tree"> List </ui5-list> ``` Related to #8461, #7887
SAP · Apr 30, 2024 · 8235159 · 8235159
1 parent de67ab6
commit 8235159
Show file tree

Hide file tree

Showing 9 changed files with 101 additions and 16 deletions.
diff --git a/packages/main/src/List.hbs b/packages/main/src/List.hbs
@@ -35,7 +35,7 @@
 
 		<ul id="{{_id}}-listUl"
 			class="ui5-list-ul"
-			role="{{accessibleRole}}"
+			role="{{listAccessibleRole}}"
 			aria-label="{{ariaLabelTxt}}"
 			aria-labelledby="{{ariaLabelledBy}}"
 		>

diff --git a/packages/main/src/List.ts b/packages/main/src/List.ts
@@ -30,6 +30,7 @@ import Orientation from "@ui5/webcomponents-base/dist/types/Orientation.js";
 import MovePlacement from "@ui5/webcomponents-base/dist/types/MovePlacement.js";
 import ListSelectionMode from "./types/ListSelectionMode.js";
 import ListGrowingMode from "./types/ListGrowingMode.js";
+import ListAccessibleRole from "./types/ListAccessibleRole.js";
 import ListItemBase from "./ListItemBase.js";
 import DropIndicator from "./DropIndicator.js";
 import type ListItem from "./ListItem.js";
@@ -399,11 +400,11 @@ class List extends UI5Element {
 	/**
 	 * Defines the accessible role of the component.
 	 * @public
-	 * @default "list"
+	 * @default "List"
 	 * @since 1.0.0-rc.15
 	 */
-	@property({ defaultValue: "list" })
-	accessibleRole!: string;
+	@property({ type: ListAccessibleRole, defaultValue: ListAccessibleRole.List })
+	accessibleRole!: `${ListAccessibleRole}`;
 
 	/**
 	 * Defines if the entire list is in view port.
@@ -679,6 +680,10 @@ class List extends UI5Element {
 		};
 	}
 
+	get listAccessibleRole() {
+		return this.accessibleRole.toLowerCase();
+	}
+
 	get classes(): ClassMap {
 		return {
 			root: {

diff --git a/packages/main/src/ListItem.ts b/packages/main/src/ListItem.ts
@@ -27,6 +27,7 @@ import {
 	LIST_ITEM_SELECTED,
 	LIST_ITEM_NOT_SELECTED,
 } from "./generated/i18n/i18n-defaults.js";
+import ListItemAccessibleRole from "./types/ListItemAccessibleRole.js";
 
 // Styles
 import styles from "./generated/themes/ListItem.css.js";
@@ -189,12 +190,12 @@ abstract class ListItem extends ListItemBase {
 	/**
 	 * Used to define the role of the list item.
 	 * @private
-	 * @default ""
+	 * @default "ListItem"
 	 * @since 1.3.0
 	 *
 	 */
-	@property()
-	accessibleRole!: string;
+	@property({ type: ListItemAccessibleRole, defaultValue: ListItemAccessibleRole.ListItem })
+	accessibleRole!: `${ListItemAccessibleRole}`;
 
 	@property({ type: ListSelectionMode, defaultValue: ListSelectionMode.None })
 	_selectionMode!: `${ListSelectionMode}`;
@@ -460,6 +461,10 @@ abstract class ListItem extends ListItemBase {
 		return undefined;
 	}
 
+	get listItemAccessibleRole() {
+		return this.accessibleRole.toLowerCase();
+	}
+
 	get ariaSelectedText() {
 		let ariaSelectedText;
 
@@ -494,7 +499,7 @@ abstract class ListItem extends ListItemBase {
 
 	get _accInfo(): AccInfo {
 		return {
-			role: this.accessibleRole,
+			role: this.listItemAccessibleRole,
 			ariaExpanded: undefined,
 			ariaLevel: undefined,
 			ariaLabel: ListItem.i18nBundle.getText(ARIA_LABEL_LIST_ITEM_CHECKBOX),

diff --git a/packages/main/src/Menu.hbs b/packages/main/src/Menu.hbs
@@ -53,7 +53,7 @@
 			?loading="{{loading}}"
 			loading-delay="{{loadingDelay}}"
 			separators="None"
-			accessible-role="menu"
+			accessible-role="Menu"
 			@ui5-item-click={{_itemClick}}
 			@mouseover="{{_loadingMouseOver}}"
 		>
@@ -64,7 +64,7 @@
 				id="{{../_id}}-menu-item-{{@index}}"
 				.icon="{{this.item.icon}}"
 				accessible-name={{this.item.ariaLabelledByText}}
-				accessible-role="menuitem"
+				accessible-role="MenuItem"
 				.additionalText="{{this.item._additionalText}}"
 				tooltip="{{this.item.tooltip}}"
 				selected="{{this.item.subMenuOpened}}"

diff --git a/packages/main/src/NavigationMenu.hbs b/packages/main/src/NavigationMenu.hbs
@@ -47,7 +47,7 @@
 	>
 	{{#if _currentItems.length}}
 		<ui5-list
-			accessible-role="tree"
+			accessible-role="Tree"
 			id="{{_id}}-menu-list"
 			selection-mode="None"
 			?loading="{{loading}}"
@@ -63,7 +63,7 @@
 					id="{{../_id}}-menu-item-{{@index}}"
 					.icon="{{this.item.icon}}"
 					accessible-name={{this.item.ariaLabelledByText}}
-					accessible-role="none"
+					accessible-role="None"
 					.additionalText="{{this.item._additionalText}}"
 					.ariaHasPopup={{this.ariaHasPopup}}
 					?disabled={{this.item.disabled}}
@@ -104,7 +104,7 @@
 					id="{{../_id}}-menu-item-{{@index}}"
 					.icon="{{this.item.icon}}"
 					accessible-name={{this.item.ariaLabelledByText}}
-					accessible-role="treeitem"
+					accessible-role="TreeItem"
 					.additionalText="{{this.item._additionalText}}"
 					.ariaHasPopup={{this.ariaHasPopup}}
 					?disabled={{this.item.disabled}}

diff --git a/packages/main/src/Tree.ts b/packages/main/src/Tree.ts
@@ -15,6 +15,7 @@ import type TreeItemBase from "./TreeItemBase.js";
 import TreeItemCustom from "./TreeItemCustom.js";
 import TreeList from "./TreeList.js";
 import ListSelectionMode from "./types/ListSelectionMode.js";
+import ListAccessibleRole from "./types/ListAccessibleRole.js";
 import type {
 	TreeItemBaseToggleEventDetail,
 	TreeItemBaseStepInEventDetail,
@@ -327,7 +328,7 @@ class Tree extends UI5Element {
 	}
 
 	get _role() {
-		return "tree";
+		return ListAccessibleRole.Tree;
 	}
 
 	get _label() {

diff --git a/packages/main/src/types/ListAccessibleRole.ts b/packages/main/src/types/ListAccessibleRole.ts
@@ -0,0 +1,34 @@
+/**
+ * List accessible roles.
+ * @public
+ * @since 2.0.0
+ */
+enum ListAccessibleRole {
+
+	/**
+	 * Represents the ARIA role "list". (by default)
+	 * @public
+	 */
+	List = "List",
+
+	/**
+	 * Represents the ARIA role "menu".
+	 * @public
+	 */
+	Menu = "Menu",
+
+	/**
+	 * Represents the ARIA role "tree".
+	 * @public
+	 */
+	Tree = "Tree",
+
+	/**
+	 * Represents the ARIA role "listbox".
+	 * @public
+	 */
+	ListBox = "ListBox"
+
+}
+
+export default ListAccessibleRole;
diff --git a/packages/main/src/types/ListItemAccessibleRole.ts b/packages/main/src/types/ListItemAccessibleRole.ts
@@ -0,0 +1,40 @@
+/**
+ * ListItem accessible roles.
+ * @public
+ * @since 2.0.0
+ */
+enum ListItemAccessibleRole {
+
+	/**
+	 * Represents the ARIA role "listitem". (by default)
+	 * @public
+	 */
+	ListItem = "ListItem",
+
+	/**
+	 * Represents the ARIA role "menuitem".
+	 * @public
+	 */
+	MenuItem = "MenuItem",
+
+	/**
+	 * Represents the ARIA role "treeitem".
+	 * @public
+	 */
+	TreeItem = "TreeItem",
+
+	/**
+	 * Represents the ARIA role "option".
+	 * @public
+	 */
+	Option = "Option",
+
+	/**
+	 * Represents the ARIA role "none".
+	 * @public
+	 */
+	None = "None"
+
+}
+
+export default ListItemAccessibleRole;
diff --git a/packages/main/test/specs/Menu.spec.js b/packages/main/test/specs/Menu.spec.js
@@ -213,8 +213,8 @@ describe("Menu Accessibility", () => {
 		const list = await popover.$("ui5-list");
 		const listItems = await popover.$("ui5-list").$$("ui5-menu-li");
 
-		assert.strictEqual(await list.getAttribute("accessible-role"), "menu", "There is proper 'menu' role for the menu list");
-		assert.strictEqual(await listItems[0].getAttribute("accessible-role"), "menuitem", "There is proper 'menuitem' role for the menu list items");
+		assert.strictEqual(await list.getAttribute("accessible-role"), "Menu", "There is proper 'menu' role for the menu list");
+		assert.strictEqual(await listItems[0].getAttribute("accessible-role"), "MenuItem", "There is proper 'menuitem' role for the menu list items");
 		assert.strictEqual(await listItems[0].getAttribute("tooltip"), "Select a file - prevent default", "There is a tooltip");
 		assert.strictEqual(await listItems[2].shadow$(".ui5-li-root").getAttribute("aria-haspopup"), "menu", "There is an aria-haspopup attribute");
 		assert.strictEqual(