fix(ui5-upload-collection): add region and roledescription to root el…

…ement (#2915)
SAP · Mar 9, 2021 · 6db9f09 · 6db9f09
1 parent 92691b2
commit 6db9f09
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 1 deletion.
diff --git a/packages/fiori/src/UploadCollection.hbs b/packages/fiori/src/UploadCollection.hbs
@@ -1,4 +1,8 @@
-<div class="ui5-uc-root" @drop="{{_ondrop}}">
+<div
+	class="ui5-uc-root"
+	role="region"
+	aria-roledescription="{{_roleDescription}}"
+	@drop="{{_ondrop}}">
 	<div class="ui5-uc-header">
 		<slot name="header"></slot>
 	</div>

diff --git a/packages/fiori/src/UploadCollection.js b/packages/fiori/src/UploadCollection.js
@@ -13,6 +13,7 @@ import {
 	UPLOADCOLLECTION_NO_DATA_DESCRIPTION,
 	UPLOADCOLLECTION_DRAG_FILE_INDICATOR,
 	UPLOADCOLLECTION_DROP_FILE_INDICATOR,
+	UPLOADCOLLECTION_ARIA_ROLE_DESCRIPTION,
 } from "./generated/i18n/i18n-defaults.js";
 import {
 	attachBodyDnDHandler,
@@ -331,6 +332,10 @@ class UploadCollection extends UI5Element {
 		return this.noDataDescription || this.i18nBundle.getText(UPLOADCOLLECTION_NO_DATA_DESCRIPTION);
 	}
 
+	get _roleDescription() {
+		return this.i18nBundle.getText(UPLOADCOLLECTION_ARIA_ROLE_DESCRIPTION);
+	}
+
 	get _dndOverlayText() {
 		if (this._dndOverlayMode === UploadCollectionDnDOverlayMode.Drag) {
 			return this.i18nBundle.getText(UPLOADCOLLECTION_DRAG_FILE_INDICATOR);

diff --git a/packages/fiori/src/i18n/messagebundle.properties b/packages/fiori/src/i18n/messagebundle.properties
@@ -96,6 +96,9 @@ UPLOADCOLLECTION_NO_DATA_TEXT=No files found.
 #XMSG: Message text for no data description in the UploadCollection
 UPLOADCOLLECTION_NO_DATA_DESCRIPTION=Drop files to upload, or use the Upload button.
 
+#XACT: ARIA announcement for the ettribute 'aria-roledescription' of the UploadCollection component
+UPLOADCOLLECTION_ARIA_ROLE_DESCRIPTION=Upload collection
+
 #XMSG: Message text indicating where to drag
 UPLOADCOLLECTION_DRAG_FILE_INDICATOR=Drag files here