fix(ui5-date-picker): input type is now conveyed (#2628)

The component input type is recognised by the screen reader, with the help of 'aria-roledescription' attribute. Fixes #2604
SAP · Jan 28, 2021 · 70e3269 · 70e3269
1 parent af64f35
commit 70e3269
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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", () => {