feat(ui5-date-picker): add ariaLabel and ariaLabelledby properties (#…

…2126) FIXES #2107
SAP · Aug 20, 2020 · e0f93fa · e0f93fa
1 parent a58bf49
commit e0f93fa
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 1 deletion.
diff --git 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 <code>ui5-date-picker</code>.
+		 *
+		 * @type {String}
+		 * @since 1.0.0-rc.9
+		 * @private
+		 * @defaultvalue ""
+		 */
+		ariaLabel: {
+			type: String,
+		},
+
+		/**
+		 * Receives id(or many ids) of the elements that label the <code>ui5-date-picker</code>.
+		 *
+		 * @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
@@ -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
@@ -112,6 +112,14 @@ <h3>3 months range</h3>
 		<h3>1 year range</h3>
 		<ui5-date-picker id="minMax4" value="5 Feb 2021" min-date="5 Jan 2020" max-date="5 Jan 2021"></ui5-date-picker>
 
+		<section>
+			<h3>Test ariaLabel and ariaLabelledBy</h3>
+			<ui5-date-picker id="dpAriaLabel" aria-label="Hello World"></ui5-date-picker>
+			<br>
+			<ui5-label id="infoText">info text</ui5-label>
+			<ui5-date-picker id="dpAriaLabelledBy" aria-labelledby="infoText"></ui5-date-picker>
+		</section>
+
 		<section class="ui5-content-density-compact">
 			<h3>DatePicker in Compact</h3>
 			<div>

diff --git a/packages/main/test/pages/DatePicker_test_page.html b/packages/main/test/pages/DatePicker_test_page.html
@@ -70,6 +70,14 @@ <h3>DatePicker with hide-week-numbers=true/false</h3>
 	<ui5-date-picker id="dp18"></ui5-date-picker>
 	<ui5-date-picker id="dp19" hide-week-numbers></ui5-date-picker>
 
+	<section>
+		<h3>Test ariaLabel and ariaLabelledBy</h3>
+		<ui5-date-picker id="dpAriaLabel" aria-label="Hello World"></ui5-date-picker>
+		<br>
+		<ui5-label id="infoText">info text</ui5-label>
+		<ui5-date-picker id="dpAriaLabelledBy" aria-labelledby="infoText"></ui5-date-picker>
+	</section>
+
 	<script>
 		var originalGetDate = Date.prototype.getDate;
 

diff --git a/packages/main/test/specs/DatePicker.spec.js b/packages/main/test/specs/DatePicker.spec.js
@@ -717,4 +717,22 @@ describe("Date Picker Tests", () => {
 		datepicker.innerInput.click();
 		browser.keys(["Alt", "ArrowUp", "NULL"]);
 	});
+
+	it("Tests aria-label", () => {
+		const EXPECTED_ARIA_LABEL = "Hello World";
+
+		datepicker.id = "#dpAriaLabel";
+
+		assert.strictEqual(datepicker.innerInput.getAttribute("aria-label"), EXPECTED_ARIA_LABEL,
+			"The aria-label is correct.")
+	});
+
+	it("Tests aria-labelledby", () => {
+		const EXPECTED_ARIA_LABEL = "info text";
+
+		datepicker.id = "#dpAriaLabelledBy";
+
+		assert.strictEqual(datepicker.innerInput.getAttribute("aria-label"), EXPECTED_ARIA_LABEL,
+			"The aria-label is correct.")
+	});
 });