fix(ui5-upload-collection-item): delete can be triggered by keyboard now

packages/fiori/src/UploadCollectionItem.hbs

@@ -99,8 +99,6 @@
 			{{#unless hideDeleteButton}}
 				<ui5-button
 						class="ui5-upload-collection-deletebtn"
-						tabindex="-1"
-						data-sap-no-tab-ref
 						id="{{_id}}-deleteSelectionElement"
 						design="Transparent"
 						icon="decline"

packages/fiori/src/UploadCollectionItem.ts

@@ -14,7 +14,12 @@ import ProgressIndicator from "@ui5/webcomponents/dist/ProgressIndicator.js";
 import ListItem from "@ui5/webcomponents/dist/ListItem.js";
 import getFileExtension from "@ui5/webcomponents-base/dist/util/getFileExtension.js";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
-import { isEnter, isEscape, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
+import {
+	isDelete,
+	isEnter,
+	isEscape,
+	isSpace,
+} from "@ui5/webcomponents-base/dist/Keys.js";
 import UploadState from "./types/UploadState.js";
 import "@ui5/webcomponents-icons/dist/refresh.js";
 import "@ui5/webcomponents-icons/dist/stop.js";
@@ -243,6 +248,14 @@ class UploadCollectionItem extends ListItem {
 		}
 	}
 
+	_onkeyup(e: KeyboardEvent) {
+		super._onkeyup(e);
+
+		if (isDelete(e) && !this.disableDeleteButton && !this.hideDeleteButton && !this.disabled) {
+			this._onDelete();
+		}
+	}
+
 	_onDetailKeyup(e: KeyboardEvent) {
 		if (isSpace(e)) {
 			this.onDetailClick();

packages/fiori/src/themes/UploadCollectionItem.css

@@ -17,7 +17,6 @@
 
 .ui5-uci-buttons {
 	display: flex;
-	pointer-events: all;
 	margin-inline-start: 1rem;
 	gap: 0.5rem;
 }

packages/fiori/test/pages/UploadCollection.html

@@ -76,6 +76,23 @@
 			<ui5-icon name="document-text" slot="thumbnail"></ui5-icon>
 			Some description.
 		</ui5-upload-collection-item>
+		<ui5-upload-collection-item
+			id="reportPdf"
+			file-name="report.pdf"
+			upload-state="Complete"
+		>
+			<ui5-icon name="document-text" slot="thumbnail"></ui5-icon>
+			Some description.
+		</ui5-upload-collection-item>
+		<ui5-upload-collection-item
+			id="disabledPdf"
+			file-name="disabledFile.pdf"
+			upload-state="Complete"
+			disabled
+		>
+			<ui5-icon name="document-text" slot="thumbnail"></ui5-icon>
+			Some description.
+		</ui5-upload-collection-item>
 		<ui5-upload-collection-item
 			id="noFileExtension"
 			file-name="noextension"

packages/fiori/test/specs/UploadCollection.spec.js

@@ -127,6 +127,13 @@ describe("UploadCollection", () => {
 			await browser.keys("Enter")
 		});
 
+		it("Disabled item", async () => {
+			const item = await browser.$("#disabledPdf");
+			const deleteBtn = await item.shadow$(".ui5-upload-collection-deletebtn");
+
+			assert.notOk(await item.isClickable(), "Item shouldn't be clickable");
+			assert.notOk(await deleteBtn.isClickable(), "Delete button shouldn't be clickable");
+		});
 	});
 
 	describe("Events", () => {
@@ -163,13 +170,25 @@ describe("UploadCollection", () => {
 		it("upload collection should fire 'item-delete' regardless of the selectionMode", async () => {
 			const uploadCollection = await browser.$("#uploadCollection");
 			const item = await browser.$("#latestReportsPdf");
+			const itemsLength = (await uploadCollection.getProperty("items")).length;
 
 			await uploadCollection.setAttribute("selection-mode", "None");
 
 			const deleteBtn = await item.shadow$(".ui5-upload-collection-deletebtn");
 			await deleteBtn.click();
 
-			assert.strictEqual((await uploadCollection.getProperty("items")).length, 4, "item should be deleted when 'item-delete' event is fired");
+			assert.strictEqual((await uploadCollection.getProperty("items")).length, itemsLength - 1, "item should be deleted when 'item-delete' event is fired");
+		});
+
+		it("upload collection should fire 'item-delete' when 'DELETE' key is pressed on item", async () => {
+			const uploadCollection = await browser.$("#uploadCollection");
+			const item = await browser.$("#reportPdf");
+			const itemsLength = (await uploadCollection.getProperty("items")).length;
+
+			await item.click();
+			await browser.keys("Delete");
+
+			assert.strictEqual((await uploadCollection.getProperty("items")).length, itemsLength - 1, "item should be deleted when 'item-delete' event is fired");
 		});
 
 		it("item should fire 'retry'", async () => {
@@ -191,6 +210,31 @@ describe("UploadCollection", () => {
 		});
 	});
 
+	describe("Keyboard handling", () => {
+		it("Tab chain", async () => {
+			const isActiveElement = (element) => {
+				return browser.executeAsync((expectedActiveElem, done) => {
+					const activeElement = document.activeElement;
+					done(activeElement.shadowRoot.activeElement === expectedActiveElem);
+				}, element);
+			};
+
+			const item = await browser.$("#hiddenFileName");
+
+			await item.click();
+			assert.ok(await item.isFocused(), "Item should be focused");
+
+			await browser.keys("Tab");
+			assert.ok(await isActiveElement(await item.shadow$("[ui5-button][icon=refresh]")), "Retry button should be focused");
+
+			await browser.keys("Tab");
+			assert.ok(await isActiveElement(await item.shadow$(".ui5-uci-edit")), "Edit button should be focused");
+
+			await browser.keys("Tab");
+			assert.ok(await isActiveElement(await item.shadow$(".ui5-upload-collection-deletebtn")), "Delete button should be focused");
+		});
+	});
+
 	describe("Edit - various file names", async () => {
 		before(async () => {
 			await browser.url(`test/pages/UploadCollection.html`);