@ui5/webcomponents 0.31.20 → 0.31.24

package/CHANGELOG.md

@@ -3,6 +3,72 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.31.24](https://github.com/SAP/ui5-webcomponents/compare/v0.31.23...v0.31.24) (2021-11-23)
+
+
+### Bug Fixes
+
+* adding stable selectors for tab container and shellbar ([#4369](https://github.com/SAP/ui5-webcomponents/issues/4369)) ([dc2ea58](https://github.com/SAP/ui5-webcomponents/commit/dc2ea58))
+* **ui5-date-picker:** Align day names in hide-week-numbers mode ([#4309](https://github.com/SAP/ui5-webcomponents/issues/4309)) ([9dcc887](https://github.com/SAP/ui5-webcomponents/commit/9dcc887)), closes [#4260](https://github.com/SAP/ui5-webcomponents/issues/4260)
+* **ui5-tab-container:** selector fixed ([#4261](https://github.com/SAP/ui5-webcomponents/issues/4261)) ([#4273](https://github.com/SAP/ui5-webcomponents/issues/4273)) ([735d9c4](https://github.com/SAP/ui5-webcomponents/commit/735d9c4))
+
+
+
+
+
+## [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)
 
 

package/dist/CalendarHeader.js

@@ -205,11 +205,11 @@ class CalendarHeader extends UI5Element {
 		return {
 			prevButton: {
 				"ui5-calheader-arrowbtn": true,
-				"ui5-calheader-arrowbtn-disabled": this._isPrevButtonDisabled,
+				"ui5-calheader-arrowbtn-disabled": this.isPrevButtonDisabled,
 			},
 			nextButton: {
 				"ui5-calheader-arrowbtn": true,
-				"ui5-calheader-arrowbtn-disabled": this._isNextButtonDisabled,
+				"ui5-calheader-arrowbtn-disabled": this.isNextButtonDisabled,
 			},
 		};
 	}

package/dist/Card.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 { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import findNodeOwner from "@ui5/webcomponents-base/dist/util/findNodeOwner.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 +114,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 +255,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 +323,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/DayPicker.js

@@ -318,6 +318,10 @@ class DayPicker extends CalendarPart {
 		}
 
 		this._dayNames[1].classes += " ui5-dp-firstday";
+
+		if (this.shouldHideWeekNumbers) {
+			this._dayNames.shift();
+		}
 	}
 
 	onAfterRendering() {
@@ -721,6 +725,7 @@ class DayPicker extends CalendarPart {
 		return {
 			wrapper: {
 				display: this._hidden ? "none" : "flex",
+				"justify-content": "center",
 			},
 			main: {
 				width: "100%",

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

@@ -820,6 +820,7 @@ class List extends UI5Element {
 			} else {
 				this.focusPreviouslyFocusedItem();
 			}
+			event.stopImmediatePropagation();
 		}
 
 		this.setForwardingFocus(false);

package/dist/TabContainer.js

@@ -458,7 +458,7 @@ class TabContainer extends UI5Element {
 	}
 
 	async _onOverflowButtonClick(event) {
-		const button = this.overflowButton[0] || this.getDomRef().querySelector(".ui-tc__overflowButton > ui5-button");
+		const button = this.overflowButton[0] || this.getDomRef().querySelector(".ui-tc__overflowButton > [ui5-button]");
 
 		if (event.target !== button) {
 			return;