@ui5/webcomponents 0.0.0-306572ffa → 0.0.0-3236d56be

package/src/ListItem.hbs

@@ -1,7 +1,7 @@
 <li
-	tabindex="{{_tabIndex}}"
+	part="native-li"
+	tabindex="{{tabIndex}}"
 	class="{{classes.main}}"
-	dir="{{effectiveDir}}"
 	@focusin="{{_onfocusin}}"
 	@focusout="{{_onfocusout}}"
 	@keyup="{{_onkeyup}}"
@@ -11,11 +11,16 @@
 	@touchstart="{{_ontouchstart}}"
 	@touchend="{{_ontouchend}}"
 	@click="{{_onclick}}"
-	aria-selected="{{ariaSelected}}"
 	role="{{_accInfo.role}}"
 	aria-expanded="{{_accInfo.ariaExpanded}}"
+	title="{{title}}"
 	aria-level="{{_accInfo.ariaLevel}}"
-	style="list-style-type: none;"
+	aria-haspopup="{{_accInfo.ariaHaspopup}}"
+	aria-posinset="{{_accInfo.posinset}}"
+	aria-setsize="{{_accInfo.setsize}}"
+	aria-describedby="{{_id}}-invisibleText-describedby"
+	aria-labelledby="{{_id}}-invisibleText {{_id}}-content"
+	aria-disabled="{{ariaDisabled}}"
 >
 		{{> listItemPreContent}}
 
@@ -43,6 +48,9 @@
 		{{#if placeSelectionElementAfter}}
 			{{> selectionElement}}
 		{{/if}}
+
+		<span id="{{_id}}-invisibleText" class="ui5-hidden-text">{{_accInfo.listItemAriaLabel}} {{accessibleName}}</span>
+		<span id="{{_id}}-invisibleText-describedby" class="ui5-hidden-text">{{_accInfo.ariaSelectedText}}</span>
 </li>
 
 {{#*inline "listItemPreContent"}}{{/inline}}
@@ -53,19 +61,21 @@
 
 {{#*inline "selectionElement"}}
 	{{#if modeSingleSelect}}
-		<ui5-radiobutton
+		<ui5-radio-button
 				?disabled="{{isInactive}}"
+				accessible-name="{{_accInfo.ariaLabelRadioButton}}"
 				tabindex="-1"
 				id="{{_id}}-singleSelectionElement"
 				class="ui5-li-singlesel-radiobtn"
-				?selected="{{selected}}"
+				?checked="{{selected}}"
 				@click="{{onSingleSelectionComponentPress}}">
-		</ui5-radiobutton>
+		</ui5-radio-button>
 	{{/if}}
 
 	{{#if modeMultiSelect}}
 		<ui5-checkbox
 				?disabled="{{isInactive}}"
+				?indeterminate={{indeterminate}}
 				tabindex="-1"
 				id="{{_id}}-multiSelectionElement"
 				class="ui5-li-multisel-cb"
@@ -75,15 +85,19 @@
 		</ui5-checkbox>
 	{{/if}}
 
-	{{#if modeDelete}}
+	{{#if renderDeleteButton}}
 		<div class="ui5-li-deletebtn">
 			<ui5-button
+				tabindex="-1"
+				data-sap-no-tab-ref
 				id="{{_id}}-deleteSelectionElement"
 				design="Transparent"
 				icon="decline"
+				?disabled="{{disableDeleteButton}}"
 				@click="{{onDelete}}"
-				title="{{deleteText}}"
+				tooltip="{{deleteText}}"
 			></ui5-button>
 		</div>
 	{{/if}}
+
 {{/inline}}

package/src/ListItem.js

@@ -1,14 +1,20 @@
-import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
-import "@ui5/webcomponents-icons/dist/icons/decline.js";
-import "@ui5/webcomponents-icons/dist/icons/edit.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { isSpace, isEnter, isDelete } from "@ui5/webcomponents-base/dist/Keys.js";
+import "@ui5/webcomponents-icons/dist/decline.js";
+import "@ui5/webcomponents-icons/dist/edit.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ListItemType from "./types/ListItemType.js";
 import ListMode from "./types/ListMode.js";
 import ListItemBase from "./ListItemBase.js";
 import RadioButton from "./RadioButton.js";
 import CheckBox from "./CheckBox.js";
 import Button from "./Button.js";
-import { DELETE, ARIA_LABEL_LIST_ITEM_CHECKBOX } from "./generated/i18n/i18n-defaults.js";
+import {
+	DELETE,
+	ARIA_LABEL_LIST_ITEM_CHECKBOX,
+	ARIA_LABEL_LIST_ITEM_RADIO_BUTTON,
+	LIST_ITEM_SELECTED,
+	LIST_ITEM_NOT_SELECTED,
+} from "./generated/i18n/i18n-defaults.js";
 
 // Styles
 import styles from "./generated/themes/ListItem.css.js";
@@ -46,6 +52,17 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Defines the tooltip of the component.
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @private
+		 * @since 1.0.0-rc.15
+		 */
+		title: {
+			type: String,
+		},
+
 		/**
 		 * Indicates if the list item is actionable, e.g has hover and pressed effects.
 		 *
@@ -56,11 +73,43 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Used to define the role of the list item.
+		 *
+		 * @private
+		 * @type {string}
+		 * @defaultvalue "listitem"
+		 * @since 1.0.0-rc.9
+		 *
+		 */
+		role: {
+			type: String,
+			defaultValue: "listitem",
+		},
+
+		/**
+		 * Used to define the role of the list item.
+		 *
+		 * @private
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @since 1.3.0
+		 *
+		 */
+		accessibleRole: {
+			type: String,
+		},
+
 		_mode: {
 			type: ListMode,
 			defaultValue: ListMode.None,
+		},
+
+		_ariaHasPopup: {
+			type: String,
 			noAttribute: true,
 		},
+
 	},
 	events: /** @lends sap.ui.webcomponents.main.ListItem.prototype */ {
 		/**
@@ -119,7 +168,12 @@ class ListItem extends ListItemBase {
 			}
 		};
 
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
+		this._ontouchstart = {
+			handleEvent(event) {
+				this._onmousedown(event);
+			},
+			passive: true,
+		};
 	}
 
 	onBeforeRendering(...params) {
@@ -164,6 +218,10 @@ class ListItem extends ListItemBase {
 		if (isSpace(event)) {
 			this.fireItemPress(event);
 		}
+
+		if (this.modeDelete && isDelete(event)) {
+			this.onDelete();
+		}
 	}
 
 	_onmousedown(event) {
@@ -180,10 +238,6 @@ class ListItem extends ListItemBase {
 		this.deactivate();
 	}
 
-	_ontouchstart(event) {
-		this._onmousedown(event);
-	}
-
 	_ontouchend(event) {
 		this._onmouseup(event);
 	}
@@ -201,7 +255,7 @@ class ListItem extends ListItemBase {
 	}
 
 	/*
-	 * Called when selection components in Single (ui5-radiobutton)
+	 * Called when selection components in Single (ui5-radio-button)
 	 * and Multi (ui5-checkbox) selection modes are used.
 	 */
 	onMultiSelectionComponentPress(event) {
@@ -272,6 +326,20 @@ class ListItem extends ListItemBase {
 		return this._mode === ListMode.Delete;
 	}
 
+	/**
+	 * Used in UploadCollectionItem
+	 */
+	get renderDeleteButton() {
+		return this.modeDelete;
+	}
+
+	get disableDeleteButton() {
+		return false;
+	}
+	/**
+	 * End
+	 */
+
 	get typeDetail() {
 		return this.type === ListItemType.Detail;
 	}
@@ -281,30 +349,45 @@ class ListItem extends ListItemBase {
 	}
 
 	get ariaSelected() {
-		if (this.modeMultiSelect) {
+		if (this.modeMultiSelect || this.modeSingleSelect) {
 			return this.selected;
 		}
 
 		return undefined;
 	}
 
+	get ariaSelectedText() {
+		let ariaSelectedText;
+
+		// Selected state needs to be supported separately since now the role mapping is list -> listitem[]
+		// to avoid the issue of nesting interactive elements, ex. (option -> radio/checkbox);
+		// The text is added to aria-describedby because as part of the aria-labelledby
+		// the whole content of the item is readout when the aria-labelledby value is changed.
+		if (this.ariaSelected !== undefined) {
+			ariaSelectedText = this.ariaSelected ? ListItem.i18nBundle.getText(LIST_ITEM_SELECTED) : ListItem.i18nBundle.getText(LIST_ITEM_NOT_SELECTED);
+		}
+
+		return ariaSelectedText;
+	}
+
 	get deleteText() {
-		return this.i18nBundle.getText(DELETE);
+		return ListItem.i18nBundle.getText(DELETE);
 	}
 
 	get _accInfo() {
 		return {
-			role: "option",
+			role: this.accessibleRole || this.role,
 			ariaExpanded: undefined,
 			ariaLevel: undefined,
-			ariaLabel: this.i18nBundle.getText(ARIA_LABEL_LIST_ITEM_CHECKBOX),
+			ariaLabel: ListItem.i18nBundle.getText(ARIA_LABEL_LIST_ITEM_CHECKBOX),
+			ariaLabelRadioButton: ListItem.i18nBundle.getText(ARIA_LABEL_LIST_ITEM_RADIO_BUTTON),
+			ariaSelectedText: this.ariaSelectedText,
+			ariaHaspopup: this._ariaHasPopup || undefined,
 		};
 	}
 
 	static async onDefine() {
-		await Promise.all([
-			fetchI18nBundle("@ui5/webcomponents"),
-		]);
+		ListItem.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }
 

package/src/ListItemBase.js

@@ -36,6 +36,19 @@ const metadata = {
 			noAttribute: true,
 		},
 
+		/**
+		 * Defines whether <code>ui5-li</code> is in disabled state.
+		 * <br><br>
+		 * <b>Note:</b> A disabled <code>ui5-li</code> is noninteractive.
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @protected
+		 * @since 1.0.0-rc.12
+		 */
+		disabled: {
+			type: Boolean,
+		},
+
 		/**
 		 * Indicates if the element is on focus
 		 * @private
@@ -44,7 +57,7 @@ const metadata = {
 			type: Boolean,
 		},
 	},
-	events: {
+	events: /** @lends  sap.ui.webcomponents.main.ListItemBase.prototype */  {
 		_focused: {},
 		"_forward-after": {},
 		"_forward-before": {},
@@ -76,7 +89,7 @@ class ListItemBase extends UI5Element {
 	}
 
 	_onfocusin(event) {
-		if (event.isMarked === "button" || event.isMarked === "link") {
+		if (event.target !== this.getFocusDomRef()) {
 			return;
 		}
 
@@ -104,7 +117,9 @@ class ListItemBase extends UI5Element {
 		const target = event.target;
 
 		if (this.shouldForwardTabAfter(target)) {
-			this.fireEvent("_forward-after", { item: target });
+			if (!this.fireEvent("_forward-after", { item: target }, true)) {
+				event.preventDefault();
+			}
 		}
 	}
 
@@ -143,10 +158,24 @@ class ListItemBase extends UI5Element {
 		return {
 			main: {
 				"ui5-li-root": true,
-				"ui5-li--focusable": true,
+				"ui5-li--focusable": !this.disabled,
 			},
 		};
 	}
+
+	get ariaDisabled() {
+		return this.disabled ? "true" : undefined;
+	}
+
+	get tabIndex() {
+		if (this.disabled) {
+			return -1;
+		}
+		if (this.selected) {
+			return 0;
+		}
+		return this._tabIndex;
+	}
 }
 
 export default ListItemBase;

package/src/Menu.hbs

@@ -0,0 +1,100 @@
+<ui5-responsive-popover
+	id="{{_id}}-menu-rp"
+	class="ui5-menu-rp"
+	horizontal-align="Left"
+	placement-type={{placementType}}
+	vertical-align={{verticalAlign}}
+	hide-arrow
+	allow-target-overlap
+	?sub-menu={{_isSubMenu}}
+	@before-close={{_beforePopoverClose}}
+>
+{{#if isPhone}}
+	<div
+		slot="header"
+		class="ui5-menu-dialog-header"
+	>
+	{{#if isSubMenuOpened}}
+		<ui5-button
+			icon="nav-back"
+			class="ui5-menu-back-button"
+			design="Transparent"
+			aria-label="{{labelBack}}"
+			@click={{_navigateBack}}
+		>
+		</ui5-button>
+	{{/if}}
+		<div
+			class="ui5-menu-dialog-title"
+		>
+			<div>
+				{{menuHeaderTextPhone}}
+			</div>
+		</div>
+		<ui5-button
+			icon="decline"
+			design="Transparent"
+			aria-label="{{labelClose}}"
+			@click={{close}}
+		>
+		</ui5-button>
+	</div>
+{{/if}}
+	<div
+		id="{{_id}}-menu-main"
+	>
+	{{#if _currentItems.length}}
+		<ui5-list
+			id="{{_id}}-menu-list"
+			mode="None"
+			separators="None"
+			accessible-role="menu"
+			@ui5-item-click={{_itemClick}}
+		>
+		{{#each _currentItems}}
+			<ui5-li
+				.associatedItem="{{this.item}}"
+				class="ui5-menu-item"
+				id="{{../_id}}-menu-item-{{@index}}"
+				icon="{{this.item.icon}}"
+				accessible-role="menuitem"
+				._ariaHasPopup={{this.ariaHasPopup}}
+				?disabled={{this.item.disabled}}
+				?starts-section={{this.item.startsSection}}
+				?selected={{this.item.subMenuOpened}}
+				?is-phone={{../isPhone}}
+				@mouseover={{../_itemMouseOver}}
+				@mouseout={{../_itemMouseOut}}
+				@keydown={{../_itemKeyDown}}
+			>
+				{{#if this.item.hasDummyIcon}}
+					<div
+						class="ui5-menu-item-dummy-icon"
+					>
+					</div>
+				{{/if}}
+				{{this.item.text}}
+				{{#if this.item.hasChildren}}
+					<ui5-icon
+						part="icon"
+						name="slim-arrow-right"
+						class="ui5-menu-item-icon-end"
+					>
+					</ui5-icon>
+				{{else if this.item._siblingsWithChildren}}
+					<div
+						class="ui5-menu-item-no-icon-end"
+					>
+					</div>
+				{{/if}}
+			</ui5-li>
+		{{/each}}
+		</ui5-list>
+	{{/if}}
+	</div>
+</ui5-responsive-popover>
+
+<div
+	class="ui5-menu-submenus"
+>
+</div>