feat(ui5-list): support pressing DELETE key (#3226)

Add DELETE shortcut key for deleting items when `mode` property is `Delete`. 
Also, remove the delete button from the tab chain.

Related to: #3089

Author: dobrinyonkov

packages/main/src/ListItem.hbs

@@ -84,6 +84,7 @@
 	{{#if modeDelete}}
 		<div class="ui5-li-deletebtn">
 			<ui5-button
+				tabindex="-1"
 				id="{{_id}}-deleteSelectionElement"
 				design="Transparent"
 				icon="decline"

packages/main/src/ListItem.js

@@ -1,4 +1,4 @@
-import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.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 { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
@@ -177,6 +177,10 @@ class ListItem extends ListItemBase {
 		if (isSpace(event)) {
 			this.fireItemPress(event);
 		}
+
+		if (this.modeDelete && isDelete(event)) {
+			this.onDelete();
+		}
 	}
 
 	_onmousedown(event) {

packages/main/test/specs/List.spec.js

@@ -172,6 +172,19 @@ describe("List Tests", () => {
 		assert.equal(browser.$('#lblResult').getHTML(false), "Laptop HP: 1", "itemDelete event was fired for the right item");
 	});
 
+	it("mode: delete. DELETE key press - deletes item", () => {
+		browser.url(`http://localhost:${PORT}/test-resources/pages/List_test_page.html`);
+		list.root.setProperty("mode", "Delete");
+
+		const firstItem = list.getItem(0);
+		firstItem.click();
+
+		assert.ok(!firstItem.getAttribute("selected"), "item is selected");
+
+		firstItem.keys("Delete")
+		assert.equal(browser.$('#lblResult').getHTML(false), "Laptop HP: 1", "itemDelete event was fired for the right item");
+	});
+
 	it("item size and classed, when an item has both text and description", () => {
 		const ITEM_WITH_DESCRIPTION_AND_TITLE_HEIGHT = 80;
 		const firstItem =  $("#listWithDesc ui5-li:first-child");
@@ -355,7 +368,7 @@ describe("List Tests", () => {
 		assert.strictEqual(item3.getProperty("focused"), true, "disabled item is skipped");
 	});
 
-	it.only('should focus next interactive element if TAB is pressed when focus is on "More" growing button', () => {
+	it('should focus next interactive element if TAB is pressed when focus is on "More" growing button', () => {
 		const growingListButton = $('#growingListButton').shadow$("div[load-more-inner]");
 		const nextInteractiveElement = $('#nextInteractiveElement');