fix(ui5-flexible-column-layout): wrong focus fixed (#7586)

Co-authored-by: PetyaMarkovaBogdanova <petya.markova@sap.com>
SAP · Oct 13, 2023 · 721cc0b · 721cc0b
1 parent f2668b6
commit 721cc0b
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/packages/fiori/src/FlexibleColumnLayout.hbs b/packages/fiori/src/FlexibleColumnLayout.hbs
@@ -6,7 +6,7 @@
 		aria-labelledby="{{_id}}-startColumnText"
 	>
 		<span id="{{_id}}-startColumnText" class="ui5-hidden-text">{{accStartColumnText}}</span>
-		<slot name="startColumn"></slot>
+		<slot name="startColumn" aria-hidden="{{_accAttributes.columns.middle.ariaHidden}}"></slot>
 	</div>
 
 	<div role="{{accStartArrowContainerRole}}" aria-label={{accStartArrowContainerText}} class="ui5-fcl-arrow-container ui5-fcl-arrow-container-start" style="{{styles.arrowsContainer.start}}">
@@ -20,7 +20,7 @@
 		aria-labelledby="{{_id}}-midColumnText"
 	>
 		<span id="{{_id}}-midColumnText" class="ui5-hidden-text">{{accMiddleColumnText}}</span>
-		<slot name="midColumn"></slot>
+		<slot name="midColumn" aria-hidden="{{_accAttributes.columns.middle.ariaHidden}}"></slot>
 	</div>
 
 	<div role="{{accEndArrowContainerRole}}" aria-label="{{accEndArrowContainerText}}" class="ui5-fcl-arrow-container ui5-fcl-arrow-container-end" style="{{styles.arrowsContainer.end}}">
@@ -34,7 +34,7 @@
 		aria-labelledby="{{_id}}-endColumnText"
 	>
 		<span id="{{_id}}-endColumnText" class="ui5-hidden-text">{{accEndColumnText}}</span>
-		<slot name="endColumn"></slot>
+		<slot name="endColumn" aria-hidden="{{_accAttributes.columns.middle.ariaHidden}}"></slot>
 	</div>
 </div>
 

diff --git a/packages/fiori/src/themes/FlexibleColumnLayout.css b/packages/fiori/src/themes/FlexibleColumnLayout.css
@@ -100,3 +100,9 @@
 .ui5-fcl-arrow:hover:after {
 	height: 7rem;
 }
+
+[aria-hidden] ::slotted([slot="startColumn"]),
+[aria-hidden] ::slotted([slot="midColumn"]),
+[aria-hidden] ::slotted([slot="endColumn"]){
+	visibility: hidden;
+}