diff --git a/packages/base/src/util/isValidPropertyName.js b/packages/base/src/util/isValidPropertyName.js
index 76781ffa720c..10f22b3a3e86 100644
--- a/packages/base/src/util/isValidPropertyName.js
+++ b/packages/base/src/util/isValidPropertyName.js
@@ -1,6 +1,10 @@
// 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"];
+const whitelist = [
+ "disabled",
+ "ariaLabel",
+ "ariaExpanded",
+];
/**
* Checks whether a property name is valid (does not collide with existing DOM API properties)
diff --git a/packages/main/src/Button.hbs b/packages/main/src/Button.hbs
index ba3e2ed84654..ece21c109667 100644
--- a/packages/main/src/Button.hbs
+++ b/packages/main/src/Button.hbs
@@ -1,42 +1,42 @@
{{#*inline "ariaPressed"}}{{/inline}}
diff --git a/packages/main/src/Button.js b/packages/main/src/Button.js
index b01522d1cd2d..039b66868ea3 100644
--- a/packages/main/src/Button.js
+++ b/packages/main/src/Button.js
@@ -153,6 +153,16 @@ const metadata = {
defaultValue: "",
},
+ /**
+ * @type {String}
+ * @defaultvalue ""
+ * @public
+ * @since 1.0.0-rc.8
+ */
+ ariaExpanded: {
+ type: String,
+ },
+
/**
* Indicates if the element if focusable
* @private
@@ -340,7 +350,7 @@ class Button extends UI5Element {
get accInfo() {
return {
- "ariaExpanded": this._buttonAccInfo && this._buttonAccInfo.ariaExpanded,
+ "ariaExpanded": this.ariaExpanded || (this._buttonAccInfo && this._buttonAccInfo.ariaExpanded),
"ariaControls": this._buttonAccInfo && this._buttonAccInfo.ariaControls,
"ariaHaspopup": this._buttonAccInfo && this._buttonAccInfo.ariaHaspopup,
"title": this._buttonAccInfo && this._buttonAccInfo.title,
diff --git a/packages/main/test/pages/Button.html b/packages/main/test/pages/Button.html
index 287c33c16a14..553fed99f651 100644
--- a/packages/main/test/pages/Button.html
+++ b/packages/main/test/pages/Button.html
@@ -41,7 +41,7 @@
Press
- Action Bar Button
+ Action Bar Button
Primary
button
Secondary button
Inactive
diff --git a/packages/main/test/specs/Button.spec.js b/packages/main/test/specs/Button.spec.js
index 255c61e63b0e..ac12cf7d3738 100644
--- a/packages/main/test/specs/Button.spec.js
+++ b/packages/main/test/specs/Button.spec.js
@@ -16,7 +16,7 @@ describe("Button general interaction", () => {
button.setAttribute("icon", "add");
assert.strictEqual(button.shadow$$("ui5-icon").length, 1, "icon is present");
-
+
button.setAttribute("icon", "");
assert.strictEqual(button.shadow$$("ui5-icon").length, 0, "icon is not present");
});
@@ -78,4 +78,19 @@ describe("Button general interaction", () => {
assert.strictEqual(field.getProperty("value"), "6", "click should be called 6 times");
});
+
+ it("setting aria-expanded on the host is reflected on the button tag", () => {
+ const button = browser.$("#button1");
+ const innerButton = button.shadow$("button");
+
+ assert.strictEqual(innerButton.getAttribute("aria-expanded"), "true", "Attribute is reflected");
+
+ button.setAttribute("aria-expanded", "false");
+
+ assert.strictEqual(innerButton.getAttribute("aria-expanded"), "false", "Attribute is reflected");
+
+ button.removeAttribute("aria-expanded");
+
+ assert.strictEqual(innerButton.getAttribute("aria-expanded"), null, "Attribute is reflected");
+ })
});