Skip to content

Commit

Permalink
feat(ui5-switch): accessibleNameRef property implemented (#4472)
Browse files Browse the repository at this point in the history
* feat(ui5-switch): accessibleNameRef property implemented

- Receives id(or many ids) of the elements that label the component.
unazko authored Jan 14, 2022

Verified

This commit was signed with the committer’s verified signature.
1 parent b030586 commit 8538de9
Showing 4 changed files with 27 additions and 1 deletion.
1 change: 1 addition & 0 deletions packages/main/src/Switch.hbs
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<div
class="ui5-switch-root {{classes.main}}"
role="checkbox"
aria-label="{{ariaLabelText}}"
aria-checked="{{checked}}"
aria-disabled="{{ariaDisabled}}"
aria-labelledby="{{_id}}-hiddenText"
18 changes: 18 additions & 0 deletions packages/main/src/Switch.js
Original file line number Diff line number Diff line change
@@ -3,6 +3,7 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
import "@ui5/webcomponents-icons/dist/accept.js";
import "@ui5/webcomponents-icons/dist/decline.js";
import "@ui5/webcomponents-icons/dist/less.js";
@@ -95,6 +96,19 @@ const metadata = {
textOff: {
type: String,
},

/**
* Receives id(or many ids) of the elements that label the component.
*
* @type {String}
* @defaultvalue ""
* @public
* @since 1.1.0
*/
accessibleNameRef: {
type: String,
defaultValue: "",
},
},
events: /** @lends sap.ui.webcomponents.main.Switch.prototype */ {

@@ -248,6 +262,10 @@ class Switch extends UI5Element {
return this.checked ? this.accessibilityOnText : this.accessibilityOffText;
}

get ariaLabelText() {
return getEffectiveAriaLabelText(this);
}

static get dependencies() {
return [Icon];
}
3 changes: 2 additions & 1 deletion packages/main/test/pages/Switch.html
Original file line number Diff line number Diff line change
@@ -22,7 +22,8 @@ <h3>Default Switch</h3>
</div>

<div class="switch2auto">
<ui5-switch class="switch3auto" text-on="Yes" text-off="No"></ui5-switch>
<ui5-label id="descriptionText">Use GPS location</ui5-label>
<ui5-switch id="switchAccNameRef" accessible-name-ref="descriptionText" class="switch3auto" text-on="Yes" text-off="No"></ui5-switch>
</div>

<h3>No Label</h3>
6 changes: 6 additions & 0 deletions packages/main/test/specs/Switch.spec.js
Original file line number Diff line number Diff line change
@@ -27,4 +27,10 @@ describe("Switch general interaction", async () => {

assert.strictEqual(await field.getProperty("value"), "3", "Change event should not be called any more");
});

it("setting accessible-name-ref on the host is reflected on the button tag", async () => {
const switchEl = await browser.$("#switchAccNameRef").shadow$("div");

assert.strictEqual(await switchEl.getAttribute("aria-label"), "Use GPS location", "Attribute is reflected");
});
});

0 comments on commit 8538de9

Please sign in to comment.