fix: cast ariaHasPopup acc attribute to lowercase (#8239)

* fix: cast ariaHasPopup acc attribute to lowercase * adjust tests * fix link test --------- Co-authored-by: Nayden Naydenov <nnaydenow.work@sap.com>
SAP · Feb 7, 2024 · 6692284 · 6692284
1 parent 3ea5c66
commit 6692284
Show file tree

Hide file tree

Showing 12 changed files with 25 additions and 17 deletions.
diff --git a/packages/fiori/src/ShellBar.ts b/packages/fiori/src/ShellBar.ts
@@ -1313,27 +1313,27 @@ class ShellBar extends UI5Element {
 
 	get _notificationsHasPopup() {
 		const notificationsAccAttributes = this.accessibilityAttributes.notifications;
-		return notificationsAccAttributes ? notificationsAccAttributes.ariaHasPopup : null;
+		return notificationsAccAttributes ? notificationsAccAttributes.ariaHasPopup?.toLowerCase() : null;
 	}
 
 	get _profileHasPopup() {
 		const profileAccAttributes = this.accessibilityAttributes.profile;
-		return profileAccAttributes ? profileAccAttributes.ariaHasPopup : null;
+		return profileAccAttributes ? profileAccAttributes.ariaHasPopup?.toLowerCase() : null;
 	}
 
 	get _productsHasPopup() {
 		const productsAccAttributes = this.accessibilityAttributes.product;
-		return productsAccAttributes ? productsAccAttributes.ariaHasPopup : null;
+		return productsAccAttributes ? productsAccAttributes.ariaHasPopup?.toLowerCase() : null;
 	}
 
 	get _searchHasPopup() {
 		const searcAccAttributes = this.accessibilityAttributes.search;
-		return searcAccAttributes ? searcAccAttributes.ariaHasPopup : null;
+		return searcAccAttributes ? searcAccAttributes.ariaHasPopup?.toLowerCase() : null;
 	}
 
 	get _overflowHasPopup() {
 		const overflowAccAttributes = this.accessibilityAttributes.overflow;
-		return overflowAccAttributes ? overflowAccAttributes.ariaHasPopup : HasPopup.Menu;
+		return overflowAccAttributes ? overflowAccAttributes.ariaHasPopup?.toLowerCase() : HasPopup.Menu.toLowerCase();
 	}
 
 	get accLogoRole() {

diff --git a/packages/fiori/test/specs/ShellBar.spec.js b/packages/fiori/test/specs/ShellBar.spec.js
@@ -56,7 +56,7 @@ describe("Component Behavior", () => {
 		});
 
 		it("tests accessibilityAttributes property", async () => {
-			const NOTIFICATIONS_BTN_ARIA_HASPOPUP = "Dialog";
+			const NOTIFICATIONS_BTN_ARIA_HASPOPUP = "dialog";
 			const sb = await browser.$("#sbAccAttr");
 
 			assert.strictEqual(await sb.getProperty("_notificationsHasPopup"), NOTIFICATIONS_BTN_ARIA_HASPOPUP,

diff --git a/packages/main/src/Button.hbs b/packages/main/src/Button.hbs
@@ -16,7 +16,7 @@
 	tabindex={{tabIndexValue}}
 	aria-expanded="{{accessibilityAttributes.expanded}}"
 	aria-controls="{{accessibilityAttributes.controls}}"
-	aria-haspopup="{{accessibilityAttributes.hasPopup}}"
+	aria-haspopup="{{_hasPopup}}"
 	aria-label="{{ariaLabelText}}"
 	title="{{buttonTitle}}"
 	part="button"

diff --git a/packages/main/src/Button.ts b/packages/main/src/Button.ts
@@ -473,6 +473,10 @@ class Button extends UI5Element implements IFormElement, IButton {
 		this.active = active;
 	}
 
+	get _hasPopup() {
+		return this.accessibilityAttributes.hasPopup?.toLowerCase();
+	}
+
 	get hasButtonType() {
 		return this.design !== ButtonDesign.Default && this.design !== ButtonDesign.Transparent;
 	}

diff --git a/packages/main/src/DatePicker.ts b/packages/main/src/DatePicker.ts
@@ -717,7 +717,7 @@ class DatePicker extends DateComponentBase implements IFormElement {
 	get accInfo() {
 		return {
 			"ariaRoledescription": this.dateAriaDescription,
-			"ariaHasPopup": HasPopup.Grid,
+			"ariaHasPopup": HasPopup.Grid.toLowerCase(),
 			"ariaAutoComplete": "none",
 			"ariaRequired": this.required,
 			"ariaLabel": getEffectiveAriaLabelText(this),

diff --git a/packages/main/src/Link.hbs b/packages/main/src/Link.hbs
@@ -8,7 +8,7 @@
 	title="{{title}}"
 	?disabled="{{disabled}}"
 	aria-label="{{ariaLabelText}}"
-	aria-haspopup="{{accessibilityAttributes.hasPopup}}"
+	aria-haspopup="{{_hasPopup}}"
 	aria-expanded="{{accessibilityAttributes.expanded}}"
 	@focusin={{_onfocusin}}
 	@focusout={{_onfocusout}}

diff --git a/packages/main/src/Link.ts b/packages/main/src/Link.ts
@@ -321,6 +321,10 @@ class Link extends UI5Element implements ITabbable {
 		return this.accessibleRole.toLowerCase();
 	}
 
+	get _hasPopup() {
+		return this.accessibilityAttributes.hasPopup?.toLowerCase();
+	}
+
 	static async onDefine() {
 		Link.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}

diff --git a/packages/main/src/ListItem.ts b/packages/main/src/ListItem.ts
@@ -56,7 +56,7 @@ type AccInfo = {
 	ariaLabel: string;
 	ariaLabelRadioButton: string;
 	ariaSelectedText?: string;
-	ariaHaspopup?: `${HasPopup}`;
+	ariaHaspopup?: `${Lowercase<HasPopup>}`;
 	posinset?: number;
 	setsize?: number;
 	ariaSelected?: boolean;
@@ -102,8 +102,7 @@ abstract class ListItem extends ListItemBase {
 	/**
 	 * Defines the visual indication and behavior of the list items.
 	 * Available options are <code>Active</code> (by default), <code>Inactive</code>, <code>Detail</code> and <code>Navigation</code>.
-	 * <br><br>
-	 * <b>Note:</b> When set to <code>Active</code> or <code>Navigation</code>, the item will provide visual response upon press and hover,
+	 * <br><br> <b>Note:</b> When set to <code>Active</code> or <code>Navigation</code>, the item will provide visual response upon press and hover,
 	 * while with type <code>Inactive</code> and <code>Detail</code> - will not.
 	 *
 	 * @default "Active"
@@ -485,7 +484,7 @@ abstract class ListItem extends ListItemBase {
 			ariaLabel: ListItem.i18nBundle.getText(ARIA_LABEL_LIST_ITEM_CHECKBOX),
 			ariaLabelRadioButton: ListItem.i18nBundle.getText(ARIA_LABEL_LIST_ITEM_RADIO_BUTTON),
 			ariaSelectedText: this.ariaSelectedText,
-			ariaHaspopup: this.ariaHaspopup || undefined,
+			ariaHaspopup: this.ariaHaspopup?.toLowerCase() as Lowercase<HasPopup> || undefined,
 			setsize: this.accessibilityAttributes.ariaSetsize,
 			posinset: this.accessibilityAttributes.ariaPosinset,
 		};

diff --git a/packages/main/src/Toolbar.ts b/packages/main/src/Toolbar.ts
@@ -280,7 +280,7 @@ class Toolbar extends UI5Element {
 				tooltip: Toolbar.i18nBundle.getText(TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL),
 				accessibilityAttributes: {
 					expanded: this.overflowButtonDOM?.accessibilityAttributes.expanded,
-					hasPopup: HasPopup.Menu,
+					hasPopup: HasPopup.Menu.toLowerCase(),
 				},
 			},
 		};

diff --git a/packages/main/src/TreeItemBase.ts b/packages/main/src/TreeItemBase.ts
@@ -10,6 +10,7 @@ import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
 import ListItem from "./ListItem.js";
 import Icon from "./Icon.js";
+import type HasPopup from "./types/HasPopup.js";
 import "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
 import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
 import {
@@ -267,7 +268,7 @@ class TreeItemBase extends ListItem {
 			ariaSelectedText: this.ariaSelectedText,
 			listItemAriaLabel: !this.accessibleName ? this._ariaLabel : undefined,
 			ariaOwns: this.expanded ? `${this._id}-subtree` : undefined,
-			ariaHaspopup: this.ariaHaspopup || undefined,
+			ariaHaspopup: this.ariaHaspopup?.toLowerCase() as Lowercase<HasPopup> || undefined,
 		};
 
 		return { ...super._accInfo, ...accInfoSettings };

diff --git a/packages/main/test/specs/DatePicker.spec.js b/packages/main/test/specs/DatePicker.spec.js
@@ -15,7 +15,7 @@ describe("Date Picker Tests", () => {
 		assert.ok(await input.isDisplayedInViewport(), "input is rendered");
 		assert.ok(await innerInput.isDisplayedInViewport(), "inner input is rendered");
 		assert.strictEqual(await innerInput.getAttribute("aria-roledescription"), "Date Input", "aria-roledescription attribute is added.");
-		assert.strictEqual(await innerInput.getAttribute("aria-haspopup"), "Grid", "aria-haspopup attribute is added.");
+		assert.strictEqual(await innerInput.getAttribute("aria-haspopup"), "grid", "aria-haspopup attribute is added.");
 		assert.notOk(await innerInput.getAttribute("aria-controls"), "aria-controls attribute isn't rendered.");
 		assert.notOk(await innerInput.getAttribute("aria-expanded"), "aria-expanded attribute isn't rendered.");
 	});

diff --git a/packages/main/test/specs/Link.spec.js b/packages/main/test/specs/Link.spec.js
@@ -83,7 +83,7 @@ describe("General API", () => {
 	it("Open dialog link has propper aria-haspopup attribute", async () => {
 		const link = await browser.$("#signInLink");
 
-		assert.strictEqual(await link.shadow$("a").getAttribute("aria-haspopup"), "Dialog", "Proper aria-haspopup attribute is set");
+		assert.strictEqual(await link.shadow$("a").getAttribute("aria-haspopup"), "dialog", "Proper aria-haspopup attribute is set");
 	});
 
 	it("setting accessible-name applied on the host element is reflected on the anchor tag", async () => {