feat(ui5-popup): add support for aria-label (#1898)

Author: vladitasev

packages/main/src/Dialog.js

@@ -127,7 +127,7 @@ class Dialog extends Popup {
 	}
 
 	get _ariaLabelledBy() { // Required by Popup.js
-		return "ui5-popup-header";
+		return this.ariaLabel ? undefined : "ui5-popup-header";
 	}
 
 	get _ariaModal() { // Required by Popup.js

packages/main/src/Input.js

@@ -272,6 +272,8 @@ const metadata = {
 		},
 
 		/**
+		 * Defines the aria-label attribute for the input
+		 *
 		 * @type {String}
 		 * @since 1.0.0-rc.8
 		 * @private

packages/main/src/Popover.js

@@ -599,7 +599,7 @@ class Popover extends Popup {
 	}
 
 	get _ariaLabelledBy() { // Required by Popup.js
-		return "ui5-popup-header";
+		return this.ariaLabel ? undefined : "ui5-popup-header";
 	}
 
 	get _ariaModal() { // Required by Popup.js

packages/main/src/Popup.hbs

@@ -1,4 +1,11 @@
-<section style="{{styles.root}}" class="{{classes.root}}" role="dialog" aria-modal="{{_ariaModal}}" aria-labelledby="{{_ariaLabelledBy}}">
+<section
+	style="{{styles.root}}"
+	class="{{classes.root}}"
+	role="dialog"
+	aria-modal="{{_ariaModal}}"
+	aria-label="{{_ariaLabel}}"
+	aria-labelledby="{{_ariaLabelledBy}}"
+>
 
 	<span class="first-fe" data-ui5-focus-trap tabindex="0" @focusin={{forwardToLast}}></span>
 

packages/main/src/Popup.js

@@ -48,6 +48,19 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Defines the aria-label attribute for the popup
+		 *
+		 * @type {String}
+		 * @defaultvalue: ""
+		 * @private
+		 * @since 1.0.0-rc.8
+		 */
+		ariaLabel: {
+			type: String,
+			defaultValue: undefined,
+		},
+
 		/**
 		 * @private
 		 */
@@ -390,6 +403,14 @@ class Popup extends UI5Element {
 	 */
 	get _ariaModal() {} // eslint-disable-line
 
+	/**
+	 * Ensures ariaLabel is never null or empty string
+	 * @returns {String|undefined}
+	 * @protected
+	 */
+	get _ariaLabel() {
+		return this.ariaLabel || undefined;
+	}
 
 	get styles() {
 		return {

packages/main/test/pages/Popover.html

@@ -60,7 +60,7 @@
 
 	<ui5-button id="btn">Click me !</ui5-button>
 
-	<ui5-popover header-text="My Heading" id="pop" style="width: 300px" placement-type="Top">
+	<ui5-popover header-text="My Heading" id="pop" style="width: 300px" placement-type="Top" aria-label="This popover is important">
 		<div slot="header">
 			<ui5-button id="first-focusable">I am in the header</ui5-button>
 		</div>
@@ -355,4 +355,4 @@
 	</script>
 </body>
 
-</html>
+</html>

packages/main/test/specs/Dialog.spec.js

@@ -10,7 +10,7 @@ describe("Dialog general interaction", () => {
 		btnOpenDialog.click();
 
 		const dialog = browser.$("#dialog");
-		
+
 		assert.ok(dialog.isDisplayedInViewport(), "Dialog is opened.");
 
 		btnCloseDialog.click();
@@ -32,3 +32,19 @@ describe("Dialog general interaction", () => {
 		assert.ok(popoverZIndex > dialogZIndex, "Popover is above dialog.");
 	});
 });
+
+
+describe("Acc", () => {
+	browser.url("http://localhost:8080/test-resources/pages/Dialog.html");
+
+	it("tests aria-labelledby and aria-label", () => {
+		const dialog = browser.$("ui5-dialog");
+		dialog.removeAttribute("aria-label");
+		assert.ok(dialog.shadow$(".ui5-popup-root").getAttribute("aria-labelledby").length, "dialog has aria-labelledby.");
+		assert.ok(!dialog.shadow$(".ui5-popup-root").getAttribute("aria-label"), "dialog does not have aria-label.");
+
+		dialog.setAttribute("aria-label", "text");
+		assert.ok(!dialog.shadow$(".ui5-popup-root").getAttribute("aria-labelledby"), "dialog does not have aria-labelledby.");
+		assert.ok(dialog.shadow$(".ui5-popup-root").getAttribute("aria-label").length, "dialog has aria-label.");
+	});
+});

packages/main/test/specs/Popover.spec.js

@@ -180,3 +180,18 @@ describe("Popover general interaction", () => {
 		assert.ok(ff.getProperty("focused"), "The first focusable element is focused.");
 	});
 });
+
+describe("Acc", () => {
+	browser.url("http://localhost:8080/test-resources/pages/Popover.html");
+
+	it("tests aria-labelledby and aria-label", () => {
+		const popover = browser.$("ui5-popover");
+		popover.removeAttribute("aria-label");
+		assert.ok(popover.shadow$(".ui5-popup-root").getAttribute("aria-labelledby").length, "Popover has aria-labelledby.");
+		assert.ok(!popover.shadow$(".ui5-popup-root").getAttribute("aria-label"), "Popover does not have aria-label.");
+
+		popover.setAttribute("aria-label", "text");
+		assert.ok(!popover.shadow$(".ui5-popup-root").getAttribute("aria-labelledby"), "Popover does not have aria-labelledby.");
+		assert.ok(popover.shadow$(".ui5-popup-root").getAttribute("aria-label").length, "Popover has aria-label.");
+	});
+});