diff --git a/packages/main/src/DatePicker.js b/packages/main/src/DatePicker.js index af1b1431cb50..90e291051f5a 100644 --- a/packages/main/src/DatePicker.js +++ b/packages/main/src/DatePicker.js @@ -9,6 +9,7 @@ import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js"; import CalendarType from "@ui5/webcomponents-base/dist/types/CalendarType.js"; import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js"; import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js"; +import getEffectiveAriaLabelText from "@ui5/webcomponents-base/dist/util/getEffectiveAriaLabelText.js"; import { isShow, isF4 } from "@ui5/webcomponents-base/dist/Keys.js"; import { isPhone } from "@ui5/webcomponents-base/dist/Device.js"; import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js"; @@ -217,6 +218,31 @@ const metadata = { type: Boolean, }, + /** + * Defines the aria-label attribute for the ui5-date-picker. + * + * @type {String} + * @since 1.0.0-rc.9 + * @private + * @defaultvalue "" + */ + ariaLabel: { + type: String, + }, + + /** + * Receives id(or many ids) of the elements that label the ui5-date-picker. + * + * @type {String} + * @defaultvalue "" + * @private + * @since 1.0.0-rc.9 + */ + ariaLabelledby: { + type: String, + defaultValue: "", + }, + _isPickerOpen: { type: Boolean, noAttribute: true, @@ -660,6 +686,7 @@ class DatePicker extends UI5Element { "ariaExpanded": this.isOpen(), "ariaDescription": this.dateAriaDescription, "ariaRequired": this.required, + "ariaLabel": getEffectiveAriaLabelText(this), }; } diff --git a/packages/main/src/Input.js b/packages/main/src/Input.js index 8834bfbcae78..e4fd18c7f1ab 100644 --- a/packages/main/src/Input.js +++ b/packages/main/src/Input.js @@ -1013,7 +1013,7 @@ class Input extends UI5Element { "ariaOwns": this._inputAccInfo && this._inputAccInfo.ariaOwns, "ariaExpanded": this._inputAccInfo && this._inputAccInfo.ariaExpanded, "ariaDescription": this._inputAccInfo && this._inputAccInfo.ariaDescription, - "ariaLabel": getEffectiveAriaLabelText(this), + "ariaLabel": (this._inputAccInfo && this._inputAccInfo.ariaLabel) || getEffectiveAriaLabelText(this), "ariaRequired": (this._inputAccInfo && this._inputAccInfo.ariaRequired) || this.required, }, }; diff --git a/packages/main/test/pages/DatePicker.html b/packages/main/test/pages/DatePicker.html index 377aa8c91f81..478f96b7748b 100644 --- a/packages/main/test/pages/DatePicker.html +++ b/packages/main/test/pages/DatePicker.html @@ -112,6 +112,14 @@

3 months range

1 year range

+
+

Test ariaLabel and ariaLabelledBy

+ +
+ info text + +
+

DatePicker in Compact

diff --git a/packages/main/test/pages/DatePicker_test_page.html b/packages/main/test/pages/DatePicker_test_page.html index 31e9ac3217ca..20e21727913a 100644 --- a/packages/main/test/pages/DatePicker_test_page.html +++ b/packages/main/test/pages/DatePicker_test_page.html @@ -70,6 +70,14 @@

DatePicker with hide-week-numbers=true/false

+
+

Test ariaLabel and ariaLabelledBy

+ +
+ info text + +
+