fix(ui5-split-button): provide aria attributes for the arrow button (… (

#9644) Add "aria-haspopup" and title attributes to the arrow button. Fixes: #9295
SAP · Aug 6, 2024 · 89640be · 89640be
1 parent 8c89c42
commit 89640be
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 24 deletions.
diff --git a/packages/main/src/SplitButton.hbs b/packages/main/src/SplitButton.hbs
@@ -34,16 +34,16 @@
 			tabindex="-1"
 			?disabled="{{disabled}}"
 			?active="{{effectiveActiveArrowButton}}"
-			aria-expanded="{{accessibilityInfo.ariaExpanded}}"
-			aria-haspopup="{{accessibilityInfo.ariaHaspopup}}"
+			tooltip="{{accInfo.arrowButton.title}}"
+			.accessibilityAttributes={{accInfo.arrowButton.accessibilityAttributes}}
 			@click="{{_handleArrowButtonAction}}"
 			@mousedown={{_arrowButtonPress}}
 			@mouseup={{_arrowButtonRelease}}
 			@focusin={{_setTabIndexValue}}
 			@ui5-_active-state-change={{_onArrowButtonActiveStateChange}}
 		>
 		</ui5-button>
-	<span id="{{_id}}-invisibleText" class="ui5-hidden-text">{{accessibilityInfo.description}} {{accessibilityInfo.keyboardHint}} {{accessibleName}}</span>
+	<span id="{{_id}}-invisibleText" class="ui5-hidden-text">{{accInfo.root.description}} {{accInfo.root.keyboardHint}} {{accessibleName}}</span>
 	<span id="{{_id}}-invisibleTextDefault" class="ui5-hidden-text">{{textButtonAccText}}</span>
 
 </div>
diff --git a/packages/main/src/SplitButton.ts b/packages/main/src/SplitButton.ts
@@ -23,10 +23,12 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 import ButtonDesign from "./types/ButtonDesign.js";
 import Button from "./Button.js";
+import HasPopup from "./types/HasPopup.js";
 
 import {
 	SPLIT_BUTTON_DESCRIPTION,
 	SPLIT_BUTTON_KEYBOARD_HINT,
+	SPLIT_BUTTON_ARROW_BUTTON_TOOLTIP,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Template
@@ -491,17 +493,26 @@ class SplitButton extends UI5Element {
 		return this.getDomRef()?.querySelector<Button>(".ui5-split-arrow-button");
 	}
 
-	get accessibilityInfo() {
+	get accInfo() {
 		return {
-			// affects arrow button
-			ariaExpanded: this._splitButtonAccInfo && this._splitButtonAccInfo.ariaExpanded,
-			ariaHaspopup: this._splitButtonAccInfo && this._splitButtonAccInfo.ariaHaspopup,
-			// affects root element
-			description: SplitButton.i18nBundle.getText(SPLIT_BUTTON_DESCRIPTION),
-			keyboardHint: SplitButton.i18nBundle.getText(SPLIT_BUTTON_KEYBOARD_HINT),
+			root: {
+				"description": SplitButton.i18nBundle.getText(SPLIT_BUTTON_DESCRIPTION),
+				"keyboardHint": SplitButton.i18nBundle.getText(SPLIT_BUTTON_KEYBOARD_HINT),
+			},
+			arrowButton: {
+				"title": this.arrowButtonTooltip,
+				"accessibilityAttributes": {
+					"hasPopup": (this._splitButtonAccInfo && this._splitButtonAccInfo.ariaHaspopup) || HasPopup.Menu.toLocaleLowerCase(),
+					"expanded": this._splitButtonAccInfo && this._splitButtonAccInfo.ariaExpanded,
+				},
+			},
 		};
 	}
 
+	get arrowButtonTooltip() {
+		return SplitButton.i18nBundle.getText(SPLIT_BUTTON_ARROW_BUTTON_TOOLTIP);
+	}
+
 	get ariaLabelText() {
 		return [SplitButton.i18nBundle.getText(SPLIT_BUTTON_DESCRIPTION), SplitButton.i18nBundle.getText(SPLIT_BUTTON_KEYBOARD_HINT)].join(" ");
 	}

diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties
@@ -502,6 +502,9 @@ SPLIT_BUTTON_DESCRIPTION=Split Button
 #XACT: Aria hint for the keyboard handling support of the Split Button
 SPLIT_BUTTON_KEYBOARD_HINT=Press Space or Enter to trigger default action and Alt + Arrow Down or F4 to trigger arrow action
 
+#XBUT: Tooltip text for 'Arrow' button
+SPLIT_BUTTON_ARROW_BUTTON_TOOLTIP=Open Menu
+
 #XACT: ARIA announcement for the Menu Back button aria-label attribute
 MENU_BACK_BUTTON_ARIA_LABEL=Back
 

diff --git a/packages/main/test/pages/SplitButton.html b/packages/main/test/pages/SplitButton.html
@@ -102,22 +102,22 @@ <h3>Test textContent</h3>
 	</ui5-menu>
 </body>
 <script>
-const splitBtn = document.getElementById("splitBtnWithMenuDefaultActionDefaultAction");
-const menu = document.getElementById("menu");
+	const splitBtn = document.getElementById("splitBtnWithMenuDefaultActionDefaultAction");
+	const menu = document.getElementById("menu");
+
+	splitBtn.addEventListener("ui5-arrow-click", function() {
+		if (menu.open) {
+			menu.close();
+			splitBtn.activeArrowButton = false;
+		} else {
+			menu.showAt(splitBtn);
+			splitBtn.activeArrowButton = true;
+		}
+	});
 
-splitBtn.addEventListener("ui5-arrow-click", function() {
-	if (menu.open) {
-		menu.close();
+	menu.addEventListener("after-close", function() {
 		splitBtn.activeArrowButton = false;
-	} else {
-		menu.showAt(splitBtn);
-		splitBtn.activeArrowButton = true;
-	}
-});
-
-menu.addEventListener("after-close", function() {
-	splitBtn.activeArrowButton = false;
-});
+	});
 
 	var displayEvent = document.getElementById("displayEvent"),
 		displayElement = document.getElementById("displayElement"),

diff --git a/packages/main/test/specs/SplitButton.spec.js b/packages/main/test/specs/SplitButton.spec.js
@@ -146,4 +146,14 @@ describe("Split Button general interaction", () => {
 
 		assert.strictEqual(await field.getValue(), "ui5-arrow-click", "'arrow-click' is fired");
 	});
+
+	it("tests arrow button aria attributes", async () => {
+		await browser.url(`test/pages/SplitButton.html`);
+		const splitButton = await browser.$("#splitBtnWithMenuDefaultActionDefaultAction");
+		const arrowButton = await splitButton.shadow$(".ui5-split-arrow-button");
+		const innerArrowButton = await arrowButton.shadow$("button");
+
+		assert.strictEqual(await arrowButton.getAttribute("tooltip"), "Open Menu", "Tooltip is set");
+		assert.strictEqual(await innerArrowButton.getAttribute("aria-haspopup"), "menu", "Aria attributes set");
+	});
 });