fix(ui5-calendar-legend): align visual design to meet WCAG 2.2 requir…

…ements Fixes the height of the Calendar Legend Items to be 24px and the focus visualisation to be correctly placed (2px spacing around the legend item).
SAP · May 13, 2024 · 0860a3e · 0860a3e
1 parent 0d89f2c
commit 0860a3e
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 6 deletions.
diff --git a/packages/main/src/themes/CalendarLegendItem.css b/packages/main/src/themes/CalendarLegendItem.css
@@ -7,6 +7,7 @@
 	text-overflow: ellipsis;
 	overflow: hidden;
 	cursor: default;
+	margin: 0.0625rem 0;
 }
 
 .ui5-calendar-legend-item-box {
@@ -15,6 +16,7 @@
 	height: 1rem;
 	width: 1rem;
 	margin: var(--_ui5-calendar-legend-item-box-margin);
+	margin-inline-end: var(--_ui5-calendar-legend-item-box-inner-margin);
 	background: var(--sapLegend_WorkingBackground);
 	border: 0.0625rem solid var(--sapContent_ForegroundBorderColor);
 }
@@ -153,6 +155,7 @@
 
 .ui5-calendar-legend-item-root:focus {
 	outline: var(--_ui5-calendar-legend-item-root-focus-border);
-	outline-offset: -.0625rem;
+	outline-offset: var(--_ui5-calendar-legend-item-root-focus-offset);
 	border-radius: var(--_ui5-calendar-legend-item-root-focus-border-radius);
+	margin: 0.0625rem 0;
 }
diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css
@@ -29,6 +29,13 @@
 	--_ui5_daypicker_two_calendar_item_selected_focus_margin_bottom: 0;
 	--_ui5_daypicker_two_calendar_item_selected_focus_padding_right: 0.4375rem;
 
+	/* CalendarLegend */
+	--_ui5-calendar-legend-item-root-focus-offset: -0.125rem;
+
+	/* Calendar Legend Item */
+	--_ui5-calendar-legend-item-box-margin: 0.25rem;
+	--_ui5-calendar-legend-item-box-inner-margin: 0.5rem;
+
 	/* ColorPalette */
 	 --_ui5_color-palette-item-height: 1.75rem;
 	 --_ui5_color-palette-item-hover-height: 2.375rem;
@@ -165,7 +172,6 @@
 	--_ui5-calendar-legend-root-width: 16.75rem;
 
 	/* Calendar Legend Item */
-	--_ui5-calendar-legend-item-box-margin: 0.125rem 0.5rem 0.125rem 0.125rem;
 	--_ui5-calendar-legend-item-root-focus-margin: -0.125rem;
 
 	/* CheckBox */

diff --git a/packages/main/src/themes/sap_fiori_3/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3/parameters-bundle.css
@@ -53,5 +53,5 @@
 @import "./MultiComboBox-parameters.css";
 @import "./SliderBase-parameters.css";
 @import "../base/StepInput-parameters.css";
-@import "../base/sizes-parameters.css";
-@import "../base/rtl-parameters.css";
+@import "../base/rtl-parameters.css";
+@import "./sizes-parameters.css";
diff --git a/packages/main/src/themes/sap_fiori_3/sizes-parameters.css b/packages/main/src/themes/sap_fiori_3/sizes-parameters.css
@@ -0,0 +1,6 @@
+@import "../base/sizes-parameters.css";
+
+:root {
+	/* CalendarLegend */
+    --_ui5-calendar-legend-item-root-focus-offset: -0.0625rem;
+}
diff --git a/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css
@@ -52,5 +52,5 @@
 @import "./MultiComboBox-parameters.css";
 @import "./SliderBase-parameters.css";
 @import "../base/StepInput-parameters.css";
-@import "../base/sizes-parameters.css";
-@import "../base/rtl-parameters.css";
+@import "../base/rtl-parameters.css";
+@import "./sizes-parameters.css";
diff --git a/packages/main/src/themes/sap_fiori_3_dark/sizes-parameters.css b/packages/main/src/themes/sap_fiori_3_dark/sizes-parameters.css
@@ -0,0 +1,6 @@
+@import "../base/sizes-parameters.css";
+
+:root {
+	/* CalendarLegend */
+    --_ui5-calendar-legend-item-root-focus-offset: -0.0625rem;
+}
diff --git a/packages/main/src/themes/sap_horizon/sizes-parameters.css b/packages/main/src/themes/sap_horizon/sizes-parameters.css
@@ -5,6 +5,9 @@
 	--_ui5_split_button_middle_separator_top: 0.625rem;
 	--_ui5_split_button_middle_separator_height: 1rem;
 
+	/* CallendarLegend */
+	--_ui5-calendar-legend-item-root-focus-border-radius: 0.25rem;
+
 	/* ColorPalette */
 	--_ui5_color-palette-item-height: 1.75rem;
 	--_ui5_color-palette-item-hover-height: 2.25rem;

diff --git a/packages/main/src/themes/sap_horizon_dark/sizes-parameters.css b/packages/main/src/themes/sap_horizon_dark/sizes-parameters.css
@@ -5,6 +5,9 @@
 	--_ui5_split_button_middle_separator_top: 0.625rem;
 	--_ui5_split_button_middle_separator_height: 1rem;
 
+	/* CallendarLegend */
+	--_ui5-calendar-legend-item-root-focus-border-radius: 0.25rem;
+
 	/* ColorPalette */
 	--_ui5_color-palette-item-height: 1.75rem;
 	--_ui5_color-palette-item-hover-height: 2.25rem;