@ui5/webcomponents 0.31.21 → 0.31.22

package/dist/generated/templates/CardTemplate.lit.js

@@ -2,7 +2,7 @@
 /* eslint no-unused-vars: 0 */
 import ifDefined from '@ui5/webcomponents-base/dist/renderer/ifDefined.js';
 import { html, svg, repeat, classMap, styleMap, unsafeHTML, setTags, setSuffix } from '@ui5/webcomponents-base/dist/renderer/LitRenderer.js';
-const block0 = (context) => { return html`<div class="${classMap(context.classes.main)}" dir="${ifDefined(context.effectiveDir)}" role="region" aria-label="${ifDefined(context.ariaLabelText)}">${ context.hasHeader ? block1(context) : undefined }<section role="group" aria-label="${ifDefined(context.ariaCardContentLabel)}"><slot></slot></section></div>`; };
+const block0 = (context) => { return html`<div class="${classMap(context.classes.main)}" dir="${ifDefined(context.effectiveDir)}" role="region" aria-label="${ifDefined(context.ariaLabelText)}">${ context.hasHeader ? block1(context) : undefined }<div role="group" aria-label="${ifDefined(context.ariaCardContentLabel)}"><slot></slot></div></div>`; };
 const block1 = (context) => { return html`<div class="${classMap(context.classes.header)}" @click="${context._headerClick}" @keydown="${context._headerKeydown}" @keyup="${context._headerKeyup}" role="${ifDefined(context.ariaHeaderRole)}" aria-labelledby="${ifDefined(context.ariaLabelledByHeader)}" aria-level="${ifDefined(context._ariaLevel)}" aria-roledescription="${ifDefined(context.ariaCardHeaderRoleDescription)}" tabindex="0">${ context.hasAvatar ? block2(context) : undefined }<div class="ui5-card-header-text">${ context.heading ? block3(context) : undefined }${ context.subheading ? block4(context) : undefined }</div>${ context.hasAction ? block5(context) : block6(context) }</div>`; };
 const block2 = (context) => { return html`<div id="${ifDefined(context._id)}-avatar" class="ui5-card-avatar" aria-label="${ifDefined(context.ariaCardAvatarLabel)}"><slot name="avatar"></slot></div>`; };
 const block3 = (context) => { return html`<div id="${ifDefined(context._id)}-heading" class="ui5-card-heading" part="heading">${ifDefined(context.heading)}</div>`; };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "0.31.21",
+  "version": "0.31.22",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -30,14 +30,14 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "0.31.21",
-    "@ui5/webcomponents-icons": "0.31.21",
-    "@ui5/webcomponents-ie11": "0.31.21",
-    "@ui5/webcomponents-localization": "0.31.21",
-    "@ui5/webcomponents-theme-base": "0.31.21"
+    "@ui5/webcomponents-base": "0.31.22",
+    "@ui5/webcomponents-icons": "0.31.22",
+    "@ui5/webcomponents-ie11": "0.31.22",
+    "@ui5/webcomponents-localization": "0.31.22",
+    "@ui5/webcomponents-theme-base": "0.31.22"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "0.31.21",
+    "@ui5/webcomponents-tools": "0.31.22",
     "chromedriver": "88.0.0"
   }
 }

package/src/Card.hbs

@@ -38,7 +38,7 @@
 		</div>
 	{{/if}}
 
-	<section role="group" aria-label="{{ariaCardContentLabel}}">
+	<div role="group" aria-label="{{ariaCardContentLabel}}">
 		<slot></slot>
-	</section>
+	</div>
 </div>

package/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 { 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";
@@ -66,19 +65,6 @@ const metadata = {
 		action: {
 			type: HTMLElement,
 		},
-
-		/**
-		 * 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}
-		 * @defaultvalue ""
-		 * @public
-		 * @since 1.0.0-rc.16
-		 */
-		accessibleName: {
-			type: String,
-		},
 	},
 	properties: /** @lends sap.ui.webcomponents.main.Card.prototype */ {
 
@@ -127,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: "",
 		},
 
 		/**
@@ -268,6 +254,9 @@ class Card extends UI5Element {
 		return !!(this.heading || this.subheading || this.status || this.hasAction || this.avatar);
 	}
 
+	// 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) {
@@ -279,7 +268,7 @@ class Card extends UI5Element {
 	
 		return this.getAriaLabelledByTexts(el);
 	};
-
+	
 	getAriaLabelledByTexts(el, ownerDocument, readyIds = "") {
 		const ids = (readyIds && readyIds.split(" ")) || el.accessibleNameRef.split(" ");
 		const owner = ownerDocument || findNodeOwner(el);
@@ -296,9 +285,9 @@ class Card extends UI5Element {
 	
 		return result;
 	};
-	
+
 	get ariaLabelText() {
-		const effectiveAriaLabelText = getEffectiveAriaLabelText(this),
+		const effectiveAriaLabelText = this.getEffectiveAriaLabelText(this),
 			effectiveAriaLabel = effectiveAriaLabelText ? ` ${effectiveAriaLabelText}` : "";
 		return this.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD) + effectiveAriaLabel;
 	}

package/.port

@@ -1 +0,0 @@
-8080