fix(ui5-button): make aria-label work for ui5-button (#1445)

SAP · Apr 24, 2020 · f0f8964 · f0f8964
1 parent 4e00e55
commit f0f8964
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 6 deletions.
diff --git a/packages/base/src/util/isValidPropertyName.js b/packages/base/src/util/isValidPropertyName.js
@@ -1,12 +1,15 @@
+// Note: disabled is present in IE so we explicitly allow it here.
+// Others, such as ariaLabel, we explicitly override, so valid too
+const whitelist = ["disabled", "ariaLabel"];
+
 /**
  * Checks whether a property name is valid (does not collide with existing DOM API properties)
- * Note: disabled is present in IE so we explicitly allow it here.
  *
  * @param name
  * @returns {boolean}
  */
 const isValidPropertyName = name => {
-	if (name === "disabled") {
+	if (whitelist.includes(name)) {
 		return true;
 	}
 	const classes = [

diff --git a/packages/main/src/Button.hbs b/packages/main/src/Button.hbs
@@ -15,7 +15,7 @@
 		tabindex={{tabIndexValue}}
 		aria-expanded="{{accInfo.ariaExpanded}}"
 		aria-controls="{{accInfo.ariaControls}}"
-		aria-label="{{ariaLabelledByText}}"
+		aria-label="{{ariaLabelText}}"
 		title="{{accInfo.title}}"
 		part="button"
 	>

diff --git a/packages/main/src/Button.js b/packages/main/src/Button.js
@@ -129,6 +129,18 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Defines the aria-label attribute for the button
+		 * @type {String}
+		 * @defaultvalue: ""
+		 * @private
+		 * @since 1.0.0-rc.7
+		 */
+		ariaLabel: {
+			type: String,
+			defaultValue: undefined,
+		},
+
 		/**
 		 * Receives id(or many ids) of the elements that label the button
 		 * @type {String}
@@ -328,8 +340,12 @@ class Button extends UI5Element {
 		};
 	}
 
-	get ariaLabelledByText() {
+	get ariaLabelText() {
 		if (!this.ariaLabelledby) {
+			if (this.ariaLabel) {
+				return this.ariaLabel;
+			}
+
 			return undefined;
 		}
 

diff --git a/packages/main/test/pages/Button.html b/packages/main/test/pages/Button.html
@@ -62,19 +62,24 @@
 	<br/>
 	<br/>
 
-	<ui5-button icon="employee">Action Bar Button</ui5-button>
-	<ui5-button icon="download"></ui5-button>
+	<ui5-button icon="download" aria-label="Download application"></ui5-button>
+	<ui5-button icon="employee" aria-label="Download book">Action Bar Button</ui5-button>
 	<ui5-button icon="download"></ui5-button>
 
 	<br />
 	<br />
 
 	<ui5-label id="1download-text">Download Application</ui5-label>
 	<ui5-label id="download-text2">From This Button</ui5-label>
+
+	<ui5-button icon="employee" aria-label="Help me">Action Bar Button</ui5-button>
+	<ui5-button icon="download" aria-label="Help me" aria-labelledby="1download-text"></ui5-button>
+
 	<ui5-button icon="employee" aria-labelledby="1download-text download-text2">Action Bar Button</ui5-button>
 	<ui5-button icon="download" aria-labelledby="1download-text"></ui5-button>
 
 
+
 	<br/>
 	<br/>
 	<br/>