@ui5/webcomponents 0.31.18 → 0.31.22

package/CHANGELOG.md

@@ -3,6 +3,119 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.31.22](https://github.com/SAP/ui5-webcomponents/compare/v0.31.21...v0.31.22) (2021-10-26)
+
+
+### Bug Fixes
+
+* **ui5-card:** accessibleName now takes effect ([0769850](https://github.com/SAP/ui5-webcomponents/commit/0769850))
+* **ui5-card:** fix  a11y "unique landmark" issue ([32e1477](https://github.com/SAP/ui5-webcomponents/commit/32e1477))
+
+
+### Features
+
+* **framework:** allow using a custom i18n library ([#4119](https://github.com/SAP/ui5-webcomponents/issues/4119)) ([947889a](https://github.com/SAP/ui5-webcomponents/commit/947889a))
+* **ui5-card:** introduce accessible-name-ref to replace aria-labelledby ([3f7138c](https://github.com/SAP/ui5-webcomponents/commit/3f7138c))
+
+
+### Reverts
+
+* feat(framework): allow using a custom i18n library ([debc848](https://github.com/SAP/ui5-webcomponents/commit/debc848))
+
+
+
+
+
+## [0.31.21](https://github.com/SAP/ui5-webcomponents/compare/v0.31.20...v0.31.21) (2021-10-16)
+
+
+### Bug Fixes
+
+* **ui5-input:** Behaviour on mobile device enhanced ([#4025](https://github.com/SAP/ui5-webcomponents/issues/4025)) ([ebd2065](https://github.com/SAP/ui5-webcomponents/commit/ebd2065))
+* **ui5-list:** remove unnecessary scrollbar in RTL for Multiselect mode ([#4085](https://github.com/SAP/ui5-webcomponents/issues/4085)) ([023081e](https://github.com/SAP/ui5-webcomponents/commit/023081e)), closes [#3947](https://github.com/SAP/ui5-webcomponents/issues/3947)
+* **ui5-list, ui5-table, ui5-notification, ui5-busy-indicator:** getFocusDomRef returns the correct element when the state is busy ([#3951](https://github.com/SAP/ui5-webcomponents/issues/3951)) ([feaa63f](https://github.com/SAP/ui5-webcomponents/commit/feaa63f)), closes [#3922](https://github.com/SAP/ui5-webcomponents/issues/3922)
+
+
+### Features
+
+* **ui5-card:** add "accessibleName" ([c6f75c7](https://github.com/SAP/ui5-webcomponents/commit/c6f75c7))
+
+
+
+
+
+## [0.31.20](https://github.com/SAP/ui5-webcomponents/compare/v0.31.19...v0.31.20) (2021-10-03)
+
+
+### Bug Fixes
+
+* **ui5-dialog:** Fixed "aria-label" text screen reading ([#3936](https://github.com/SAP/ui5-webcomponents/issues/3936)) ([622344d](https://github.com/SAP/ui5-webcomponents/commit/622344d)), closes [#3778](https://github.com/SAP/ui5-webcomponents/issues/3778)
+* **ui5-icon:** decorative icons now have aria-hidden=true ([#3983](https://github.com/SAP/ui5-webcomponents/issues/3983)) ([e558159](https://github.com/SAP/ui5-webcomponents/commit/e558159)), closes [#3954](https://github.com/SAP/ui5-webcomponents/issues/3954)
+
+
+### Features
+
+* **ui5-popover:** add accessibleName proeprty ([4f8c70c](https://github.com/SAP/ui5-webcomponents/commit/4f8c70c))
+* add "id" message bundle ([34399c1](https://github.com/SAP/ui5-webcomponents/commit/34399c1))
+* **ui5-list:** announce the selection mode of the list on entry ([#4018](https://github.com/SAP/ui5-webcomponents/issues/4018)) ([58c36b1](https://github.com/SAP/ui5-webcomponents/commit/58c36b1)), closes [#3806](https://github.com/SAP/ui5-webcomponents/issues/3806)
+
+
+### BREAKING CHANGES
+
+* **ui5-popover:** ariaLabel has been replaced by accessibleName
+
+
+
+
+
+## [0.31.19](https://github.com/SAP/ui5-webcomponents/compare/v0.31.18...v0.31.19) (2021-09-24)
+
+
+### Bug Fixes
+
+* **ui5-input:** inner input padding is correctly updated ([#3015](https://github.com/SAP/ui5-webcomponents/issues/3015)) ([06f7088](https://github.com/SAP/ui5-webcomponents/commit/06f7088)), closes [#2940](https://github.com/SAP/ui5-webcomponents/issues/2940)
+* **ui5-label:** fix truncation ([#3995](https://github.com/SAP/ui5-webcomponents/issues/3995)) ([0a8d511](https://github.com/SAP/ui5-webcomponents/commit/0a8d511)), closes [#3897](https://github.com/SAP/ui5-webcomponents/issues/3897) [#3980](https://github.com/SAP/ui5-webcomponents/issues/3980)
+* **ui5-timeline:** align indicator in compact mode ([#3902](https://github.com/SAP/ui5-webcomponents/issues/3902)) ([2baf34a](https://github.com/SAP/ui5-webcomponents/commit/2baf34a))
+
+
+### Features
+
+* **ui5-list:** introduce accessibleName, accessibleNameRef, accessibleRole ([e84a3fa](https://github.com/SAP/ui5-webcomponents/commit/e84a3fa))
+
+
+### BREAKING CHANGES
+
+* **ui5-list:** ariaLabel and ariaLabelledby are removed in favor of accessibleName and accessibleNameRef
+
+
+
+
+
+## [0.31.18](https://github.com/SAP/ui5-webcomponents/compare/v0.31.17...v0.31.18) (2021-09-20)
+
+
+### Bug Fixes
+
+* **ui5-badge:** update accent colors ([#3926](https://github.com/SAP/ui5-webcomponents/issues/3926)) ([0304014](https://github.com/SAP/ui5-webcomponents/commit/0304014)), closes [#3923](https://github.com/SAP/ui5-webcomponents/issues/3923) [#3923](https://github.com/SAP/ui5-webcomponents/issues/3923)
+* **ui5-combobox:** announce selected item ([#3358](https://github.com/SAP/ui5-webcomponents/issues/3358)) ([e05826e](https://github.com/SAP/ui5-webcomponents/commit/e05826e))
+* **ui5-file-uploader:** Button is activated with Enter/Space key with screen reader virtual cursor ([#3944](https://github.com/SAP/ui5-webcomponents/issues/3944)) ([af808d4](https://github.com/SAP/ui5-webcomponents/commit/af808d4)), closes [#3767](https://github.com/SAP/ui5-webcomponents/issues/3767) [#3767](https://github.com/SAP/ui5-webcomponents/issues/3767)
+* **ui5-input:** adjust value state paddings according to specifications ([#3833](https://github.com/SAP/ui5-webcomponents/issues/3833)) ([48bd6fe](https://github.com/SAP/ui5-webcomponents/commit/48bd6fe)), closes [#3611](https://github.com/SAP/ui5-webcomponents/issues/3611) [#3611](https://github.com/SAP/ui5-webcomponents/issues/3611)
+* **ui5-label:** adjust colon margins ([#3897](https://github.com/SAP/ui5-webcomponents/issues/3897)) ([556516e](https://github.com/SAP/ui5-webcomponents/commit/556516e))
+* **ui5-link:** the anchor element inherits its text-decoration ([#3911](https://github.com/SAP/ui5-webcomponents/issues/3911)) ([276b142](https://github.com/SAP/ui5-webcomponents/commit/276b142)), closes [#3837](https://github.com/SAP/ui5-webcomponents/issues/3837) [#3837](https://github.com/SAP/ui5-webcomponents/issues/3837)
+* **ui5-list:** change role mappings so no interactive elements are ne… ([#3952](https://github.com/SAP/ui5-webcomponents/issues/3952)) ([82be1de](https://github.com/SAP/ui5-webcomponents/commit/82be1de)), closes [#3927](https://github.com/SAP/ui5-webcomponents/issues/3927)
+* **ui5-toast:** Content is announced when ui5-toast is shown ([#3939](https://github.com/SAP/ui5-webcomponents/issues/3939)) ([cce6ca8](https://github.com/SAP/ui5-webcomponents/commit/cce6ca8))
+* **ui5-tree, ui5-table, ui5-side-navigation:** unnecessary scrollbar in RTL is removed ([#3948](https://github.com/SAP/ui5-webcomponents/issues/3948)) ([bab650a](https://github.com/SAP/ui5-webcomponents/commit/bab650a))
+
+
+### Features
+
+* **invisibleMessage:** introduce invisibleMessage util ([#3192](https://github.com/SAP/ui5-webcomponents/issues/3192)) ([021619b](https://github.com/SAP/ui5-webcomponents/commit/021619b))
+* **ui5-card:** implement ariaLevel property ([5eca9d5](https://github.com/SAP/ui5-webcomponents/commit/5eca9d5))
+
+
+
+
+
 ## [0.31.17](https://github.com/SAP/ui5-webcomponents/compare/v0.31.16...v0.31.17) (2021-09-13)
 
 

package/dist/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 { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import CardTemplate from "./generated/templates/CardTemplate.lit.js";
@@ -114,28 +113,28 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the aria-label attribute for the <code>ui5-card</code>
+		 * Defines the accessible name of the component, which is used as the name of the card region and should be unique per card.
+		 * <b>Note:</b> <code>accessibleName</code> should be always set.
 		 *
 		 * @type {String}
-		 * @since 1.0.0-rc.9
-		 * @private
 		 * @defaultvalue ""
+		 * @public
+		 * @since 1.0.0-rc.16
 		 */
-		ariaLabel: {
+		 accessibleName: {
 			type: String,
 		},
 
 		/**
-		 * Receives id(or many ids) of the elements that label the <code>ui5-card</code>
+		 * Defines the IDs of the elements that label the component.
 		 *
 		 * @type {String}
 		 * @defaultvalue ""
-		 * @private
-		 * @since 1.0.0-rc.9
+		 * @public
+		 * @since 1.0.0-rc.16
 		 */
-		ariaLabelledby: {
+		accessibleNameRef: {
 			type: String,
-			defaultValue: "",
 		},
 
 		/**
@@ -255,12 +254,42 @@ class Card extends UI5Element {
 		return !!(this.heading || this.subheading || this.status || this.hasAction || this.avatar);
 	}
 
-	get ariaLabelText() {
-		return getEffectiveAriaLabelText(this);
-	}
+	// As in 0.31 we don't have all the accessibleNameRef, accessibleName related changes downported,
+	// we manually add getEffectiveAriaLabelText and getAriaLabelledByTexts methods and change them,
+	// so they work with accessibleName and accessibleNameRef, isntead of ariaLabel and ariaLabelledby
+	getEffectiveAriaLabelText(el) {
+		if (!el.accessibleNameRef) {
+			if (el.accessibleName) {
+				return el.accessibleName;
+			}
+	
+			return undefined;
+		}
+	
+		return this.getAriaLabelledByTexts(el);
+	};
+	
+	getAriaLabelledByTexts(el, ownerDocument, readyIds = "") {
+		const ids = (readyIds && readyIds.split(" ")) || el.accessibleNameRef.split(" ");
+		const owner = ownerDocument || findNodeOwner(el);
+		let result = "";
+	
+		ids.forEach((elementId, index) => {
+			const element = owner.querySelector(`[id='${elementId}']`);
+			result += `${element ? element.textContent : ""}`;
+	
+			if (index < ids.length - 1) {
+				result += " ";
+			}
+		});
+	
+		return result;
+	};
 
-	get ariaCardRoleDescription() {
-		return this.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD);
+	get ariaLabelText() {
+		const effectiveAriaLabelText = this.getEffectiveAriaLabelText(this),
+			effectiveAriaLabel = effectiveAriaLabelText ? ` ${effectiveAriaLabelText}` : "";
+		return this.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD) + effectiveAriaLabel;
 	}
 
 	get ariaCardHeaderRoleDescription() {
@@ -293,10 +322,6 @@ class Card extends UI5Element {
 		return labels.length !== 0 ? labels.join(" ") : undefined;
 	}
 
-	get ariaLabelledByCard() {
-		return this.heading ? `${this._id}-heading ${this._id}-desc` : `${this._id}-desc`;
-	}
-
 	get hasAvatar() {
 		return !!this.avatar.length;
 	}

package/dist/Dialog.js

@@ -211,20 +211,20 @@ class Dialog extends Popup {
 	get _ariaLabelledBy() { // Required by Popup.js
 		let ariaLabelledById;
 
-		if (this.headerText !== "" && !this.ariaLabel) {
+		if (this.headerText !== "" && !this.accessibleName) {
 			ariaLabelledById = "ui5-popup-header-text";
 		}
 
 		return ariaLabelledById;
 	}
 
+	/**
+	 * Ensures ariaLabel is never null or empty string
+	 * @returns {String|undefined}
+	 * @protected
+	 */
 	get _ariaLabel() {
-		let ariaLabel;
-
-		if (this.header.length > 0 && !!this.accessibleName) {
-			ariaLabel = this.accessibleName;
-		}
-		return this.ariaLabel ? this.ariaLabel : ariaLabel;
+		return this.accessibleName || undefined;
 	}
 
 	get _ariaModal() { // Required by Popup.js

package/dist/Icon.js

@@ -12,6 +12,7 @@ import IconTemplate from "./generated/templates/IconTemplate.lit.js";
 import iconCss from "./generated/themes/Icon.css.js";
 
 const ICON_NOT_FOUND = "ICON_NOT_FOUND";
+const PRESENTATION_ROLE = "presentation";
 
 /**
  * @public
@@ -97,6 +98,7 @@ const metadata = {
 
 		/**
 		 * Defines the aria hidden state of the component.
+		 * Note: If the role is presentation the default value of aria-hidden will be true.
 		 * @private
 		 * @since 1.0.0-rc.15
 		 */
@@ -257,6 +259,10 @@ class Icon extends UI5Element {
 
 	get effectiveAriaHidden() {
 		if (this.ariaHidden === "") {
+			if (this.isDecorative) {
+				return true;
+			}
+
 			return;
 		}
 
@@ -267,6 +273,10 @@ class Icon extends UI5Element {
 		return this.interactive ? "0" : "-1";
 	}
 
+	get isDecorative() {
+		return this.effectiveAccessibleRole === PRESENTATION_ROLE;
+	}
+
 	get effectiveAccessibleRole() {
 		if (this.role) {
 			return this.role;
@@ -276,7 +286,7 @@ class Icon extends UI5Element {
 			return "button";
 		}
 
-		return this.effectiveAccessibleName ? "img" : "presentation";
+		return this.effectiveAccessibleName ? "img" : PRESENTATION_ROLE;
 	}
 
 	static createGlobalStyle() {

package/dist/Input.js

@@ -998,7 +998,7 @@ class Input extends UI5Element {
 	}
 
 	async getInputDOMRef() {
-		if (isPhone() && this.Suggestions && this.suggestionItems.length) {
+		if (isPhone() && this.Suggestions) {
 			await this.Suggestions._respPopover();
 			return this.Suggestions && this.Suggestions.responsivePopover.querySelector(".ui5-input-inner-phone");
 		}
@@ -1187,7 +1187,7 @@ class Input extends UI5Element {
 	}
 
 	get styles() {
-		return {
+		const stylesObject = {
 			popoverHeader: {
 				"max-width": `${this._inputWidth}px`,
 			},
@@ -1198,10 +1198,14 @@ class Input extends UI5Element {
 			suggestionsPopover: {
 				"max-width": `${this._inputWidth}px`,
 			},
-			innerInput: {
-				padding: this.nativeInputWidth < 48 ? "0" : undefined,
-			},
+			innerInput: {},
 		};
+
+		if (this.nativeInputWidth < 48) {
+			stylesObject.innerInput.padding = "0";
+		}
+
+		return stylesObject;
 	}
 
 	get suggestionSeparators() {

package/dist/List.js

@@ -6,7 +6,7 @@ import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
 import { getLastTabbableElement } from "@ui5/webcomponents-base/dist/util/TabbableElements.js";
 import { isTabNext, isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import findNodeOwner from "@ui5/webcomponents-base/dist/util/findNodeOwner.js";
 import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import debounce from "@ui5/webcomponents-base/dist/util/debounce.js";
 import isElementInView from "@ui5/webcomponents-base/dist/util/isElementInView.js";
@@ -22,7 +22,11 @@ import ListTemplate from "./generated/templates/ListTemplate.lit.js";
 import listCss from "./generated/themes/List.css.js";
 
 // Texts
-import { LOAD_MORE_TEXT } from "./generated/i18n/i18n-defaults.js";
+import {
+	LOAD_MORE_TEXT, ARIA_LABEL_LIST_SELECTABLE,
+	ARIA_LABEL_LIST_MULTISELECTABLE,
+	ARIA_LABEL_LIST_DELETABLE,
+} from "./generated/i18n/i18n-defaults.js";
 
 const INFINITE_SCROLL_DEBOUNCE_RATE = 250; // ms
 
@@ -167,7 +171,7 @@ const metadata = {
 		 * @since 1.0.0-rc.13
 		 * @public
 		 */
-		 growing: {
+		growing: {
 			type: ListGrowingMode,
 			defaultValue: ListGrowingMode.None,
 		},
@@ -185,12 +189,14 @@ const metadata = {
 		},
 
 		/**
+		 * Sets the accessible aria name of the component.
+		 *
 		 * @type {String}
 		 * @defaultvalue ""
-		 * @private
-		 * @since 1.0.0-rc.8
+		 * @public
+		 * @since 1.0.0-rc.15
 		 */
-		ariaLabel: {
+		accessibleName: {
 			type: String,
 		},
 
@@ -199,10 +205,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: "",
 		},
@@ -210,15 +216,13 @@ const metadata = {
 		/**
 		 * Defines the accessible role of the component.
 		 * <br><br>
-		 * <b>Note:</b> If you use notification list items,
-		 * it's recommended to set <code>accessible-role="list"</code> for better accessibility.
 		 *
-		 * @private
+		 * @public
 		 * @type {String}
 		 * @defaultvalue "list"
 		 * @since 1.0.0-rc.15
 		 */
-		 accessibleRole: {
+		accessibleRole: {
 			type: String,
 			defaultValue: "list",
 		},
@@ -227,7 +231,7 @@ const metadata = {
 		 * Defines if the entire list is in view port.
 		 * @private
 		 */
-		 _inViewport: {
+		_inViewport: {
 			type: Boolean,
 		},
 
@@ -235,7 +239,7 @@ const metadata = {
 		 * Defines the active state of the <code>More</code> button.
 		 * @private
 		 */
-		 _loadMoreActive: {
+		_loadMoreActive: {
 			type: Boolean,
 		},
 	},
@@ -459,6 +463,35 @@ class List extends UI5Element {
 		}
 	}
 
+	getEffectiveAriaLabelText(el) {
+		if (!el.accessibleNameRef) {
+			if (el.accessibleName) {
+				return el.accessibleName;
+			}
+	
+			return undefined;
+		}
+	
+		return this.getAriaLabelledByTexts(el);
+	};
+
+	getAriaLabelledByTexts(el, ownerDocument, readyIds = "") {
+		const ids = (readyIds && readyIds.split(" ")) || el.accessibleNameRef.split(" ");
+		const owner = ownerDocument || findNodeOwner(el);
+		let result = "";
+	
+		ids.forEach((elementId, index) => {
+			const element = owner.querySelector(`[id='${elementId}']`);
+			result += `${element ? element.textContent : ""}`;
+	
+			if (index < ids.length - 1) {
+				result += " ";
+			}
+		});
+	
+		return result;
+	};
+
 	get shouldRenderH1() {
 		return !this.header.length && this.headerText;
 	}
@@ -467,6 +500,10 @@ class List extends UI5Element {
 		return `${this._id}-header`;
 	}
 
+	get modeLabelID() {
+		return `${this._id}-modeLabel`;
+	}
+
 	get listEndDOM() {
 		return this.shadowRoot.querySelector(".ui5-list-end-marker");
 	}
@@ -479,20 +516,56 @@ class List extends UI5Element {
 		return !this.hasData && this.noDataText;
 	}
 
+	get isDelete() {
+		return this.mode === ListMode.Delete;
+	}
+
+	get isSingleSelect() {
+		return [
+			ListMode.SingleSelect,
+			ListMode.SingleSelectBegin,
+			ListMode.SingleSelectEnd,
+			ListMode.SingleSelectAuto,
+		].includes(this.mode);
+	}
+
 	get isMultiSelect() {
 		return this.mode === ListMode.MultiSelect;
 	}
-
+	
 	get ariaLabelledBy() {
-		if (this.ariaLabelledby || this.ariaLabel) {
+		if (this.accessibleNameRef || this.accessibleName) {
 			return undefined;
 		}
+		const ids = [];
 
-		return this.shouldRenderH1 ? this.headerID : undefined;
-	}
+		if (this.isMultiSelect || this.isSingleSelect || this.isDelete) {
+			ids.push(this.modeLabelID);
+		}
 
+		if (this.shouldRenderH1) {
+			ids.push(this.headerID);
+		}
+
+		return ids.length ? ids.join(" ") : undefined;
+	}
+	
 	get ariaLabelТxt() {
-		return getEffectiveAriaLabelText(this);
+		return this.getEffectiveAriaLabelText(this);
+	}
+
+	get ariaLabelModeText() {
+		if (this.isMultiSelect) {
+			return this.i18nBundle.getText(ARIA_LABEL_LIST_MULTISELECTABLE);
+		}
+		if (this.isSingleSelect) {
+			return this.i18nBundle.getText(ARIA_LABEL_LIST_SELECTABLE);
+		}
+		if (this.isDelete) {
+			return this.i18nBundle.getText(ARIA_LABEL_LIST_DELETABLE);
+		}
+
+		return undefined;
 	}
 
 	get grows() {

package/dist/Popover.js

@@ -666,7 +666,7 @@ class Popover extends Popup {
 	}
 
 	get _ariaLabelledBy() { // Required by Popup.js
-		return this.ariaLabel ? undefined : "ui5-popup-header";
+		return this.accessibleName ? undefined : "ui5-popup-header";
 	}
 
 	get _ariaModal() { // Required by Popup.js

package/dist/Popup.js

@@ -67,14 +67,14 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the aria-label attribute for the popup
+		 * Sets the accessible aria name of the component.
 		 *
 		 * @type {String}
 		 * @defaultvalue ""
-		 * @private
-		 * @since 1.0.0-rc.8
+		 * @public
+		 * @since 1.0.0-rc.15
 		 */
-		ariaLabel: {
+		 accessibleName: {
 			type: String,
 			defaultValue: undefined,
 		},
@@ -535,7 +535,7 @@ class Popup extends UI5Element {
 	 * @protected
 	 */
 	get _ariaLabel() {
-		return this.ariaLabel || undefined;
+		return this.accessibleName || undefined;
 	}
 
 	get _root() {