refactor(ui5-*): use unified API to define a11y attributes via accessibilityAttributes

packages/base/src/types.ts

@@ -45,8 +45,17 @@ type AccessibilityInfo = {
 	children?: Array<HTMLElement>,
 }
 
+type AccessibilityAttributes = {
+	expanded?: "true" | "false" | boolean,
+	hasPopup?: "dialog" | "grid" | "menu" | "listbox" | "tree",
+	controls?: LowercaseString<string>
+	ariaSetsize?: number,
+	ariaPosinset?: number,
+}
+
 export type {
 	AccessibilityInfo,
+	AccessibilityAttributes,
 	PromiseResolve,
 	Timeout,
 	Interval,

packages/fiori/src/NotificationListGroupItem.hbs

@@ -15,7 +15,7 @@
 			@click="{{_onBtnToggleClick}}"
 			class="ui5-nli-group-toggle-btn"
 			tooltip="{{toggleBtnAccessibleName}}"
-			aria-label="{{toggleBtnAccessibleName}}"
+			accessible-name="{{toggleBtnAccessibleName}}"
 		></ui5-button>
 
 		{{#if hasPriority}}
@@ -43,7 +43,7 @@
 					@click="{{_onBtnOverflowClick}}"
 					class="ui5-nli-overflow-btn"
 					tooltip="{{overflowBtnAccessibleName}}"
-					aria-label="{{overflowBtnAccessibleName}}"
+					accessible-name="{{overflowBtnAccessibleName}}"
 				></ui5-button>
 			{{else}}
 				{{#each standardActions}}
@@ -67,7 +67,7 @@
 				design="Transparent"
 				@click="{{_onBtnCloseClick}}"
 				tooltip="{{closeBtnAccessibleName}}"
-				aria-label="{{closeBtnAccessibleName}}"
+				accessible-name="{{closeBtnAccessibleName}}"
 				close-btn
 			></ui5-button>
 		{{/if}}

packages/fiori/src/NotificationListItem.hbs

@@ -17,7 +17,7 @@
 				@click="{{_onBtnOverflowClick}}"
 				class="ui5-nli-overflow-btn"
 				tooltip="{{overflowBtnAccessibleName}}"
-				aria-label="{{overflowBtnAccessibleName}}"
+				accessible-name="{{overflowBtnAccessibleName}}"
 			></ui5-button>
 		{{else}}
 			{{#each standardActions}}
@@ -40,7 +40,7 @@
 				design="Transparent"
 				@click="{{_onBtnCloseClick}}"
 				tooltip="{{closeBtnAccessibleName}}"
-				aria-label="{{closeBtnAccessibleName}}"
+				accessible-name="{{closeBtnAccessibleName}}"
 				close-btn
 			></ui5-button>
 		{{/if}}

packages/fiori/src/ShellBar.ts

@@ -27,7 +27,7 @@ import "@ui5/webcomponents-icons/dist/search.js";
 import "@ui5/webcomponents-icons/dist/bell.js";
 import "@ui5/webcomponents-icons/dist/overflow.js";
 import "@ui5/webcomponents-icons/dist/grid.js";
-import type { Timeout, ClassMap } from "@ui5/webcomponents-base/dist/types.js";
+import type { Timeout, ClassMap, AccessibilityAttributes } from "@ui5/webcomponents-base/dist/types.js";
 import type ListItemBase from "@ui5/webcomponents/dist/ListItemBase.js";
 import PopoverHorizontalAlign from "@ui5/webcomponents/dist/types/PopoverHorizontalAlign.js";
 import type ShellBarItem from "./ShellBarItem.js";
@@ -64,10 +64,7 @@ type ShellBarAccessibilityTexts = {
 	profileButtonTitle?: string;
 };
 
-type ShellBarAccessibilityAttributesValue = {
-	expanded?: "true" | "false" | boolean,
-	ariaHasPopup?: `${HasPopup}`,
-}
+type ShellBarAccessibilityAttributesValue = Pick<AccessibilityAttributes, "expanded" | "hasPopup">;
 
 type ShellBarAccessibilityAttributes = {
 	notifications?: ShellBarAccessibilityAttributesValue;
@@ -386,22 +383,21 @@ class ShellBar extends UI5Element {
 	accessibilityTexts!: ShellBarAccessibilityTexts;
 
 	/**
-	 * An object of strings that defines several additional accessibility attribute values
-	 * for customization depending on the use case.
+	 * Defines additional accessibility attributes for the following areas of the component:
+	 * - notifications
+	 * - profile
+	 * - product
+	 * - search
+	 * - overflow
 	 *
-	 * It supports the following fields:
+	 * The following accessibility attributes are available for each area, described above:
 	 *
-	 * - `expanded`: Indicates whether the anchor element, or another grouping element it controls, is currently expanded or collapsed. Accepts the following string values:
+	 * - **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.
+	 * Accepts the following string values: `true` | `false`
 	 *
-	 *	- `true`
-	 *	- `false`
+	 * - **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.
+	 * Accepts the following string values: `dialog` | `grid` | listbox` | `menu` | `tree`.
 	 *
-	 * - `hasPopup`: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the anchor element. Accepts the following string values:
-	 *	- `Dialog`
-	 *	- `Grid`
-	 *	- `ListBox`
-	 *	- `Menu`
-	 *	- `Tree`
 	 * @default {}
 	 * @public
 	 * @since 1.10.0
@@ -1272,63 +1268,38 @@ class ShellBar extends UI5Element {
 			notifications: {
 				"title": this._notificationsText,
 				"accessibilityAttributes": {
-					hasPopup: this._notificationsHasPopup,
+					hasPopup: this.accessibilityAttributes.notifications?.hasPopup,
 				},
 			},
 			profile: {
 				"title": this._profileText,
 				"accessibilityAttributes": {
-					hasPopup: this._profileHasPopup,
+					hasPopup: this.accessibilityAttributes.profile?.hasPopup,
 				},
 			},
 			products: {
 				"title": this._productsText,
 				"accessibilityAttributes": {
-					hasPopup: this._productsHasPopup,
+					hasPopup: this.accessibilityAttributes.product?.hasPopup,
 				},
 			},
 			search: {
 				"title": this._searchText,
 				"accessibilityAttributes": {
-					hasPopup: this._searchHasPopup,
+					hasPopup: this.accessibilityAttributes.search?.hasPopup,
 					expanded: this.showSearchField,
 				},
 			},
 			overflow: {
 				"title": this._overflowText,
 				"accessibilityAttributes": {
-					hasPopup: this._overflowHasPopup,
+					hasPopup: this.accessibilityAttributes.overflow?.hasPopup || HasPopup.Menu.toLowerCase(),
 					expanded: this._overflowPopoverExpanded,
 				},
 			},
 		};
 	}
 
-	get _notificationsHasPopup() {
-		const notificationsAccAttributes = this.accessibilityAttributes.notifications;
-		return notificationsAccAttributes ? notificationsAccAttributes.ariaHasPopup?.toLowerCase() : null;
-	}
-
-	get _profileHasPopup() {
-		const profileAccAttributes = this.accessibilityAttributes.profile;
-		return profileAccAttributes ? profileAccAttributes.ariaHasPopup?.toLowerCase() : null;
-	}
-
-	get _productsHasPopup() {
-		const productsAccAttributes = this.accessibilityAttributes.product;
-		return productsAccAttributes ? productsAccAttributes.ariaHasPopup?.toLowerCase() : null;
-	}
-
-	get _searchHasPopup() {
-		const searcAccAttributes = this.accessibilityAttributes.search;
-		return searcAccAttributes ? searcAccAttributes.ariaHasPopup?.toLowerCase() : null;
-	}
-
-	get _overflowHasPopup() {
-		const overflowAccAttributes = this.accessibilityAttributes.overflow;
-		return overflowAccAttributes ? overflowAccAttributes.ariaHasPopup?.toLowerCase() : HasPopup.Menu.toLowerCase();
-	}
-
 	get accLogoRole() {
 		return this.accessibilityRoles.logoRole || "button";
 	}

packages/fiori/src/SideNavigationItemBase.ts

@@ -44,7 +44,7 @@ class SideNavigationItemBase extends UI5Element implements ITabbable {
 	 * A tooltip attribute should be provided, in order to represent meaning/function, when the component is collapsed(icon only is visualized).
 	 * @default ""
 	 * @public
-	 * @since 2.0
+	 * @since 2.0.0
 	 */
 	@property()
 	tooltip!: string;

packages/fiori/test/pages/ShellBar.html

@@ -51,7 +51,7 @@
 	<script>
 		sbAccAttr.accessibilityAttributes = {
 			notifications: {
-				ariaHasPopup: "Dialog"
+				hasPopup: "dialog"
 			},
 		};
 	</script>

packages/fiori/test/specs/NotificationList.spec.js

@@ -126,13 +126,14 @@ describe("Notification List Item Tests", () => {
 		const groupItem = await browser.$("#nlgi3");
 		const goupItemRoot = await groupItem.shadow$(".ui5-nli-group-root");
 		const goupItemToggleBtn = await groupItem.shadow$(".ui5-nli-group-toggle-btn");
+		const goupItemToggleBtnInner = await goupItemToggleBtn.shadow$("button");
 		const TOGGLE_BUTTON_EXPAND_GROUP = "Expand Group";
 		const TOGGLE_BUTTON_COLLAPSE_GROUP = "Collapse Group";
 
 		// assert
 		assert.strictEqual(await goupItemRoot.getAttribute("aria-expanded"), "false",
 			"The aria-expanded value is correct.");
-		assert.strictEqual(await goupItemToggleBtn.getAttribute("aria-label"), TOGGLE_BUTTON_EXPAND_GROUP,
+		assert.strictEqual(await goupItemToggleBtnInner.getAttribute("aria-label"), TOGGLE_BUTTON_EXPAND_GROUP,
 			"The aria-label value is correct.");
 
 		// act
@@ -141,7 +142,7 @@ describe("Notification List Item Tests", () => {
 		// assert
 		assert.strictEqual(await goupItemRoot.getAttribute("aria-expanded"), "true",
 			"The aria-expanded value is correct.");
-		assert.strictEqual(await goupItemToggleBtn.getAttribute("aria-label"), TOGGLE_BUTTON_COLLAPSE_GROUP,
+		assert.strictEqual(await goupItemToggleBtnInner.getAttribute("aria-label"), TOGGLE_BUTTON_COLLAPSE_GROUP,
 			"The aria-label value is correct.");
 	});
 

packages/fiori/test/specs/ShellBar.spec.js

@@ -57,8 +57,9 @@ describe("Component Behavior", () => {
 		it("tests accessibilityAttributes property", async () => {
 			const NOTIFICATIONS_BTN_ARIA_HASPOPUP = "dialog";
 			const sb = await browser.$("#sbAccAttr");
+			const accAttrs = await sb.getProperty("accInfo");
 
-			assert.strictEqual(await sb.getProperty("_notificationsHasPopup"), NOTIFICATIONS_BTN_ARIA_HASPOPUP,
+			assert.strictEqual(accAttrs.notifications.accessibilityAttributes.hasPopup, NOTIFICATIONS_BTN_ARIA_HASPOPUP,
 				"Notifications aria-haspopup could be customized.");
 		});
 	});

packages/main/src/Avatar.ts

@@ -4,6 +4,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import type { AccessibilityAttributes } from "@ui5/webcomponents-base/dist/types.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
@@ -30,6 +31,8 @@ import AvatarColorScheme from "./types/AvatarColorScheme.js";
 import "@ui5/webcomponents-icons/dist/employee.js";
 import "@ui5/webcomponents-icons/dist/alert.js";
 
+type AvatarAccessibilityAttributes = Pick<AccessibilityAttributes, "hasPopup">;
+
 /**
  * @class
  * ### Overview
@@ -191,12 +194,18 @@ class Avatar extends UI5Element implements ITabbable, IAvatarGroupItem {
 	accessibleName!: string;
 
 	/**
-	 * Defines the aria-haspopup value of the component when `interactive` property is `true`.
-	 * @since 1.0.0-rc.15
-	 * @protected
+	 * Defines the additional accessibility attributes that will be applied to the component.
+	 * The following field is supported:
+	 *
+	 * - **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.
+	 * Accepts the following string values: `dialog` | `grid` | listbox` | `menu` | `tree`.
+	 *
+	 * @public
+	 * @since 2.0.0
+	 * @default {}
 	 */
-	@property()
-	ariaHaspopup!: string;
+	@property({ type: Object })
+	accessibilityAttributes!: AvatarAccessibilityAttributes;
 
 	@property({ noAttribute: true })
 	forcedTabIndex!: string;
@@ -400,14 +409,19 @@ class Avatar extends UI5Element implements ITabbable, IAvatarGroupItem {
 	}
 
 	_getAriaHasPopup() {
-		if (!this._interactive || this.ariaHaspopup === "") {
+		const ariaHaspopup = this.accessibilityAttributes.hasPopup;
+
+		if (!this._interactive || !ariaHaspopup) {
 			return;
 		}
 
-		return this.ariaHaspopup;
+		return ariaHaspopup;
 	}
 }
 
 Avatar.define();
 
 export default Avatar;
+export type {
+	AvatarAccessibilityAttributes,
+};

packages/main/src/AvatarGroup.hbs

@@ -18,7 +18,7 @@
 		{{else}}
 			<ui5-button
 				.accessibilityAttributes="{{_overflowButtonAccAttributes}}"
-				aria-label="{{_overflowButtonAriaLabelText}}"
+				accessible-name="{{_overflowButtonAriaLabelText}}"
 				?hidden="{{_overflowBtnHidden}}"
 				?non-interactive={{_isGroup}}
 				class="{{classes.overflowButton}}"

packages/main/src/AvatarGroup.ts

@@ -9,6 +9,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import type { AccessibilityAttributes } from "@ui5/webcomponents-base/dist/types.js";
 
 import {
 	isEnter,
@@ -73,6 +74,8 @@ const offsets = {
 	},
 };
 
+type AvatarGroupAccessibilityAttributes = Pick<AccessibilityAttributes, "hasPopup">;
+
 type AvatarGroupClickEventDetail = {
 	targetRef: HTMLElement,
 	overflowButtonClicked: boolean,
@@ -185,15 +188,18 @@ class AvatarGroup extends UI5Element {
 	type!: `${AvatarGroupType}`;
 
 	/**
-	 * Defines the aria-haspopup value of the component on:
+	 * Defines the additional accessibility attributes that will be applied to the component.
+	 * The following field is supported:
+	 *
+	 * - **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.
+	 * Accepts the following string values: `dialog` | `grid` | listbox` | `menu` | `tree`.
 	 *
-	 * -  the whole container when `type` property is `Group`
-	 * -  the default "More" overflow button when `type` is `Individual`
-	 * @since 1.0.0-rc.15
-	 * @protected
+	 * @public
+	 * @since 2.0.0
+	 * @default {}
 	 */
-	@property()
-	ariaHaspopup!: string;
+	 @property({ type: Object })
+	 accessibilityAttributes!: AvatarGroupAccessibilityAttributes;
 
 	/**
 	 * @private
@@ -577,11 +583,7 @@ class AvatarGroup extends UI5Element {
 	}
 
 	_getAriaHasPopup() {
-		if (this.ariaHaspopup === "") {
-			return;
-		}
-
-		return this.ariaHaspopup;
+		return this.accessibilityAttributes.hasPopup;
 	}
 }
 
@@ -590,5 +592,6 @@ AvatarGroup.define();
 export default AvatarGroup;
 export type {
 	AvatarGroupClickEventDetail,
+	AvatarGroupAccessibilityAttributes,
 	IAvatarGroupItem,
 };

packages/main/src/Breadcrumbs.hbs

@@ -8,8 +8,8 @@
 		<li class="ui5-breadcrumbs-dropdown-arrow-link-wrapper" ?hidden="{{_isOverflowEmpty}}">
 			<ui5-link @ui5-click="{{_openRespPopover}}"
 				accessible-role="button"
-				aria-label="{{_dropdownArrowAccessibleNameText}}"
-				aria-haspopup="{{_ariaHasPopup}}">
+				accessible-name="{{_dropdownArrowAccessibleNameText}}"
+				.accessibilityAttributes="{{linkAccessibilityAttributes}}">
 				<ui5-icon name="slim-arrow-down" title="{{_dropdownArrowAccessibleNameText}}"></ui5-icon>
 			</ui5-link>
 		</li>