diff --git a/packages/main/src/DatePicker.js b/packages/main/src/DatePicker.js index e84722beb17a..3d4dc8a3b474 100644 --- a/packages/main/src/DatePicker.js +++ b/packages/main/src/DatePicker.js @@ -18,7 +18,7 @@ import { import { isPhone, isIE } from "@ui5/webcomponents-base/dist/Device.js"; import "@ui5/webcomponents-icons/dist/appointment-2.js"; import "@ui5/webcomponents-icons/dist/decline.js"; -import { DATEPICKER_OPEN_ICON_TITLE, DATEPICKER_DATE_ACC_TEXT, INPUT_SUGGESTIONS_TITLE } from "./generated/i18n/i18n-defaults.js"; +import { DATEPICKER_OPEN_ICON_TITLE, DATEPICKER_DATE_DESCRIPTION, INPUT_SUGGESTIONS_TITLE } from "./generated/i18n/i18n-defaults.js"; import DateComponentBase from "./DateComponentBase.js"; import Icon from "./Icon.js"; import Button from "./Button.js"; @@ -590,13 +590,13 @@ class DatePicker extends DateComponentBase { get accInfo() { return { - "ariaDescribedBy": `${this._id}-date`, + "ariaRoledescription": this.dateAriaDescription, "ariaHasPopup": "true", "ariaAutoComplete": "none", "role": "combobox", "ariaOwns": `${this._id}-responsive-popover`, "ariaExpanded": this.isOpen(), - "ariaDescription": this.dateAriaDescription, + "ariaRequired": this.required, "ariaLabel": getEffectiveAriaLabelText(this), }; } @@ -610,7 +610,7 @@ class DatePicker extends DateComponentBase { } get dateAriaDescription() { - return this.i18nBundle.getText(DATEPICKER_DATE_ACC_TEXT); + return this.i18nBundle.getText(DATEPICKER_DATE_DESCRIPTION); } /** diff --git a/packages/main/src/Input.hbs b/packages/main/src/Input.hbs index 21ceaaf738da..ee0f3f173a02 100644 --- a/packages/main/src/Input.hbs +++ b/packages/main/src/Input.hbs @@ -21,6 +21,7 @@ ?aria-invalid="{{accInfo.input.ariaInvalid}}" aria-haspopup="{{accInfo.input.ariaHasPopup}}" aria-describedby="{{accInfo.input.ariaDescribedBy}}" + aria-roledescription="{{accInfo.input.ariaRoledescription}}" aria-autocomplete="{{accInfo.input.ariaAutoComplete}}" aria-expanded="{{accInfo.input.ariaExpanded}}" aria-label="{{accInfo.input.ariaLabel}}" diff --git a/packages/main/src/Input.js b/packages/main/src/Input.js index f130e031ded0..e4dd20601584 100644 --- a/packages/main/src/Input.js +++ b/packages/main/src/Input.js @@ -1059,6 +1059,7 @@ class Input extends UI5Element { return { "input": { + "ariaRoledescription": this._inputAccInfo && (this._inputAccInfo.ariaRoledescription || undefined), "ariaDescribedBy": ariaDescribedBy || undefined, "ariaInvalid": this.valueState === ValueState.Error ? "true" : undefined, "ariaHasPopup": this._inputAccInfo.ariaHasPopup ? this._inputAccInfo.ariaHasPopup : ariaHasPopupDefault, diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties index 7649480d6a8a..fb07e7d72ec5 100644 --- a/packages/main/src/i18n/messagebundle.properties +++ b/packages/main/src/i18n/messagebundle.properties @@ -31,9 +31,6 @@ BUTTON_ARIA_TYPE_REJECT=Negative Action #XACT: ARIA announcement for the emphasized button BUTTON_ARIA_TYPE_EMPHASIZED=Emphasized -#XACT: Date -DATEPICKER_DATE_ACC_TEXT=Date - # Carousel of text CAROUSEL_OF_TEXT=of @@ -49,6 +46,9 @@ CAROUSEL_NEXT_ARROW_TEXT=Next Page #XACT: DatePicker 'Open Picker' icon title DATEPICKER_OPEN_ICON_TITLE=Open Picker +#XACT: Aria information for the Date Picker +DATEPICKER_DATE_DESCRIPTION=Date Input + DELETE=Delete FILEUPLOAD_BROWSE=Browse... diff --git a/packages/main/test/specs/DatePicker.spec.js b/packages/main/test/specs/DatePicker.spec.js index 26ceeb62c7be..17b0b444a9dd 100644 --- a/packages/main/test/specs/DatePicker.spec.js +++ b/packages/main/test/specs/DatePicker.spec.js @@ -8,8 +8,10 @@ describe("Date Picker Tests", () => { it("input renders", () => { datepicker.id = "#dp"; + assert.ok(datepicker.input.isDisplayedInViewport(), "input is rendered"); assert.ok(datepicker.innerInput.isDisplayedInViewport(), "inner input is rendered"); + assert.strictEqual(datepicker.innerInput.getAttribute("aria-roledescription"), "Date Input", "aria-roledescription attribute is added."); }); it("input receives value", () => {