fix(ui5-upload-collection): make empty upload collection focusable (#…

…9403)
SAP · Jul 22, 2024 · 16d7bef · 16d7bef
1 parent ca153d0
commit 16d7bef
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 16 deletions.
diff --git a/packages/fiori/src/UploadCollection.hbs b/packages/fiori/src/UploadCollection.hbs
@@ -13,15 +13,15 @@
 			{{!-- forward slot header to inner list slot header --}}
 			<slot slot="header" name="header"></slot>
 			<slot></slot>
+			{{#if _showNoData}}
+				<ui5-li-custom class="{{classes.noFiles}}" type="Inactive">
+					<ui5-illustrated-message name="Tent">
+						<ui5-title slot="title" wrapping-type="None" level="H2">{{_noDataText}}</ui5-title>
+						<span slot="subtitle">{{_noDataDescription}}</span>
+					</ui5-illustrated-message>
+				</ui5-li-custom>
+			{{/if}}
 		</ui5-list>
-		{{#if _showNoData}}
-			<div class="{{classes.noFiles}}">
-				<ui5-illustrated-message name="Tent">
-					<ui5-title slot="title" wrapping-type="None" level="H2">{{_noDataText}}</ui5-title>
-					<span slot="subtitle">{{_noDataDescription}}</span>
-				</ui5-illustrated-message>
-			</div>
-		{{/if}}
 		{{#if _showDndOverlay}}
 			<div
 				class="{{classes.dndOverlay}}"

diff --git a/packages/fiori/src/UploadCollection.ts b/packages/fiori/src/UploadCollection.ts
@@ -9,6 +9,7 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import Label from "@ui5/webcomponents/dist/Label.js";
 import List from "@ui5/webcomponents/dist/List.js";
+import ListItemCustom from "@ui5/webcomponents/dist/ListItemCustom.js";
 import type { ListSelectionChangeEventDetail } from "@ui5/webcomponents/dist/List.js";
 import Title from "@ui5/webcomponents/dist/Title.js";
 import IllustratedMessage from "./IllustratedMessage.js";
@@ -72,6 +73,7 @@ type UploadCollectionItemDeleteEventDetail = {
 		Icon,
 		Label,
 		List,
+		ListItemCustom,
 		Title,
 		IllustratedMessage,
 	],

diff --git a/packages/fiori/test/pages/UploadCollection.html b/packages/fiori/test/pages/UploadCollection.html
@@ -110,6 +110,8 @@
 		</ui5-upload-collection-item>
 	</ui5-upload-collection>
 
+	<button id="tabStop1">Tab stop helper</button>
+
 	<ui5-upload-collection id="uploadCollectionDnD">
 		<div class="header" slot="header">
 			<ui5-title>Attachments (0)</ui5-title>
@@ -120,6 +122,8 @@
 		</div>
 	</ui5-upload-collection>
 
+	<button id="tabStop2">Tab stop helper</button>
+
 	<div class="header">
 		<ui5-label id="uploadStateEvent"></ui5-label>
 	</div>

diff --git a/packages/fiori/test/specs/UploadCollection.spec.js b/packages/fiori/test/specs/UploadCollection.spec.js
@@ -211,14 +211,14 @@ 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 isActiveElement = (element) => {
+			return browser.executeAsync((expectedActiveElem, done) => {
+				const activeElement = document.activeElement;
+				done(activeElement.shadowRoot.activeElement === expectedActiveElem);
+			}, element);
+		};
+
+		it("Item tab order", async () => {
 			const item = await browser.$("#hiddenFileName");
 
 			await item.click();
@@ -233,6 +233,22 @@ describe("UploadCollection", () => {
 			await browser.keys("Tab");
 			assert.ok(await isActiveElement(await item.shadow$(".ui5-upload-collection-deletebtn")), "Delete button should be focused");
 		});
+
+		it("Tab through empty upload collection", async () => {
+			const tabStop1 = await browser.$("#tabStop1");
+			const tabStop2 = await browser.$("#tabStop2");
+			const uploadCollection = await browser.$("#uploadCollectionDnD");
+
+			await tabStop1.click();
+			await browser.keys("Tab");
+			await browser.keys("Tab");
+
+			assert.ok(await isActiveElement(await uploadCollection.shadow$(".uc-no-files")), "No files item should be focused");
+
+			await browser.keys("Tab");
+
+			assert.ok(await tabStop2.isFocused(), "Should have passed the upload collection and focused the next tab stop");
+		});
 	});
 
 	describe("Edit - various file names", async () => {