@ui5/webcomponents 0.0.0-8db0ce01a → 0.0.0-a3eca7ade

package/dist/AvatarGroup.js

@@ -2,11 +2,21 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+
 import {
 	isEnter,
 	isSpace,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 
+import {
+	AVATAR_GROUP_DISPLAYED_HIDDEN_LABEL,
+	AVATAR_GROUP_SHOW_COMPLETE_LIST_LABEL,
+	AVATAR_GROUP_ARIA_LABEL_INDIVIDUAL,
+	AVATAR_GROUP_ARIA_LABEL_GROUP,
+	AVATAR_GROUP_MOVE,
+} from "./generated/i18n/i18n-defaults.js";
+
 // Template
 import AvatarGroupTemplate from "./generated/templates/AvatarGroupTemplate.lit.js";
 // Styles
@@ -15,7 +25,7 @@ import AvatarGroupCss from "./generated/themes/AvatarGroup.css.js";
 import Button from "./Button.js";
 import AvatarSize from "./types/AvatarSize.js";
 import AvatarGroupType from "./types/AvatarGroupType.js";
-import AvatarBackgroundColor from "./types/AvatarBackgroundColor.js";
+import AvatarColorScheme from "./types/AvatarColorScheme.js";
 
 const OVERFLOW_BTN_CLASS = "ui5-avatar-group-overflow-btn";
 const AVATAR_GROUP_OVERFLOW_BTN_SELECTOR = `.${OVERFLOW_BTN_CLASS}`;
@@ -32,7 +42,7 @@ const offsets = {
 	},
 	[AvatarSize.M]: {
 		[AvatarGroupType.Individual]: "0.125rem",
-		[AvatarGroupType.Group]: "-1.62rem",
+		[AvatarGroupType.Group]: "-1.625rem",
 	},
 	[AvatarSize.L]: {
 		[AvatarGroupType.Individual]: "0.125rem",
@@ -40,7 +50,7 @@ const offsets = {
 	},
 	[AvatarSize.XL]: {
 		[AvatarGroupType.Individual]: "0.25rem",
-		[AvatarGroupType.Group]: "-2.7rem",
+		[AvatarGroupType.Group]: "-2.75rem",
 	},
 };
 
@@ -70,23 +80,19 @@ const metadata = {
 		},
 
 		/**
-		 * Defines predefined size of the <code>ui5-avatar</code>.
+		 * Defines the aria-haspopup value of the component on:
 		 * <br><br>
-		 * Available options are:
 		 * <ul>
-		 * <li><code>XS</code></li>
-		 * <li><code>S</code></li>
-		 * <li><code>M</code></li>
-		 * <li><code>L</code></li>
-		 * <li><code>XL</code></li>
+		 * <li> the whole container when <code>type</code> property is <code>Group</code></li>
+		 * <li> the default "More" overflow button when <code>type</code> is <code>Individual</code></li>
 		 * </ul>
-		 * @type {AvatarSize}
-		 * @defaultValue "S"
-		 * @public
+		 * <br><br>
+		 * @type String
+		 * @since 1.0.0-rc.15
+		 * @protected
 		 */
-		avatarSize: {
+		ariaHaspopup: {
 			type: String,
-			defaultValue: AvatarSize.S,
 		},
 
 		/**
@@ -96,11 +102,10 @@ const metadata = {
 			type: String,
 			noAttribute: true,
 		},
-
 	},
 	slots: /** @lends sap.ui.webcomponents.main.AvatarGroup.prototype */ {
 		/**
-		 * Defines the items of the <code>ui5-avatar-group</code>. Use the <code>ui5-avatar</code> component as an item.
+		 * Defines the items of the component. Use the <code>ui5-avatar</code> component as an item.
 		 * <br><br>
 		 * <b>Note:</b> The UX guidelines recommends using avatars with "Circle" shape.
 		 * Moreover, if you use avatars with "Square" shape, there will be visual inconsistency
@@ -114,10 +119,10 @@ const metadata = {
 			propertyName: "items",
 		},
 		/**
-		 * Defines the overflow button of <code>ui5-avatar-group</code>.
+		 * Defines the overflow button of the component.
 		 * <b>Note:</b> We recommend using the <code>ui5-button</code> component.
 		 * <br><br>
-		 * <b>Note:</b> If this slot is not used, the <code>ui5-avatar-group</code> will
+		 * <b>Note:</b> If this slot is not used, the component will
 		 * display the built-in overflow button.
 		 * @type {HTMLElement}
 		 * @slot overflowButton
@@ -130,7 +135,7 @@ const metadata = {
 	},
 	events: /** @lends sap.ui.webcomponents.main.AvatarGroup.prototype */ {
 		/**
-		* Fired when the <code>ui5-avatar-group</code> is activated either with a
+		* Fired when the component is activated either with a
 		* click/tap or by using the Enter or Space key.
 		* @param {HTMLElement} targetRef The DOM ref of the clicked item.
 		* @param {boolean} overflowButtonClicked indicates if the overflow button is clicked
@@ -146,7 +151,7 @@ const metadata = {
 		},
 		/**
 		* Fired when the count of visible <code>ui5-avatar</code> elements in the
-		* <code>ui5-avatar-group</code> has changed
+		* component has changed
 		* @event
 		* @public
 		* @since 1.0.0-rc.13
@@ -196,6 +201,30 @@ const metadata = {
  * <li>You want to use it for other visual content than avatars.</li>
  * </ul>
  *
+ * <h3>Keyboard Handling</h3>
+ * The component provides advanced keyboard handling.
+ * When focused, the user can use the following keyboard
+ * shortcuts in order to perform a navigation:
+ * <br>
+ * - <code>type</code> Individual:
+ * <br>
+ * <ul>
+ * <li>[TAB] - Move focus to the overflow button</li>
+ * <li>[LEFT] - Navigate one avatar to the left</li>
+ * <li>[RIGHT] - Navigate one avatar to the right</li>
+ * <li>[HOME] - Navigate to the first avatar</li>
+ * <li>[END] - Navigate to the last avatar</li>
+ * <li>[SPACE],[ENTER],[RETURN] - Trigger <code>ui5-click</code> event</li>
+ * </ul>
+ * <br>
+ * - <code>type</code> Group:
+ * <br>
+ * <ul>
+ * <li>[TAB] - Move focus to the next interactive element after the component</li>
+ * <li>[SPACE],[ENTER],[RETURN] - Trigger <code>ui5-click</code> event</li>
+ * </ul>
+ * <br>
+ *
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.AvatarGroup
@@ -241,10 +270,14 @@ class AvatarGroup extends UI5Element {
 		];
 	}
 
+	static async onDefine() {
+		AvatarGroup.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+	}
+
 	/**
 	 * Returns an array containing the <code>ui5-avatar</code> instances that are currently not displayed due to lack of space.
 	 * @readonly
-	 * @type { Array }
+	 * @type { HTMLElement[] }
 	 * @defaultValue []
 	 * @public
 	 */
@@ -253,9 +286,9 @@ class AvatarGroup extends UI5Element {
 	}
 
 	/**
-	 * Returns an array containing the <code>AvatarBackgroundColor</code> values that correspond to the avatars in the <code>ui5-avatar-group</code>.
+	 * Returns an array containing the <code>AvatarColorScheme</code> values that correspond to the avatars in the component.
 	 * @readonly
-	 * @type { Array }
+	 * @type { AvatarColorScheme[] }
 	 * @defaultValue []
 	 * @public
 	 */
@@ -267,6 +300,45 @@ class AvatarGroup extends UI5Element {
 		return this.overflowButton.length ? this.overflowButton[0] : undefined;
 	}
 
+	get _ariaLabelText() {
+		const hiddenItemsCount = this.hiddenItems.length;
+		const typeLabelKey = this._isGroup ? AVATAR_GROUP_ARIA_LABEL_GROUP : AVATAR_GROUP_ARIA_LABEL_INDIVIDUAL;
+
+		// avatar type label
+		let text = AvatarGroup.i18nBundle.getText(typeLabelKey);
+
+		// add displayed-hidden avatars label
+		text += ` ${AvatarGroup.i18nBundle.getText(AVATAR_GROUP_DISPLAYED_HIDDEN_LABEL, this._itemsCount - hiddenItemsCount, hiddenItemsCount)}`;
+
+		if (this._isGroup) {
+			// the container role is "button", add the message for complete list activation
+			text += ` ${AvatarGroup.i18nBundle.getText(AVATAR_GROUP_SHOW_COMPLETE_LIST_LABEL)}`;
+		} else {
+			// the container role is "group", add the "how to navigate" message
+			text += ` ${AvatarGroup.i18nBundle.getText(AVATAR_GROUP_MOVE)}`;
+		}
+
+		return text;
+	}
+
+	get _overflowButtonAriaLabelText() {
+		return this._isGroup ? undefined : AvatarGroup.i18nBundle.getText(AVATAR_GROUP_SHOW_COMPLETE_LIST_LABEL);
+	}
+
+	get _containerAriaHasPopup() {
+		return this._isGroup ? this._getAriaHasPopup() : undefined;
+	}
+
+	get _overflowButtonAccAttributes() {
+		return {
+			hasPopup: this._isGroup ? undefined : this._getAriaHasPopup(),
+		};
+	}
+
+	get _role() {
+		return this._isGroup ? "button" : "group";
+	}
+
 	get _hiddenStartIndex() {
 		return this._itemsCount - this._hiddenItems;
 	}
@@ -316,6 +388,23 @@ class AvatarGroup extends UI5Element {
 		return button.offsetWidth;
 	}
 
+	get firstAvatarSize() {
+		return this.items[0].size;
+	}
+
+	get classes() {
+		return {
+			overflowButton: {
+				"ui5-avatar-group-overflow-btn": true,
+				"ui5-avatar-group-overflow-btn-xs": this.firstAvatarSize === "XS",
+				"ui5-avatar-group-overflow-btn-s": this.firstAvatarSize === "S",
+				"ui5-avatar-group-overflow-btn-m": this.firstAvatarSize === "M",
+				"ui5-avatar-group-overflow-btn-l": this.firstAvatarSize === "L",
+				"ui5-avatar-group-overflow-btn-xl": this.firstAvatarSize === "XL",
+			},
+		};
+	}
+
 	onAfterRendering() {
 		this._overflowItems();
 	}
@@ -341,20 +430,23 @@ class AvatarGroup extends UI5Element {
 	}
 
 	_onkeydown(event) {
-		if (isEnter(event)) {
-			this._fireGroupEvent(event.target);
-		}
-
-		if (isSpace(event)) {
-			// prevent scrolling
-			event.preventDefault();
+		// when type is "Individual" the ui5-avatar and ui5-button both
+		// fire "click" event when SPACE or ENTER are pressed and
+		// AvatarGroup "click" is fired in their handlers (_onClick, _onUI5Click).
+		if (this._isGroup) {
+			if (isEnter(event)) {
+				this._fireGroupEvent(event.target);
+			} else if (isSpace(event)) {
+				// prevent scrolling
+				event.preventDefault();
+			}
 		}
 	}
 
 	_onkeyup(event) {
-		if (!event.shiftKey && isSpace(event)) {
-			event.preventDefault();
+		if (!event.shiftKey && isSpace(event) && this._isGroup) {
 			this._fireGroupEvent(event.target);
+			event.preventDefault();
 		}
 	}
 
@@ -400,14 +492,9 @@ class AvatarGroup extends UI5Element {
 			const colorIndex = this._getNextBackgroundColor();
 			avatar.interactive = !this._isGroup;
 
-			if (!avatar.getAttribute("background-color")) {
+			if (!avatar.getAttribute("_color-scheme")) {
 				// AvatarGroup respects colors set to ui5-avatar
-				avatar.setAttribute("_background-color", AvatarBackgroundColor[`Accent${colorIndex}`]);
-			}
-
-			if (!avatar.getAttribute("size")) {
-				// AvatarGroup respects sizes set to ui5-avatar
-				avatar.setAttribute("_size", this.avatarSize);
+				avatar.setAttribute("_color-scheme", AvatarColorScheme[`Accent${colorIndex}`]);
 			}
 
 			// last avatar should not be offset as it breaks the container width and focus styles are no set correctly
@@ -501,6 +588,14 @@ class AvatarGroup extends UI5Element {
 			this.fireEvent("overflow");
 		}
 	}
+
+	_getAriaHasPopup() {
+		if (this.ariaHaspopup === "") {
+			return;
+		}
+
+		return this.ariaHaspopup;
+	}
 }
 
 AvatarGroup.define();

package/dist/Badge.js

@@ -1,6 +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 { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 
 // Template
 import BadgeTemplate from "./generated/templates/BadgeTemplate.lit.js";
@@ -19,7 +19,7 @@ const metadata = {
 	properties: /** @lends sap.ui.webcomponents.main.Badge.prototype */  {
 
 		/**
-		 * Defines the color scheme of the <code>ui5-badge</code>.
+		 * Defines the color scheme of the component.
 		 * There are 10 predefined schemes. Each scheme applies different values for the <code>background-color</code> and <code>border-color</code>.
 		 * To use one you can set a number from <code>"1"</code> to <code>"10"</code>. The <code>colorScheme</code> <code>"1"</code> will be set by default.
 		 * <br><br>
@@ -32,11 +32,34 @@ const metadata = {
 			type: String,
 			defaultValue: "1",
 		},
+
+		/**
+		 * Defines if the badge has an icon.
+		 * @private
+		 */
+		_hasIcon: {
+			type: Boolean,
+		},
+
+		/**
+		 * Defines if the badge has only an icon (and no text).
+		 * @private
+		 */
+		_iconOnly: {
+			type: Boolean,
+		},
+
+		/**
+		 * Defines whether the component is pressed.
+		 */
+		active: {
+			type: Boolean,
+		},
 	},
 	managedSlots: true,
 	slots: /** @lends sap.ui.webcomponents.main.Badge.prototype */ {
 		/**
-		 * Defines the text of the <code>ui5-badge</code>.
+		 * Defines the text of the component.
 		 * <br><b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
 		 *
 		 * @type {Node[]}
@@ -48,7 +71,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the <code>ui5-icon</code> to be displayed in the <code>ui5-badge</code>.
+		 * Defines the icon to be displayed in the component.
 		 *
 		 * @type {sap.ui.webcomponents.main.IIcon}
 		 * @slot
@@ -87,12 +110,6 @@ const metadata = {
  * @public
  */
 class Badge extends UI5Element {
-	constructor() {
-		super();
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
-	}
-
 	static get metadata() {
 		return metadata;
 	}
@@ -110,15 +127,20 @@ class Badge extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		Badge.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 
 	onBeforeRendering() {
-		if (this.hasIcon) {
-			this.setAttribute("__has-icon", "");
-		} else {
-			this.removeAttribute("__has-icon");
-		}
+		this._hasIcon = this.hasIcon;
+		this._iconOnly = this.iconOnly;
+	}
+
+	_onmousedown() {
+		this.active = true;
+	}
+
+	_onmouseup() {
+		this.active = false;
 	}
 
 	get hasText() {
@@ -129,8 +151,12 @@ class Badge extends UI5Element {
 		return !!this.icon.length;
 	}
 
+	get iconOnly() {
+		return this.hasIcon && !this.hasText;
+	}
+
 	get badgeDescription() {
-		return this.i18nBundle.getText(BADGE_DESCRIPTION);
+		return Badge.i18nBundle.getText(BADGE_DESCRIPTION);
 	}
 }