diff --git a/packages/main/src/Select.hbs b/packages/main/src/Select.hbs index 45fc14a5e087..d2d4118fcf0b 100644 --- a/packages/main/src/Select.hbs +++ b/packages/main/src/Select.hbs @@ -5,6 +5,7 @@ id="{{_id}}-select" role="button" aria-haspopup="listbox" + aria-label="{{ariaLabelText}}" aria-labelledby="{{_id}}-label" aria-describedby="{{valueStateTextId}}" aria-disabled="{{isDisabled}}" diff --git a/packages/main/src/Select.js b/packages/main/src/Select.js index 11cc28fd751d..f383f138f1a7 100644 --- a/packages/main/src/Select.js +++ b/packages/main/src/Select.js @@ -12,6 +12,7 @@ import { } from "@ui5/webcomponents-base/dist/Keys.js"; import Integer from "@ui5/webcomponents-base/dist/types/Integer.js"; import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js"; +import getEffectiveAriaLabelText from "@ui5/webcomponents-base/dist/util/getEffectiveAriaLabelText.js"; import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js"; import "@ui5/webcomponents-icons/dist/icons/slim-arrow-down.js"; import { isPhone } from "@ui5/webcomponents-base/dist/Device.js"; @@ -157,6 +158,31 @@ const metadata = { type: Boolean, }, + /** + * Defines the aria-label attribute for the select. + * + * @type {String} + * @since 1.0.0-rc.9 + * @private + * @defaultvalue "" + */ + ariaLabel: { + type: String, + }, + + /** + * Receives id(or many ids) of the elements that label the select. + * + * @type {String} + * @defaultvalue "" + * @private + * @since 1.0.0-rc.9 + */ + ariaLabelledby: { + type: String, + defaultValue: "", + }, + _text: { type: String, noAttribute: true, @@ -576,6 +602,10 @@ class Select extends UI5Element { }; } + get ariaLabelText() { + return getEffectiveAriaLabelText(this); + } + get valueStateMessageText() { return this.getSlottedNodes("valueStateMessage").map(el => el.cloneNode(true)); } diff --git a/packages/main/test/pages/Select.html b/packages/main/test/pages/Select.html index 11918d57e8ac..26b28a3ef2bc 100644 --- a/packages/main/test/pages/Select.html +++ b/packages/main/test/pages/Select.html @@ -75,6 +75,24 @@

Selection not cycling

Change event counter holder

+
+

Select aria-label and aria-labelledby

+ info text +
+ + First + Second + Third + + + + One + Two + Three + +
+
+

Select in Compact

diff --git a/packages/main/test/specs/Select.spec.js b/packages/main/test/specs/Select.spec.js index 214c3144c535..67f45870d571 100644 --- a/packages/main/test/specs/Select.spec.js +++ b/packages/main/test/specs/Select.spec.js @@ -293,4 +293,17 @@ describe("Select general interaction", () => { assert.ok(selectText.getHTML(false).indexOf(EXPECTED_SELECTION_TEXT2) !== -1, "Select label is correct."); }); + + + it("Tests aria-label and aria-labelledby", () => { + const select1 = browser.$("#textAreaAriaLabel").shadow$(".ui5-select-root"); + const select2 = browser.$("#textAreaAriaLabelledBy").shadow$(".ui5-select-root"); + const EXPECTED_ARIA_LABEL1 = "Hello World"; + const EXPECTED_ARIA_LABEL2 = "info text"; + + assert.strictEqual(select1.getAttribute("aria-label"), EXPECTED_ARIA_LABEL1, + "The aria-label is correctly set internally."); + assert.strictEqual(select2.getAttribute("aria-label"), EXPECTED_ARIA_LABEL2, + "The aria-label is correctly set internally."); + }); });