@ui5/webcomponents 0.31.19 → 0.31.23

package/CHANGELOG.md

@@ -3,6 +3,83 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.31.23](https://github.com/SAP/ui5-webcomponents/compare/v0.31.22...v0.31.23) (2021-11-17)
+
+
+### Bug Fixes
+
+* **ui5-input:** escape HTML before highlighting suggestions (XSS) ([#4296](https://github.com/SAP/ui5-webcomponents/issues/4296)) ([8120f6c](https://github.com/SAP/ui5-webcomponents/commit/8120f6c)), closes [#4245](https://github.com/SAP/ui5-webcomponents/issues/4245)
+* **ui5-link:** add underlining in the regular state in hcb / hcw ([#3960](https://github.com/SAP/ui5-webcomponents/issues/3960)) ([e44dc97](https://github.com/SAP/ui5-webcomponents/commit/e44dc97))
+
+
+
+
+
+## [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)
 
 

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");
 		}

package/dist/List.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,
 		},
@@ -218,7 +222,7 @@ const metadata = {
 		 * @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,
 		},
 	},
@@ -496,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");
 	}
@@ -508,6 +516,19 @@ 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;
 	}
@@ -516,14 +537,37 @@ class List extends UI5Element {
 		if (this.accessibleNameRef || this.accessibleName) {
 			return undefined;
 		}
-	
-		return this.shouldRenderH1 ? this.headerID : undefined;
+		const ids = [];
+
+		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 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() {
 		return this.growing !== ListGrowingMode.None;
 	}

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() {