feat(ui5-popup): add accessibleNameRef property (#4517)

SAP · Jan 4, 2022 · 0a7c1f3 · 0a7c1f3
1 parent 14a2a03
commit 0a7c1f3
Show file tree

Hide file tree

Showing 9 changed files with 85 additions and 28 deletions.
diff --git a/packages/main/src/Dialog.js b/packages/main/src/Dialog.js
@@ -66,17 +66,6 @@ const metadata = {
 			type: String,
 		},
 
-		/**
-		 * Sets the accessible aria name of the component.
-		 *
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		accessibleName: {
-			type: String,
-		},
-
 		/**
 		 * Determines whether the component should be stretched to fullscreen.
 		 * <br><br>
@@ -237,23 +226,13 @@ class Dialog extends Popup {
 	get _ariaLabelledBy() { // Required by Popup.js
 		let ariaLabelledById;
 
-		if (this.headerText !== "" && !this.accessibleName) {
+		if (this.headerText !== "" && !this._ariaLabel) {
 			ariaLabelledById = "ui5-popup-header-text";
 		}
 
 		return ariaLabelledById;
 	}
 
-	get _ariaLabel() {
-		let ariaLabel;
-
-		if (this.header.length > 0 && !!this.accessibleName) {
-			ariaLabel = this.accessibleName;
-		}
-
-		return this.accessibleName ? this.accessibleName : ariaLabel;
-	}
-
 	get _ariaModal() { // Required by Popup.js
 		return true;
 	}

diff --git a/packages/main/src/Popover.js b/packages/main/src/Popover.js
@@ -748,7 +748,7 @@ class Popover extends Popup {
 	}
 
 	get _ariaLabelledBy() { // Required by Popup.js
-		return this.accessibleName ? undefined : "ui5-popup-header";
+		return this._ariaLabel ? undefined : "ui5-popup-header";
 	}
 
 	get _ariaModal() { // Required by Popup.js

diff --git a/packages/main/src/Popup.js b/packages/main/src/Popup.js
@@ -3,6 +3,7 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import { isChrome } from "@ui5/webcomponents-base/dist/Device.js";
 import { getFirstFocusableElement, getLastFocusableElement } from "@ui5/webcomponents-base/dist/util/FocusableElements.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import { hasStyle, createStyle } from "@ui5/webcomponents-base/dist/ManagedStyles.js";
 import { isTabPrevious } from "@ui5/webcomponents-base/dist/Keys.js";
 import { getNextZIndex, getFocusedElement, isFocusedElementWithinNode } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
@@ -68,7 +69,7 @@ const metadata = {
 		},
 
 		/**
-		 * Sets the accessible aria name of the component.
+		 * Defines the accessible name of the component.
 		 *
 		 * @type {String}
 		 * @defaultvalue ""
@@ -80,6 +81,19 @@ const metadata = {
 			defaultValue: undefined,
 		},
 
+		/**
+		 * Defines the IDs of the elements that label the component.
+		 *
+		 * @type {String}
+		 * @defaultvalue ""
+		 * @public
+		 * @since 1.1.0
+		 */
+		accessibleNameRef: {
+			type: String,
+			defaultValue: "",
+		},
+
 		/**
 		 * @private
 		 */
@@ -535,7 +549,7 @@ class Popup extends UI5Element {
 	 * @protected
 	 */
 	get _ariaLabel() {
-		return this.accessibleName || undefined;
+		return getEffectiveAriaLabelText(this);
 	}
 
 	get _root() {

diff --git a/packages/main/src/ResponsivePopover.hbs b/packages/main/src/ResponsivePopover.hbs
@@ -1,5 +1,7 @@
 {{#if _isPhone}}
 	<ui5-dialog
+		accessible-name={{accessibleName}}
+		accessible-name-ref={{accessibleNameRef}}
 		?with-padding={{withPadding}}
 		stretch
 		_disable-initial-focus

diff --git a/packages/main/test/pages/Dialog.html b/packages/main/test/pages/Dialog.html
@@ -374,6 +374,18 @@
 
 	<ui5-dialog id="empty-dialog">Empty</ui5-dialog>
 
+	<br>
+	<br>
+
+	<ui5-button id="btn-acc-name-ref">Dialog with accessibleNameRef</ui5-button>
+	<ui5-label id="label-acc-name-ref">Some label</ui5-label>
+	<ui5-dialog id="dialog-acc-name-ref" accessible-name-ref="label-acc-name-ref" stretch>
+		<div slot="header">
+			<ui5-title level="H2">Header</ui5-title>
+		</div>
+		<span>Hello World!</span>
+	</ui5-dialog>
+
 	<span id="scrollHelper" class="dialog9auto">SCroll Helper</span>
 
 	<script>
@@ -474,6 +486,10 @@
 			dialog.show();
 		});
 
+		window["btn-acc-name-ref"].addEventListener("click", function () {
+			window["dialog-acc-name-ref"].show();
+		});
+
 	</script>
 </body>
 

diff --git a/packages/main/test/pages/Popover.html b/packages/main/test/pages/Popover.html
@@ -110,9 +110,7 @@
 		</div>
 	</ui5-popover>
 
-
 	<br>
-
 	<br>
 
 	<ui5-select>
@@ -412,6 +410,14 @@
 		<ui5-input></ui5-input>
 	</ui5-popover>
 
+	<br>
+	<br>
+
+	<ui5-button id="btnAccNameRef">Popover with accessibleNameRef</ui5-button>
+	<ui5-label id="lblAccNameRef">Some label</ui5-label>
+	<ui5-popover id="popAccNameRef" accessible-name-ref="lblAccNameRef" header-text="Header text">
+		<span>Hello world</span>
+	</ui5-popover>
 
 	<script>
 		btn.addEventListener("click", function (event) {
@@ -542,6 +548,10 @@
 			popoverRightEdge.showAt(btnRightEdge);
 		});
 
+		btnAccNameRef.addEventListener("click", function () {
+			popAccNameRef.showAt(btnAccNameRef);
+		});
+
 	</script>
 </body>
 

diff --git a/packages/main/test/pages/ResponsivePopover.html b/packages/main/test/pages/ResponsivePopover.html
@@ -16,7 +16,8 @@
 <body class="responsivepopover2auto">
 	<ui5-button id="btnOpen" design="Positive">Open me</ui5-button> <br/>
 	<ui5-button id="btnOpen2" design="Negative">Open me</ui5-button> <br/>
-	<ui5-button id="btnOpen3" design="Negative">Header/Footer hidden on Desktop</ui5-button>
+	<ui5-button id="btnOpen3" design="Negative">Header/Footer hidden on Desktop</ui5-button> <br/>
+	<ui5-button id="btnOpen4" >accessibleName</ui5-button>
 
 	<!-- with header and footer slots -->
 	<ui5-responsive-popover id="respPopover">
@@ -62,6 +63,19 @@
 		</div>
 	</ui5-responsive-popover>
 
+
+	<ui5-responsive-popover id="respPopover4" accessible-name="Some label">
+		<div slot="header">
+			<ui5-title>Header</ui5-title>
+		</div>
+		<div class="popover-content">
+			<span>Hello World</span>
+		</div>
+		<div slot="footer" class="popover-footer">
+			<ui5-button id="btnClose4" design="Emphasized">Close</ui5-button>
+		</div>
+	</ui5-responsive-popover>
+
 	<h2> Inputs based component that opens popover/dialog within dialog</h2>
 	<ui5-button id="btnOpenDialog" design="Emphasized" icon="employee">Open Dialog</ui5-button>
 	<ui5-dialog id="dialog" header-text="Dialog" stretch>
@@ -125,6 +139,14 @@ <h2> Inputs based component that opens popover/dialog within dialog</h2>
 		btnClose3.addEventListener("click", function(event) {
 			respPopover3.close();
 		});
+
+		btnOpen4.addEventListener("click", function(event) {
+			respPopover4.showAt(btnOpen4);
+		});
+		btnClose4.addEventListener("click", function(event) {
+			respPopover4.close();
+		});
+
 		btnOpenDialog.addEventListener('click', function (event) {
 			dialog.show();
 		});

diff --git a/packages/main/test/specs/Dialog.spec.js b/packages/main/test/specs/Dialog.spec.js
@@ -305,6 +305,13 @@ describe("Acc", () => {
 		assert.strictEqual(await dialog.getAttribute("accessible-name"), accName, "dialog has correct attribute set");
 		assert.strictEqual(await dialog.shadow$(".ui5-popup-root").getAttribute("aria-label"), accName, "dialog has aria-label.");
 	});
+
+	it("tests accessible-name-ref", async () => {
+		const dialog = await browser.$("#dialog-acc-name-ref");
+		const expectedText = await browser.$("#label-acc-name-ref").getText();
+
+		assert.strictEqual(await dialog.shadow$(".ui5-popup-root").getAttribute("aria-label"), expectedText, "aria-label should be the text of the label.");
+	});
 });
 
 describe("Page scrolling", () => {

diff --git a/packages/main/test/specs/Popover.spec.js b/packages/main/test/specs/Popover.spec.js
@@ -319,4 +319,11 @@ describe("Acc", () => {
 		assert.notOk(await popover.shadow$(".ui5-popup-root").getAttribute("aria-labelledby"), "Popover does not have aria-labelledby.");
 		assert.ok(await popover.shadow$(".ui5-popup-root").getAttribute("aria-label"), "Popover has aria-label.");
 	});
+
+	it("tests accessible-name-ref", async () => {
+		const popover = await browser.$("#popAccNameRef");
+		const expectedText = await browser.$("#lblAccNameRef").getText();
+
+		assert.strictEqual(await popover.shadow$(".ui5-popup-root").getAttribute("aria-label"), expectedText, "aria-label should be the text of the label.");
+	});
 });