feat: implement assessibleNameRef for many components (#3442)

Part of #3107 BREAKING CHANGE: The support for ```aria-labelledby``` have been deprecated in favour of new attribute ```accessible-name-ref``` for the following components: - ComboBox (Requested by SF #1916) - DatePicker (Requested by SF #2107) - Input (Requested #1866) - List (Requested by SF #1886) - Rating Indicator - Select (Requested by SF #2107) - StepInput (Implemented as part of the initial implementation #2804) - TextArea (Requested by SF #2107) - WizardStep (Implemented as part of the initial implementation #2400) The ```aria-labelledby``` has been deprecated for the following component: - Button (Requested by SF #1425) The ```accessible-name``` has been deprecated for the following components: - Link (Requested by SF #2356) Both ```aria-labelledby``` and ```accessible-name``` have been deprecated for the following components: - Card (Requested by CBC #2127) - CheckBox (Requested by SF #2265)
SAP · Jul 30, 2021 · 42d3ed5 · 42d3ed5
1 parent ba8551f
commit 42d3ed5
Show file tree

Hide file tree

Showing 35 changed files with 184 additions and 319 deletions.
diff --git a/packages/base/hash.txt b/packages/base/hash.txt
@@ -1 +1 @@
-Jo7xX6Xqjqd/+p/wSl0hl57d8ng=
+44n+tz3Upvb7fx9BuRR5JpZRssg=
diff --git a/packages/base/src/util/AriaLabelHelper.js b/packages/base/src/util/AriaLabelHelper.js
@@ -1,7 +1,7 @@
 import findNodeOwner from "./findNodeOwner.js";
 
 const getEffectiveAriaLabelText = el => {
-	if (!el.ariaLabelledby) {
+	if (!el.accessibleNameRef) {
 		if (el.accessibleName) {
 			return el.accessibleName;
 		}
@@ -19,7 +19,7 @@ const getEffectiveAriaLabelText = el => {
  * @param {String} readyIds (Optional) Defines a string of elements ids. The text of these elements will be returned. If used you should provide either el or ownerDocument
  */
 const getAriaLabelledByTexts = (el, ownerDocument, readyIds = "") => {
-	const ids = (readyIds && readyIds.split(" ")) || el.ariaLabelledby.split(" ");
+	const ids = (readyIds && readyIds.split(" ")) || el.accessibleNameRef.split(" ");
 	const owner = ownerDocument || findNodeOwner(el);
 	let result = "";
 

diff --git a/packages/fiori/src/NotificationListItem.js b/packages/fiori/src/NotificationListItem.js
@@ -53,7 +53,7 @@ const metadata = {
 		 * @type {WrappingType}
 		 * @defaultvalue "None"
 		 * @public
-		 * @since 1.0.0-rc.16
+		 * @since 1.0.0-rc.15
 		 */
 		wrappingType: {
 			type: WrappingType,

diff --git a/packages/fiori/src/WizardStep.js b/packages/fiori/src/WizardStep.js
@@ -118,9 +118,10 @@ const metadata = {
 		 * Defines the aria-labelledby of the step.
 		 * @type {boolean}
 		 * @defaultvalue ""
-		 * @private
+		 * @public
+		 * @since 1.0.0-rc.15
 		 */
-		ariaLabelledby: {
+		accessibleNameRef: {
 			type: String,
 		},
 	},

diff --git a/packages/main/src/Button.hbs b/packages/main/src/Button.hbs
@@ -18,7 +18,7 @@
 	aria-expanded="{{accInfo.ariaExpanded}}"
 	aria-controls="{{accInfo.ariaControls}}"
 	aria-haspopup="{{accInfo.ariaHaspopup}}"
-	aria-label="{{ariaLabelText}}"
+	aria-label="{{accessibleName}}"
 	title="{{accInfo.title}}"
 	part="button"
 >

diff --git a/packages/main/src/Button.js b/packages/main/src/Button.js
@@ -3,7 +3,6 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import isLegacyBrowser from "@ui5/webcomponents-base/dist/isLegacyBrowser.js";
 import { isPhone, isTablet } from "@ui5/webcomponents-base/dist/Device.js";
 import ButtonDesign from "./types/ButtonDesign.js";
@@ -165,18 +164,6 @@ const metadata = {
 			defaultValue: undefined,
 		},
 
-		/**
-		 * Receives id(or many ids) of the elements that label the button
-		 * @type {String}
-		 * @defaultvalue ""
-		 * @private
-		 * @since 1.0.0-rc.7
-		 */
-		ariaLabelledby: {
-			type: String,
-			defaultValue: "",
-		},
-
 		/**
 		 * @type {String}
 		 * @defaultvalue ""
@@ -443,10 +430,6 @@ class Button extends UI5Element {
 		};
 	}
 
-	get ariaLabelText() {
-		return getEffectiveAriaLabelText(this);
-	}
-
 	static typeTextMappings() {
 		return {
 			"Positive": BUTTON_ARIA_TYPE_ACCEPT,

diff --git a/packages/main/src/Card.hbs b/packages/main/src/Card.hbs
@@ -2,10 +2,7 @@
 	class="{{classes}}"
 	dir="{{effectiveDir}}"
 	role="region"
-	aria-label="{{ariaLabelText}}"
-	aria-labelledby="{{ariaLabelledByCard}}"
->
-	<!-- header -->
+	aria-labelledby="{{ariaLabelledByCard}}">
 	{{#if hasHeader}}
 		<div class="ui5-card-header-root">
 			<slot name="header"></slot>

diff --git a/packages/main/src/Card.js b/packages/main/src/Card.js
@@ -1,7 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import CardTemplate from "./generated/templates/CardTemplate.lit.js";
 import Icon from "./Icon.js";
 
@@ -48,32 +47,10 @@ const metadata = {
 	},
 	properties: /** @lends sap.ui.webcomponents.main.Card.prototype */ {
 
-		/**
-		 * Sets the accessible aria name of the component.
-		 *
-		 * @type {String}
-		 * @public
-		 * @since 1.0.0-rc.15
-		 * @defaultvalue ""
-		 */
-		accessibleName: {
-			type: String,
-		},
+	},
+	events: /** @lends sap.ui.webcomponents.main.Card.prototype */ {
 
-		/**
-		 * Receives id(or many ids) of the elements that label the component
-		 *
-		 * @type {String}
-		 * @defaultvalue ""
-		 * @private
-		 * @since 1.0.0-rc.9
-		 */
-		ariaLabelledby: {
-			type: String,
-			defaultValue: "",
-		},
 	},
-	events: /** @lends sap.ui.webcomponents.main.Card.prototype */ {},
 };
 
 /**
@@ -138,10 +115,6 @@ class Card extends UI5Element {
 		return !!this.header.length;
 	}
 
-	get ariaLabelText() {
-		return getEffectiveAriaLabelText(this);
-	}
-
 	get ariaCardRoleDescription() {
 		return this.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD);
 	}

diff --git a/packages/main/src/CardHeader.js b/packages/main/src/CardHeader.js
@@ -1,7 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import CardHeaderTemplate from "./generated/templates/CardHeaderTemplate.lit.js";
 import Icon from "./Icon.js";
@@ -93,29 +92,6 @@ const metadata = {
 			type: Boolean,
 		},
 
-		/**
-		 * Defines the aria-label attribute for the component
-		 *
-		 * @type {String}
-		 * @private
-		 * @defaultvalue ""
-		 */
-		ariaLabel: {
-			type: String,
-		},
-
-		/**
-		 * Receives id(or many ids) of the elements that label the component
-		 *
-		 * @type {String}
-		 * @defaultvalue ""
-		 * @private
-		 */
-		ariaLabelledby: {
-			type: String,
-			defaultValue: "",
-		},
-
 		_headerActive: {
 			type: Boolean,
 			noAttribute: true,
@@ -208,10 +184,6 @@ class CardHeader extends UI5Element {
 		return this.interactive ? undefined : "3";
 	}
 
-	get ariaLabelText() {
-		return getEffectiveAriaLabelText(this);
-	}
-
 	get ariaCardHeaderRoleDescription() {
 		return this.interactive ? this.i18nBundle.getText(ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER) : this.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD_HEADER);
 	}

diff --git a/packages/main/src/CheckBox.hbs b/packages/main/src/CheckBox.hbs
@@ -4,7 +4,6 @@
 	aria-checked="{{ariaChecked}}"
 	aria-readonly="{{ariaReadonly}}"
 	aria-disabled="{{ariaDisabled}}"
-	aria-label="{{ariaLabelText}}"
 	aria-labelledby="{{ariaLabelledBy}}"
 	aria-describedby="{{ariaDescribedBy}}"
 	tabindex="{{tabIndex}}"

diff --git a/packages/main/src/CheckBox.js b/packages/main/src/CheckBox.js
@@ -2,7 +2,6 @@ import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
@@ -164,31 +163,6 @@ const metadata = {
 		name: {
 			type: String,
 		},
-
-		/**
-		 * Sets the accessible aria name of the component.
-		 *
-		 * @type {string}
-		 * @defaultvalue undefined
-		 * @public
-		 * @since 1.0.0-rc.15
-		 */
-		accessibleName: {
-			type: String,
-			defaultValue: undefined,
-		},
-
-		/**
-		 * Receives id(or many ids) of the elements that label the checkbox
-		 * @type {String}
-		 * @defaultvalue ""
-		 * @private
-		 * @since 1.0.0-rc.9
-		 */
-		ariaLabelledby: {
-			type: String,
-			defaultValue: "",
-		},
 	},
 	events: /** @lends sap.ui.webcomponents.main.CheckBox.prototype */ {
 
@@ -365,20 +339,12 @@ class CheckBox extends UI5Element {
 		return this.disabled ? "true" : undefined;
 	}
 
-	get ariaLabelText() {
-		return getEffectiveAriaLabelText(this);
-	}
-
 	get ariaChecked() {
 		return this.indeterminate && this.checked ? "mixed" : this.checked;
 	}
 
 	get ariaLabelledBy() {
-		if (!this.ariaLabelText) {
-			return this.text ? `${this._id}-label` : undefined;
-		}
-
-		return undefined;
+		return this.text ? `${this._id}-label` : undefined;
 	}
 
 	get ariaDescribedBy() {

diff --git a/packages/main/src/ComboBox.js b/packages/main/src/ComboBox.js
@@ -205,10 +205,10 @@ const metadata = {
 		 * Receives id(or many ids) of the elements that label the combo box
 		 * @type {String}
 		 * @defaultvalue ""
-		 * @private
-		 * @since 1.0.0-rc.8
+		 * @public
+		 * @since 1.0.0-rc.15
 		 */
-		ariaLabelledby: {
+		accessibleNameRef: {
 			type: String,
 			defaultValue: "",
 		},

diff --git a/packages/main/src/DatePicker.js b/packages/main/src/DatePicker.js
@@ -181,10 +181,10 @@ const metadata = {
 		 *
 		 * @type {String}
 		 * @defaultvalue ""
-		 * @private
-		 * @since 1.0.0-rc.9
+		 * @public
+		 * @since 1.0.0-rc.15
 		 */
-		ariaLabelledby: {
+		accessibleNameRef: {
 			type: String,
 			defaultValue: "",
 		},

diff --git a/packages/main/src/Input.js b/packages/main/src/Input.js
@@ -316,10 +316,10 @@ const metadata = {
 		 *
 		 * @type {String}
 		 * @defaultvalue ""
-		 * @private
-		 * @since 1.0.0-rc.8
+		 * @public
+		 * @since 1.0.0-rc.15
 		 */
-		ariaLabelledby: {
+		accessibleNameRef: {
 			type: String,
 			defaultValue: "",
 		},

diff --git a/packages/main/src/Link.js b/packages/main/src/Link.js
@@ -1,7 +1,7 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import { getAriaLabelledByTexts } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import LinkDesign from "./types/LinkDesign.js";
 import WrappingType from "./types/WrappingType.js";
@@ -102,26 +102,15 @@ const metadata = {
 			defaultValue: WrappingType.None,
 		},
 
-		/**
-		 * Sets the accessible aria name of the component.
-		 *
-		 * @type {String}
-		 * @public
-		 * @since 1.0.0-rc.15
-		 */
-		accessibleName: {
-			type: String,
-		},
-
 		/**
 		 * Receives id(or many ids) of the elements that label the input
 		 *
 		 * @type {String}
 		 * @defaultvalue ""
-		 * @private
-		 * @since 1.0.0-rc.10
+		 * @public
+		 * @since 1.0.0-rc.15
 		 */
-		ariaLabelledby: {
+		accessibleNameRef: {
 			type: String,
 			defaultValue: "",
 		},
@@ -244,7 +233,7 @@ class Link extends UI5Element {
 	}
 
 	get ariaLabelText() {
-		return getEffectiveAriaLabelText(this);
+		return getAriaLabelledByTexts(this);
 	}
 
 	get hasLinkType() {

diff --git a/packages/main/src/List.js b/packages/main/src/List.js
@@ -215,10 +215,10 @@ const metadata = {
 		 *
 		 * @type {String}
 		 * @defaultvalue ""
-		 * @private
-		 * @since 1.0.0-rc.8
+		 * @public
+		 * @since 1.0.0-rc.15
 		 */
-		ariaLabelledby: {
+		accessibleNameRef: {
 			type: String,
 			defaultValue: "",
 		},
@@ -525,7 +525,7 @@ class List extends UI5Element {
 	}
 
 	get ariaLabelledBy() {
-		if (this.ariaLabelledby || this.accessibleName) {
+		if (this.accessibleNameRef || this.accessibleName) {
 			return undefined;
 		}