fix(ui5-flexible-column-layout): correct focus outline styles (#10788)

NakataCode · web-flow · commit 59710df6e377 · 2025-02-14T10:37:57.000+02:00
Problem: . High Contrast Black/White themes had missing focus indicators . The CSS parameter --_ui5_fcl_separator_focus_border was undefined when switching to High Contrast themes (HCB/HCW) Solution: . Replaced border-based focus with outline and adjusted offset to ensure proper focus visualization across all themes Fixes: #10670
diff --git a/packages/fiori/src/themes/FlexibleColumnLayout.css b/packages/fiori/src/themes/FlexibleColumnLayout.css
@@ -45,11 +45,12 @@
 	border-inline-end: var(--_ui5_fcl_column_border);
 	position: relative;
 	box-sizing: border-box;
+	z-index: 1;
 }
 
-.ui5-fcl-separator:focus {
-	border:var(--_ui5_fcl_separator_focus_border);
-	outline: none;
+.ui5-fcl-separator:focus { 
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	outline-offset: calc(-1 * var(--sapContent_FocusWidth));
 }
 
 .ui5-fcl-grip {
diff --git a/packages/fiori/src/themes/base/FlexibleColumnLayout-parameters.css b/packages/fiori/src/themes/base/FlexibleColumnLayout-parameters.css
@@ -3,5 +3,4 @@
 	--_ui5_fcl_column_border: none;
 	--_ui5_fcl_decoration_top: linear-gradient(to top, var(--sapHighlightColor), transparent);
 	--_ui5_fcl_decoration_bottom: linear-gradient(to bottom, var(--sapHighlightColor), transparent);
-	--_ui5_fcl_separator_focus_border: 0.125rem solid var(--sapContent_FocusColor); 
 }

Original file line number	Diff line number	Diff line change
`@@ -45,11 +45,12 @@`
`45`	`45`	`border-inline-end: var(--_ui5_fcl_column_border);`
`46`	`46`	`position: relative;`
`47`	`47`	`box-sizing: border-box;`
	`48`	`+ z-index: 1;`
`48`	`49`	`}`
`49`	`50`
`50`		`-.ui5-fcl-separator:focus {`
`51`		`- border:var(--_ui5_fcl_separator_focus_border);`
`52`		`- outline: none;`
	`51`	`+.ui5-fcl-separator:focus {`
	`52`	`+ outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);`
	`53`	`+ outline-offset: calc(-1 * var(--sapContent_FocusWidth));`
`53`	`54`	`}`
`54`	`55`
`55`	`56`	`.ui5-fcl-grip {`
Original file line number	Diff line number	Diff line change
`@@ -3,5 +3,4 @@`
`3`	`3`	`--_ui5_fcl_column_border: none;`
`4`	`4`	`--_ui5_fcl_decoration_top: linear-gradient(to top, var(--sapHighlightColor), transparent);`
`5`	`5`	`--_ui5_fcl_decoration_bottom: linear-gradient(to bottom, var(--sapHighlightColor), transparent);`
`6`		`- --_ui5_fcl_separator_focus_border: 0.125rem solid var(--sapContent_FocusColor);`
`7`	`6`	`}`