@ui5/webcomponents 1.24.4 → 1.24.6

package/src/DatePickerPopover.hbs

@@ -3,6 +3,7 @@
 	allow-target-overlap
 	placement-type="Bottom"
 	horizontal-align="Left"
+	accessible-name="{{pickerAccessibleName}}"
 	hide-arrow
 	?_hide-header={{_shouldHideHeader}}
 	@keydown="{{_onkeydown}}"

package/src/MonthPicker.hbs

@@ -9,7 +9,7 @@
 	@click={{_selectMonth}}
 >
 	{{#each _months}}
-		<div class="ui5-mp-quarter">
+		<div role="row" class="ui5-mp-quarter">
 
 			{{#each this}}
 				<div

package/src/MultiComboBoxPopover.hbs

@@ -68,7 +68,7 @@
 	{{/unless}}
 
 	{{#if filterSelected}}
-		<ui5-list separators="None" mode="MultiSelect" class="ui5-multi-combobox-all-items-list">
+		<ui5-list separators="None" mode="MultiSelect" class="ui5-multi-combobox-all-items-list" accessible-role="listbox">
 			{{#each selectedItems}}
 				{{#if isGroupItem}}
 					<ui5-li-groupheader data-ui5-stable="{{this.stableDomRef}}" @keydown="{{../_onItemKeydown}}">{{ this.text }}</ui5-li-groupheader>
@@ -78,7 +78,7 @@
 			{{/each}}
 		</ui5-list>
 	{{else}}
-		<ui5-list separators="None" mode="MultiSelect" class="ui5-multi-combobox-all-items-list">
+		<ui5-list separators="None" mode="MultiSelect" class="ui5-multi-combobox-all-items-list" accessible-role="listbox">
 			{{#each _filteredItems}}
 				{{#if isGroupItem}}
 					<ui5-li-groupheader data-ui5-stable="{{this.stableDomRef}}" @keydown="{{../_onItemKeydown}}">{{ this.text }}</ui5-li-groupheader>
@@ -135,6 +135,7 @@
 		data-ui5-token-id="{{this._id}}"
 		data-ui5-stable="{{this.stableDomRef}}"
 		@keydown="{{../_onItemKeydown}}"
+		accessible-role="option"
 	>
 		{{this.text}}
 	</ui5-li>

package/src/TimePickerPopover.hbs

@@ -6,6 +6,7 @@
 	allow-target-overlap
 	_hide-header
 	hide-arrow
+	accessible-name="{{pickerAccessibleName}}"
 	@ui5-after-open="{{onResponsivePopoverAfterOpen}}"
 	@ui5-after-close="{{onResponsivePopoverAfterClose}}"
 	@wheel="{{_handleWheel}}"

package/src/YearPicker.hbs

@@ -9,7 +9,7 @@
 	@click={{_selectYear}}
 >
 	{{#each _years}}
-		<div class="ui5-yp-interval-container">
+		<div role="row" class="ui5-yp-interval-container">
 			{{#each this}}
 				<div
 					data-sap-timestamp="{{this.timestamp}}"

package/src/i18n/messagebundle.properties

@@ -157,6 +157,15 @@ DATETIME_DESCRIPTION=Date Time Input
 #XACT: Aria information for the Date Range Picker
 DATERANGE_DESCRIPTION=Date Range Input
 
+#XACT: Aria information for the Date Picker popover
+DATEPICKER_POPOVER_ACCESSIBLE_NAME=Choose Date
+
+#XACT: Aria information for the Date Time Picker popover
+DATETIMEPICKER_POPOVER_ACCESSIBLE_NAME=Choose Date and Time
+
+#XACT: Aria information for the Date Range Picker popover
+DATERANGEPICKER_POPOVER_ACCESSIBLE_NAME=Choose Date Range
+
 DELETE=Delete
 
 FILEUPLOAD_BROWSE=Browse...
@@ -376,6 +385,9 @@ TIMEPICKER_CANCEL_BUTTON=Cancel
 #XACT: Aria information for the Time Picker
 TIMEPICKER_INPUT_DESCRIPTION=Time Input
 
+#XACT: Aria information for the Time Picker popover
+TIMEPICKER_POPOVER_ACCESSIBLE_NAME=Choose Time
+
 #XACT: Aria information for the Time Picker Clock Dial
 TIMEPICKER_CLOCK_DIAL_LABEL=Clock Dial
 

package/src/themes/BusyIndicator.css

@@ -89,6 +89,10 @@
 	flex-direction: column;
 }
 
+:host(:not(:empty)) .ui5-busy-indicator-busy-area {
+	background-color: var(--_ui5_busy_indicator_block_layer);
+}
+
 .ui5-busy-indicator-busy-area:focus {
 	outline: var(--_ui5_busy_indicator_focus_outline);
 	outline-offset: -2px;

package/src/themes/TimePicker.css

@@ -1,6 +1,7 @@
 @import "./FormComponents.css";
 @import "./InvisibleTextStyles.css";
 @import "./InputIcon.css";
+@import "./InputSharedStyles.css";
 
 :host(:not([hidden])) {
 	display: inline-block;
@@ -43,28 +44,4 @@
 	letter-spacing: inherit;
 	word-spacing: inherit;
 	margin: inherit;
-}
-
-.ui5-time-picker-input-icon-button {
-	border-left: 0.0625rem solid transparent;
-}
-
-.ui5-time-picker-input-icon-button {
-	border-left: 0.0625rem solid transparent;
-}
-
-.ui5-time-picker-input-icon-button:hover {
-	cursor: pointer;
-	border-left: var(--_ui5_time_picker_border);
-	background: var(--sapButton_Hover_Background);
-}
-
-.ui5-time-picker-input-icon-button:active {
-	background-color: var(--sapButton_Active_Background);
-	color: var(--sapButton_Active_TextColor);
-}
-
-.ui5-time-picker-input-icon-button[pressed] {
-	background-color: var(--sapButton_Active_Background);
-	color: var(--sapButton_Active_TextColor);
 }

package/src/themes/TreeItem.css

@@ -20,14 +20,14 @@
 	border-bottom: var(--ui5-listitem-selected-border-bottom);
 }
 
-:host([_toggle-button-end]:not([selected])) .ui5-li-root-tree:hover,
-:host(:not([_mode="None"]):not([_mode="Delete"]):not([active]):not([selected])) .ui5-li-root-tree:hover {
-	background: var(--sapList_Hover_Background);
+:host([_toggle-button-end]) .ui5-li-root-tree:hover,
+:host([_mode]:not([_mode="None"]):not([_mode="Delete"]):not([active])) .ui5-li-root-tree:hover {
 	cursor: pointer;
 }
 
-:host([_toggle-button-end]) .ui5-li-root-tree:hover {
-	cursor: pointer;
+:host([_toggle-button-end]:not([selected])) .ui5-li-root-tree:hover,
+:host(:not([_mode="None"]):not([_mode="Delete"]):not([active]):not([selected])) .ui5-li-root-tree:hover {
+	background: var(--sapList_Hover_Background);
 }
 
 :host(:not([level="1"]):not([active]):not([selected])) .ui5-li-root-tree {
@@ -44,7 +44,6 @@
 
 :host(:not([_mode="None"]):not([_mode="Delete"]):not([active])[selected]) .ui5-li-root-tree:hover {
 	background-color: var(--sapList_Hover_SelectionBackground);
-	cursor: pointer;
 }
 
 .ui5-li-tree-toggle-box {

package/src/themes/base/BusyIndicator-parameters.css

@@ -2,4 +2,5 @@
 	--_ui5_busy_indicator_color: var(--sapContent_IconColor);
 	--_ui5_busy_indicator_focus_outline:  var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	--_ui5_busy_indicator_focus_border_radius: 0px;
+	--_ui5_busy_indicator_block_layer: color-mix(in oklch, transparent, var(--sapBlockLayer_Background) 20%);
 }

package/src/themes/sap_fiori_3_hcb/BusyIndicator-parameters.css

@@ -0,0 +1,5 @@
+@import "../base/BusyIndicator-parameters.css";
+
+:root {
+	--_ui5_busy_indicator_block_layer: color-mix(in oklch, transparent, var(--sapBlockLayer_Background) 30%);
+}

package/src/themes/sap_fiori_3_hcb/parameters-bundle.css

@@ -2,7 +2,7 @@
 @import "../base/AvatarGroup-parameters.css";
 @import "./Badge-parameters.css";
 @import "../base/BrowserScrollbar-parameters.css";
-@import "../base/BusyIndicator-parameters.css";
+@import "./BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
 @import "../base/CalendarLegend-parameters.css";
 @import "../base/CalendarLegendItem-parameters.css";

package/src/themes/sap_fiori_3_hcw/BusyIndicator-parameters.css

@@ -0,0 +1,5 @@
+@import "../base/BusyIndicator-parameters.css";
+
+:root {
+	--_ui5_busy_indicator_block_layer: color-mix(in oklch, transparent, var(--sapBlockLayer_Background) 30%);
+}

package/src/themes/sap_fiori_3_hcw/parameters-bundle.css

@@ -2,7 +2,7 @@
 @import "../base/AvatarGroup-parameters.css";
 @import "./Badge-parameters.css";
 @import "../base/BrowserScrollbar-parameters.css";
-@import "../base/BusyIndicator-parameters.css";
+@import "./BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
 @import "../base/CalendarLegend-parameters.css";
 @import "../base/CalendarLegendItem-parameters.css";

package/src/themes/sap_horizon/ProgressIndicatorLayout-parameters.css

@@ -1,8 +1,3 @@
-[dir="rtl"] {
-	--_ui5_progress_indicator_bar_border_radius: 0.5rem;
-    --_ui5_progress_indicator_remaining_bar_border_radius: 0.25rem;
-}
-
 :root {
     --_ui5_progress_indicator_icon_visibility: inline-block;
 

package/src/themes/sap_horizon/rtl-parameters.css

@@ -1,6 +1,8 @@
 @import "../base/rtl-parameters.css";
 
 [dir="rtl"] {
+	--_ui5_progress_indicator_bar_border_radius: 0.5rem;
+	--_ui5_progress_indicator_remaining_bar_border_radius: 0.25rem;
 	--_ui5_segmented_btn_item_border_left: 0.0625rem;
 	--_ui5_segmented_btn_item_border_right: 0.0625rem;
 }

package/src/themes/sap_horizon_hcb/BusyIndicator-parameters.css

@@ -2,4 +2,5 @@
 
 :root {
 	--_ui5_busy_indicator_color: var(--sapContent_BusyColor);
+	--_ui5_busy_indicator_block_layer: color-mix(in oklch, transparent, var(--sapBlockLayer_Background) 30%);
 }

package/src/themes/sap_horizon_hcw/BusyIndicator-parameters.css

@@ -2,4 +2,5 @@
 
 :root {
 	--_ui5_busy_indicator_color: var(--sapContent_BusyColor);
+	--_ui5_busy_indicator_block_layer: color-mix(in oklch, transparent, var(--sapBlockLayer_Background) 30%);
 }