feat(ui5-upload-collection): Added "accessibleName" property (#3917)

Fixes: #3768 Closes: #3768
SAP · Sep 14, 2021 · ea79fb3 · ea79fb3
1 parent 6afad2a
commit ea79fb3
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 22 deletions.
diff --git a/packages/fiori/src/UploadCollection.hbs b/packages/fiori/src/UploadCollection.hbs
@@ -3,15 +3,15 @@
 	role="region"
 	aria-roledescription="{{_roleDescription}}"
 	@drop="{{_ondrop}}">
-	<div class="ui5-uc-header">
-		<slot name="header"></slot>
-	</div>
 	<div class="{{classes.content}}">
 		<ui5-list
+			accessible-name="{{accessibleName}}"
 			mode="{{mode}}"
 			@ui5-selection-change="{{_onSelectionChange}}"
 			@ui5-item-delete="{{_onItemDelete}}"
 		>
+			{{!-- forward slot header to inner list slot header --}}
+			<slot slot="header" name="header"></slot>
 			<slot></slot>
 		</ui5-list>
 		{{#if _showNoData}}

diff --git a/packages/fiori/src/UploadCollection.js b/packages/fiori/src/UploadCollection.js
@@ -104,6 +104,18 @@ const metadata = {
 			type: String,
 			defaultValue: UploadCollectionDnDOverlayMode.None,
 		},
+
+		/**
+		 * Sets the accessible aria name of the component.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 * @since 1.0.0-rc.16
+		 */
+		accessibleName: {
+			type: String,
+		},
 	},
 	managedSlots: true,
 	slots: /** @lends sap.ui.webcomponents.fiori.UploadCollection.prototype */ {
@@ -122,6 +134,10 @@ const metadata = {
 
 		/**
 		 * Defines the <code>ui5-upload-collection</code> header.
+		 * <br><br>
+		 * <b>Note:</b> If <code>header</code> slot is provided,
+		 * the labelling of the <code>UploadCollection</code> is a responsibility of the application developer.
+		 * <code>accessibleName</code> should be used.
 		 *
 		 * @type {HTMLElement[]}
 		 * @slot

diff --git a/packages/fiori/src/themes/UploadCollection.css b/packages/fiori/src/themes/UploadCollection.css
@@ -2,15 +2,8 @@
 	display: block;
 }
 
-.ui5-uc-root {
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-}
-
 .ui5-uc-content {
 	position: relative;
-	flex: 1 1 auto;
 }
 
 .ui5-uc-content.ui5-uc-content-no-data {

diff --git a/packages/fiori/test/pages/UploadCollection.html b/packages/fiori/test/pages/UploadCollection.html
@@ -59,9 +59,9 @@
 
 	<p id="draggableElement" draggable="true">This element is draggable</p>
 
-	<ui5-upload-collection id="uploadCollection">
+	<ui5-upload-collection id="uploadCollection" accessible-name="Uploaded (4)">
 		<div slot="header" class="header">
-			<ui5-title>Uploaded (4)</ui5-title>
+			<ui5-title id="uploadCollectionTitle">Uploaded (4)</ui5-title>
 			<ui5-label>Add new files and press to start uploading pending files:</ui5-label>
 			<ui5-button id="startUploading">Start</ui5-button>
 			<div class="spacer"></div>
@@ -183,12 +183,12 @@
 		</ui5-upload-collection-item>
 	</ui5-upload-collection>
 
-	
+
 	<ui5-upload-collection id="uploadCollection3">
 		<div class="header" slot="header">
 			<ui5-title>Hidden buttons</ui5-title>
 		</div>
-		
+
 		<ui5-upload-collection-item id="uc3-default" file-name="File name">
 			<ui5-icon name="document-text" slot="thumbnail"></ui5-icon>
 			Default, delete button always visible

diff --git a/packages/fiori/test/samples/UploadCollection.sample.html b/packages/fiori/test/samples/UploadCollection.sample.html
@@ -29,7 +29,7 @@ <h2 class="control-header">UploadCollection</h2>
 <section>
 	<h3>UploadCollection</h3>
 	<div class="snippet">
-		<ui5-upload-collection id="uploadCollection">
+		<ui5-upload-collection id="uploadCollection" accessible-name="Uploaded (2)">
 			<div slot="header" class="header">
 				<ui5-title>Uploaded (2)</ui5-title>
 				<ui5-label>Add new files and press to start uploading pending files:</ui5-label>
@@ -88,7 +88,7 @@ <h3>UploadCollection</h3>
 					// if there is a file ready to be uploaded send request
 					if (item.uploadState === "Ready" && item.file) {
 						var oXHR = new XMLHttpRequest();
-						
+
 						oXHR.open("POST", "/upload", true);
 						oXHR.onreadystatechange = function () {
 							if (this.status !== 200) {
@@ -103,7 +103,7 @@ <h3>UploadCollection</h3>
 		</script>
 	</div>
 	<pre class="prettyprint lang-html"><xmp>
-<ui5-upload-collection id="uploadCollection">
+<ui5-upload-collection id="uploadCollection" accessible-name="Uploaded (2)">
 	<div slot="header" class="header">
 		<ui5-title>Uploaded (2)</ui5-title>
 		<ui5-label>Add new files and press to start uploading pending files:</ui5-label>
@@ -128,7 +128,7 @@ <h3>UploadCollection</h3>
 		<ui5-icon name="document-text" slot="thumbnail"></ui5-icon>
 		Uploaded By: John Smith · Uploaded On: 2014-09-02 · File Size: 226.6 KB ·
 	</ui5-upload-collection-item>
-</ui5-upload-collection>	
+</ui5-upload-collection>
 
 <script>
 	const createThumbnail = fileName => {
@@ -162,7 +162,7 @@ <h3>UploadCollection</h3>
 			// if there is a file ready to be uploaded send request
 			if (item.uploadState === "Ready" && item.file) {
 				const oXHR = new XMLHttpRequest();
-				
+
 				oXHR.open("POST", "/upload", true);
 				oXHR.onreadystatechange  = function () {
 					if (this.status !== 200) {
@@ -203,7 +203,7 @@ <h3>UploadCollection With File Renaming Enabled</h3>
 				<ui5-icon name="document-text" slot="thumbnail"></ui5-icon>
 				Uploaded By: John Smith · Uploaded On: 2014-09-02 · File Size: 226.6 KB ·
 			</ui5-upload-collection-item>
-		</ui5-upload-collection>	
+		</ui5-upload-collection>
 
 		<script>
 			uploadCollectionWithRenaming.addEventListener("rename", function(event) {
@@ -234,7 +234,7 @@ <h3>UploadCollection With File Renaming Enabled</h3>
 		<ui5-icon name="document-text" slot="thumbnail"></ui5-icon>
 		Uploaded By: John Smith · Uploaded On: 2014-09-02 · File Size: 226.6 KB ·
 	</ui5-upload-collection-item>
-</ui5-upload-collection>	
+</ui5-upload-collection>
 
 <script>
 	uploadCollectionWithRenaming.addEventListener("rename", event => {
@@ -287,7 +287,7 @@ <h3>UploadCollection With Different Uploading States of Items</h3>
 			uploadCollectionStates.addEventListener("retry", function(event) {
 				alert("Retry uploading: " + event.target.fileName);
 			});
-		
+
 			uploadCollectionStates.addEventListener("terminate", function(event) {
 				alert("Terminate uploading of: " + event.target.fileName);
 			});

diff --git a/packages/fiori/test/specs/UploadCollection.spec.js b/packages/fiori/test/specs/UploadCollection.spec.js
@@ -80,6 +80,18 @@ describe("UploadCollection", () => {
 			assert.strictEqual(uploadingItemHiddenTerminate.shadow$(".ui5-li-deletebtn").isDisplayed(), false, "delete button is not visible");
 			assert.strictEqual(uploadingItemHiddenTerminate.shadow$("ui5-button[icon=stop]").isDisplayed(), false, "terminate button is visible");
 		});
+
+		it("should forward 'header' and 'accessible-name' to the inner list", () => {
+			const uploadCollection = browser.$("#uploadCollection");
+			const innerList = uploadCollection.shadow$("ui5-list");
+
+			const headerInnerListSlotContent = browser.execute(() => {
+				return document.getElementById("uploadCollection").shadowRoot.querySelector("ui5-list").shadowRoot.querySelector("slot[name='header']").assignedNodes()[0].assignedNodes()[0].querySelector("#uploadCollectionTitle");
+			});
+
+			assert.strictEqual(uploadCollection.getAttribute("accessible-name"), innerList.getAttribute("accessible-name"), "accessible-name is forwarded");
+			assert.ok(headerInnerListSlotContent, "header is forwarded");
+		});
 	});
 
 	describe("Events", () => {