fix(ui5-list): no data item now can be focused (SAP#9665)

Fixes: SAP#9617
kineticjs · Aug 9, 2024 · ec5d614 · ec5d614
1 parent 1e18e08
commit ec5d614
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/packages/main/src/List.hbs b/packages/main/src/List.hbs
@@ -48,7 +48,7 @@
 			<slot></slot>
 
 			{{#if showNoDataText}}
-				<li id="{{_id}}-nodata" class="ui5-list-nodata">
+				<li tabindex="0" id="{{_id}}-nodata" class="ui5-list-nodata">
 					<div id="{{_id}}-nodata-text" class="ui5-list-nodata-text">
 						{{noDataText}}
 					</div>

diff --git a/packages/main/src/themes/List.css b/packages/main/src/themes/List.css
@@ -86,11 +86,21 @@
 	background-color: var(--sapList_Background);
 	border-bottom: 1px solid var(--sapList_BorderColor);
 	padding: 0 1rem !important;
+	outline: none;
 	height: var(--_ui5_list_no_data_height);
 	font-size: var(--_ui5_list_no_data_font_size);
 	font-family: "72override", var(--sapFontFamily);
 }
 
+.ui5-list-nodata:focus::after {
+	content: "";
+	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	position: absolute;
+	inset: 0.125rem;
+	pointer-events: none;
+	top: calc(50% + 0.125rem);
+}
+
 .ui5-list-nodata-text {
 	overflow: hidden;
 	text-overflow: ellipsis;