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 @@