diff --git a/packages/fiori/src/UploadCollection.hbs b/packages/fiori/src/UploadCollection.hbs index 9cda1005c3f5..3f866bdaad7a 100644 --- a/packages/fiori/src/UploadCollection.hbs +++ b/packages/fiori/src/UploadCollection.hbs @@ -3,15 +3,15 @@ role="region" aria-roledescription="{{_roleDescription}}" @drop="{{_ondrop}}"> -
- -
+ {{!-- forward slot header to inner list slot header --}} + {{#if _showNoData}} diff --git a/packages/fiori/src/UploadCollection.js b/packages/fiori/src/UploadCollection.js index 77b3eb3d8d5e..03743ee1fc60 100644 --- 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 ui5-upload-collection header. + *

+ * Note: If header slot is provided, + * the labelling of the UploadCollection is a responsibility of the application developer. + * accessibleName should be used. * * @type {HTMLElement[]} * @slot diff --git a/packages/fiori/src/themes/UploadCollection.css b/packages/fiori/src/themes/UploadCollection.css index 06f06cdb600d..1e213734c6e9 100644 --- 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 index f82fafa5b8a0..a48059301dde 100644 --- a/packages/fiori/test/pages/UploadCollection.html +++ b/packages/fiori/test/pages/UploadCollection.html @@ -59,9 +59,9 @@

This element is draggable

- +
- Uploaded (4) + Uploaded (4) Add new files and press to start uploading pending files: Start
@@ -183,12 +183,12 @@ - +
Hidden buttons
- + Default, delete button always visible diff --git a/packages/fiori/test/samples/UploadCollection.sample.html b/packages/fiori/test/samples/UploadCollection.sample.html index bd3ec1c5d663..d172a8200535 100644 --- a/packages/fiori/test/samples/UploadCollection.sample.html +++ b/packages/fiori/test/samples/UploadCollection.sample.html @@ -29,7 +29,7 @@

UploadCollection

UploadCollection

- +
Uploaded (2) Add new files and press to start uploading pending files: @@ -88,7 +88,7 @@

UploadCollection

// 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 @@

UploadCollection


-<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
index 3f38ab5445a5..f723dfecb384 100644
--- 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", () => {