merge master branch

packages/base/hash.txt

@@ -1 +1 @@
-avQhy8gtwMimZE+mCLg8Gw86C/w=
+l1N0xsUogX77IYzaI03HswCPPUc=

packages/base/src/util/AriaLabelHelper.js

@@ -2,8 +2,8 @@ import findNodeOwner from "./findNodeOwner.js";
 
 const getEffectiveAriaLabelText = el => {
 	if (!el.accessibleNameRef) {
-		if (el.ariaLabel) {
-			return el.ariaLabel;
+		if (el.accessibleName) {
+			return el.accessibleName;
 		}
 
 		return undefined;

packages/fiori/src/Timeline.hbs

@@ -1,5 +1,5 @@
 <div class="ui5-timeline-root" @focusin={{_onfocusin}}>
-	<ul class="ui5-timeline-list" role="listbox" aria-live="polite" aria-label="{{ariaLabel}}">
+	<ul class="ui5-timeline-list" role="listbox" aria-live="polite" aria-label="{{accessibleName}}">
 		{{#each items}}
 			<li class="ui5-timeline-list-item" style="list-style-type: none;">
 				<slot name="{{this._individualSlot}}"></slot>

packages/fiori/src/Wizard.js

@@ -58,13 +58,14 @@ const metadata = {
 	managedSlots: true,
 	properties: /** @lends sap.ui.webcomponents.fiori.Wizard.prototype */ {
 		/**
-		 * Defines the aria-label text of the <code>ui5-wizard</code>.
+		 * Sets the accessible aria name of the component.
 		 *
 		 * @type {String}
 		 * @defaultvalue undefined
-		 * @private
+		 * @public
+		 * @since 1.0.0-rc.15
 		 */
-		ariaLabel: {
+		accessibleName: {
 			type: String,
 			defaultValue: undefined,
 		},
@@ -805,7 +806,7 @@ class Wizard extends UI5Element {
 	}
 
 	get ariaLabelText() {
-		return this.ariaLabel || this.i18nBundle.getText(WIZARD_NAV_ARIA_ROLE_DESCRIPTION);
+		return this.accessibleName || this.i18nBundle.getText(WIZARD_NAV_ARIA_ROLE_DESCRIPTION);
 	}
 
 	get effectiveStepSwitchThreshold() {

packages/fiori/src/WizardStep.js

@@ -103,12 +103,14 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the aria-label of the step.
+		 * Sets the accessible aria name of the component.
+		 *
 		 * @type {boolean}
 		 * @defaultvalue ""
-		 * @private
+		 * @public
+		 * @since 1.0.0-rc.15
 		 */
-		ariaLabel: {
+		accessibleName: {
 			type: String,
 		},
 

packages/fiori/src/themes/ShellBar.css

@@ -231,13 +231,14 @@ slot[name="profile"] {
 }
 
 .ui5-shellbar-overflow-container-left {
-	max-width: calc(50% - 1.5rem);
+
 	justify-content: flex-start;
 	margin-right: 0.5rem;
 }
 
 .ui5-shellbar-with-coPilot .ui5-shellbar-overflow-container-left {
 	flex-basis: 50%;
+	max-width: calc(50% - 1.5rem);
 }
 
 .ui5-shellbar-menu-button {
@@ -408,6 +409,7 @@ slot[name="profile"] {
 	pointer-events: none;
 }
 
+
 /**
 * IE styles
 */

packages/fiori/test/pages/FCL.html

@@ -596,7 +596,7 @@
 						<ui5-title level="H5">Rating:</ui5-title>
 						<ui5-rating-indicator
 							id="productRating"
-							aria-label="Hello World"
+							accessible-name="Hello World"
 							value="3.5"
 						></ui5-rating-indicator>
 					</div>

packages/fiori/test/samples/Bar2.sample.html

@@ -0,0 +1,81 @@
+<header>
+	<div class="control-header">Bar</div>
+	<div class="component-heading-since">
+		<span><!--since_tag_marker--></span>
+	</div>
+</header>
+
+<div class="component-package">@ui5/webcomponents-fiori</div>
+
+<div class="control-tag">&lt;ui5-bar&gt;</div>
+
+<section>
+	<h3>Header Bar</h3>
+	<div class="snippet">
+		<ui5-bar design="Header">
+			<ui5-button icon="home" title="Go home" design="Transparent" slot="startContent"></ui5-button>
+			<ui5-label id="basic-label">Header Title</ui5-label>
+			<ui5-button icon="action-settings" title="Go to settings" slot="endContent"></ui5-button>
+		</ui5-bar>
+	</div>
+	<pre class="prettyprint lang-html"><xmp>
+<ui5-bar design="Header">
+	<ui5-button icon="home" title="Go home" design="Transparent" slot="startContent"></ui5-button>
+	<ui5-label>Header Title</ui5-label>
+	<ui5-button icon="action-settings" title="Go to settings" slot="endContent"></ui5-button>
+</ui5-bar>
+	</xmp></pre>
+</section>
+<section>
+	<h3>Subheader Bar</h3>
+	<div class="snippet">
+		<ui5-bar design="Subheader">
+			<ui5-button icon="home" title="Go home" slot="startContent"></ui5-button>
+			<ui5-label id="basic-label">Subheader Title</ui5-label>
+			<ui5-button icon="action-settings" title="Go to settings" slot="endContent"></ui5-button>
+		</ui5-bar>
+	</div>
+	<pre class="prettyprint lang-html"><xmp>
+<ui5-bar design="Subheader">
+	<ui5-button icon="home" title="Go home" slot="startContent"></ui5-button>
+	<ui5-label>Subheader Title</ui5-label>
+	<ui5-button icon="action-settings" title="Go to settings" slot="endContent"></ui5-button>
+</ui5-bar>
+	</xmp></pre>
+</section>
+<section>
+	<h3>Footer Bar</h3>
+	<div class="snippet">
+		<ui5-bar design="Footer">
+			<ui5-button design="Positive" slot="endContent">Agree</ui5-button>
+			<ui5-button design="Negative" slot="endContent">Decline</ui5-button>
+			<ui5-button design="Transparent" slot="endContent">Cancel</ui5-button>
+		</ui5-bar>
+	</div>
+	<pre class="prettyprint lang-html"><xmp>
+<ui5-bar design="Footer">
+	<ui5-button design="Positive" slot="endContent">Agree</ui5-button>
+	<ui5-button design="Negative" slot="endContent">Decline</ui5-button>
+	<ui5-button design="Transparent" slot="endContent">Cancel</ui5-button>
+</ui5-bar>
+	</xmp></pre>
+</section>
+<section>
+	<h3>FloatingFooter Bar</h3>
+	<div class="snippet">
+		<ui5-bar design="FloatingFooter">
+			<ui5-button design="Positive" slot="endContent">Agree</ui5-button>
+			<ui5-button design="Negative" slot="endContent">Decline</ui5-button>
+			<ui5-button design="Transparent" slot="endContent">Cancel</ui5-button>
+		</ui5-bar>
+	</div>
+	<pre class="prettyprint lang-html"><xmp>
+<ui5-bar design="FloatingFooter">
+	<ui5-button design="Positive" slot="endContent">Agree</ui5-button>
+	<ui5-button design="Negative" slot="endContent">Decline</ui5-button>
+	<ui5-button design="Transparent" slot="endContent">Cancel</ui5-button>
+</ui5-bar>
+	</xmp></pre>
+</section>
+
+<!-- JSDoc marker -->

packages/fiori/test/samples/FlexibleColumnLayout.sample.html

@@ -124,7 +124,7 @@ <h3>FlexibleColumnLayout - One Initial Column</h3>
 							<ui5-title level="H5">Rating:</ui5-title>
 							<ui5-rating-indicator
 								id="productRating"
-								aria-label="Hello World"
+								accessible-name="Hello World"
 								value="3.5"
 							></ui5-rating-indicator>
 						</div>

packages/main/src/Avatar.hbs

@@ -10,8 +10,8 @@
 	role="{{_role}}"
 	aria-haspopup="{{_ariaHasPopup}}"
 >
-	{{#if image}}
-		<span class="ui5-avatar-img" style="{{styles.img}}" role="img" aria-label="{{accessibleNameText}}"></span>
+	{{#if hasImage}}
+		<slot></slot>
 	{{else if icon}}
 		<ui5-icon class="ui5-avatar-icon" name="{{icon}}" accessible-name="{{accessibleNameText}}"></ui5-icon>
 	{{else if initials}}

packages/main/src/Avatar.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 encodeCSS from "@ui5/webcomponents-base/dist/util/encodeCSS.js";
 
 import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 // Template
@@ -15,7 +14,6 @@ import AvatarCss from "./generated/themes/Avatar.css.js";
 import Icon from "./Icon.js";
 import AvatarSize from "./types/AvatarSize.js";
 import AvatarShape from "./types/AvatarShape.js";
-import AvatarFitType from "./types/AvatarFitType.js";
 import AvatarColorScheme from "./types/AvatarColorScheme.js";
 
 /**
@@ -24,6 +22,7 @@ import AvatarColorScheme from "./types/AvatarColorScheme.js";
 const metadata = {
 	tag: "ui5-avatar",
 	languageAware: true,
+	managedSlots: true,
 	properties: /** @lends sap.ui.webcomponents.main.Avatar.prototype */ {
 
 		/**
@@ -44,20 +43,10 @@ const metadata = {
 			type: Boolean,
 		},
 
-		/**
-		 * Defines the source path to the desired image.
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		image: {
-			type: String,
-		},
-
 		/**
 		 * Defines the name of the UI5 Icon, that would be displayed.
 		 * <br>
-		 * <b>Note:</b> If <code>image</code> is set, the property would be ignored.
+		 * <b>Note:</b> If <code>image</code> slot is provided, the property would be ignored.
 		 * <br>
 		 * <b>Note:</b> You should import the desired icon first, then use its name as "icon".
 		 * <br><br>
@@ -133,24 +122,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the fit type of the desired image.
-		 * <br><br>
-		 * Available options are:
-		 * <ul>
-		 * <li><code>Cover</code></li>
-		 * <li><code>Contain</code></li>
-		 * </ul>
-		 * @type {AvatarFitType}
-		 * @defaultvalue "Cover"
-		 * @public
-		 */
-		imageFitType: {
-			type: AvatarFitType,
-			defaultValue: AvatarFitType.Cover,
-		},
-
-		/**
-		 * Defines the background color of the content.
+		 * Defines the background color of the desired image.
 		 * <br><br>
 		 * Available options are:
 		 * <ul>
@@ -211,8 +183,31 @@ const metadata = {
 			type: String,
 			noAttribute: true,
 		},
+
+		_hasImage: {
+			type: Boolean,
+		},
 	},
 	slots: /** @lends sap.ui.webcomponents.main.Avatar.prototype */ {
+		/**
+		 * Receives the desired <code>&lt;img&gt;</code> tag
+		 *
+		 * <b>Note:</b> If you experience flickering of the provided image, you can hide the component until it is being defined with the following CSS:
+		 * <br /> <br />
+		 * <code>
+		 *		ui5-avatar:not(:defined) { <br />
+		 *			&nbsp;visibility: hidden; <br />
+		 *		} <br />
+		 * </code>
+		 * @type {HTMLElement}
+		 * @slot
+		 * @public
+		 * @since 1.0.0-rc.15
+		 */
+		"default": {
+			propertyName: "image",
+			type: HTMLElement,
+		},
 	},
 	events: /** @lends sap.ui.webcomponents.main.Avatar.prototype */ {
 		/**
@@ -343,12 +338,9 @@ class Avatar extends UI5Element {
 		return this.i18nBundle.getText(AVATAR_TOOLTIP) || undefined;
 	}
 
-	get styles() {
-		return {
-			img: {
-				"background-image": `url("${encodeCSS(this.image)}")`,
-			},
-		};
+	get hasImage() {
+		this._hasImage = !!this.image.length;
+		return this._hasImage;
 	}
 
 	_onclick(event) {

packages/main/src/Button.js

@@ -153,13 +153,14 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the aria-label attribute for the button
+		 * Sets the accessible aria name of the component.
+		 *
 		 * @type {String}
 		 * @defaultvalue: ""
-		 * @private
-		 * @since 1.0.0-rc.7
+		 * @public
+		 * @since 1.0.0-rc.15
 		 */
-		ariaLabel: {
+		accessibleName: {
 			type: String,
 			defaultValue: undefined,
 		},

packages/main/src/Card.js

@@ -115,14 +115,14 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the aria-label attribute for the component
+		 * Sets the accessible aria name of the component.
 		 *
 		 * @type {String}
-		 * @since 1.0.0-rc.9
-		 * @private
+		 * @public
+		 * @since 1.0.0-rc.15
 		 * @defaultvalue ""
 		 */
-		ariaLabel: {
+		accessibleName: {
 			type: String,
 		},
 

packages/main/src/CheckBox.hbs

@@ -15,7 +15,7 @@
 >
 		<div id="{{_id}}-CbBg" class="ui5-checkbox-inner">
 			{{#if isCompletelyChecked}}
-				<ui5-icon name="accept" class="ui5-checkbox-icon"></ui5-icon>
+				<ui5-icon aria-hidden="true" name="accept" class="ui5-checkbox-icon"></ui5-icon>
 			{{/if}}
 
 			<input
@@ -24,6 +24,7 @@
 				?checked="{{checked}}"
 				?readonly="{{readonly}}"
 				?disabled="{{disabled}}"
+				tabindex="-1"
 				aria-hidden="true"
 				data-sap-no-tab-ref
 			/>

packages/main/src/CheckBox.js

@@ -166,13 +166,14 @@ const metadata = {
 		},
 
 		/**
-		 * Determines the <code>aria-label</code>, set on the component root tag.
+		 * Sets the accessible aria name of the component.
+		 *
 		 * @type {string}
 		 * @defaultvalue undefined
-		 * @private
-		 * @since 1.0.0-rc.8
+		 * @public
+		 * @since 1.0.0-rc.15
 		 */
-		ariaLabel: {
+		accessibleName: {
 			type: String,
 			defaultValue: undefined,
 		},