feat(ui5-flexible-column-layout): add start/mid/endColumnAccessibleNa…

…me properties (#2483)
SAP · Nov 30, 2020 · fb0b24c · fb0b24c
1 parent b5c4a92
commit fb0b24c
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 4 deletions.
diff --git a/packages/fiori/src/FlexibleColumnLayout.js b/packages/fiori/src/FlexibleColumnLayout.js
@@ -82,6 +82,42 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		* Defines the accessibility name for the <code>startColumn</code> region.
+		*
+		* @type {string}
+		* @defaultvalue ""
+		* @public
+		* @since 1.0.0-rc.11
+		*/
+		startColumnAccessibleName: {
+			type: String,
+		},
+
+		/**
+		* Defines the accessibility name for the <code>midColumn</code> region.
+		*
+		* @type {string}
+		* @defaultvalue ""
+		* @public
+		* @since 1.0.0-rc.11
+		*/
+		midColumnAccessibleName: {
+			type: String,
+		},
+
+		/**
+		* Defines the accessibility name for the <code>endColumn</code> region.
+		*
+		* @type {string}
+		* @defaultvalue ""
+		* @public
+		* @since 1.0.0-rc.11
+		*/
+		endColumnAccessibleName: {
+			type: String,
+		},
+
 		/**
 		* Defines the component width in px.
 		*
@@ -620,15 +656,15 @@ class FlexibleColumnLayout extends UI5Element {
 	}
 
 	get accStartColumnText() {
-		return this.i18nBundle.getText(FCL_START_COLUMN_TXT);
+		return this.startColumnAccessibleName || this.i18nBundle.getText(FCL_START_COLUMN_TXT);
 	}
 
 	get accMiddleColumnText() {
-		return this.i18nBundle.getText(FCL_MIDDLE_COLUMN_TXT);
+		return this.midColumnAccessibleName || this.i18nBundle.getText(FCL_MIDDLE_COLUMN_TXT);
 	}
 
 	get accEndColumnText() {
-		return this.i18nBundle.getText(FCL_END_COLUMN_TXT);
+		return this.endColumnAccessibleName || this.i18nBundle.getText(FCL_END_COLUMN_TXT);
 	}
 
 	get _effectiveLayoutsByMedia() {

diff --git a/packages/fiori/test/pages/FCLApp.html b/packages/fiori/test/pages/FCLApp.html
@@ -177,7 +177,12 @@
 </ui5-shellbar>
 
 <!--- FLEXIBLE COLUMN LAYOUT -->
-<ui5-flexible-column-layout id="fcl">
+<ui5-flexible-column-layout
+	id="fcl"
+	start-column-accessible-name="Companies list"
+	mid-column-accessible-name="Products List"
+	end-column-accessible-name="Product Details"
+>
 	<div class="column" id="startColumn" slot="startColumn">
 		<ui5-busyindicator id="startBusy">
 			<div class="ui5-message-page">