Fix sidebar keyboard navigation in edit mode (#25376)

src/components/ha-sidebar.ts

@@ -24,9 +24,10 @@ import {
   customElement,
   eventOptions,
   property,
-  state,
   query,
+  state,
 } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { storage } from "../common/decorators/storage";
 import { fireEvent } from "../common/dom/fire_event";
@@ -45,13 +46,13 @@ import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant, PanelInfo, Route } from "../types";
 import "./ha-icon";
 import "./ha-icon-button";
+import "./ha-md-list";
+import "./ha-md-list-item";
+import type { HaMdListItem } from "./ha-md-list-item";
 import "./ha-menu-button";
 import "./ha-sortable";
 import "./ha-svg-icon";
 import "./user/ha-user-badge";
-import "./ha-md-list";
-import "./ha-md-list-item";
-import type { HaMdListItem } from "./ha-md-list-item";
 
 const SHOW_AFTER_SPACER = ["config", "developer-tools"];
 
@@ -407,6 +408,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
 
     // prettier-ignore
     return html`
+    <ha-sortable .disabled=${!this.editMode} draggable-selector=".draggable" @item-moved=${this._panelMoved}>
       <ha-md-list
         class="ha-scrollbar"
         @focusin=${this._listboxFocusIn}
@@ -420,11 +422,16 @@ class HaSidebar extends SubscribeMixin(LitElement) {
         ${this._renderSpacer()}
         ${this._renderPanels(afterSpacer, selectedPanel)}
         ${this._renderExternalConfiguration()}
-        </ha-md-list>
+      </ha-md-list>
+    </ha-sortable>
     `;
   }
 
-  private _renderPanels(panels: PanelInfo[], selectedPanel: string) {
+  private _renderPanels(
+    panels: PanelInfo[],
+    selectedPanel: string,
+    sortable = false
+  ) {
     return panels.map((panel) =>
       this._renderPanel(
         panel.url_path,
@@ -437,17 +444,26 @@ class HaSidebar extends SubscribeMixin(LitElement) {
           : panel.url_path in PANEL_ICONS
             ? PANEL_ICONS[panel.url_path]
             : undefined,
-        selectedPanel
+        selectedPanel,
+        sortable
       )
     );
   }
 
+  private _renderPanelsEdit(beforeSpacer: PanelInfo[], selectedPanel: string) {
+    return html`
+      ${this._renderPanels(beforeSpacer, selectedPanel, true)}
+      ${this._renderSpacer()}${this._renderHiddenPanels()}
+    `;
+  }
+
   private _renderPanel(
     urlPath: string,
     title: string | null,
     icon: string | null | undefined,
     iconPath: string | null | undefined,
-    selectedPanel: string
+    selectedPanel: string,
+    sortable = false
   ) {
     return urlPath === "config"
       ? this._renderConfiguration(title, selectedPanel)
@@ -455,7 +471,10 @@ class HaSidebar extends SubscribeMixin(LitElement) {
           <ha-md-list-item
             .href=${this.editMode ? undefined : `/${urlPath}`}
             type="link"
-            class=${selectedPanel === urlPath ? "selected" : ""}
+            class=${classMap({
+              selected: selectedPanel === urlPath,
+              draggable: this.editMode && sortable,
+            })}
             @mouseenter=${this._itemMouseEnter}
             @mouseleave=${this._itemMouseLeave}
           >
@@ -496,15 +515,6 @@ class HaSidebar extends SubscribeMixin(LitElement) {
     this._panelOrder = panelOrder;
   }
 
-  private _renderPanelsEdit(beforeSpacer: PanelInfo[], selectedPanel: string) {
-    return html`
-      <ha-sortable .disabled=${!this.editMode} @item-moved=${this._panelMoved}
-        ><div>${this._renderPanels(beforeSpacer, selectedPanel)}</div>
-      </ha-sortable>
-      ${this._renderSpacer()}${this._renderHiddenPanels()}
-    `;
-  }
-
   private _renderHiddenPanels() {
     return html`${this._hiddenPanels.length
       ? html`${this._hiddenPanels.map((url) => {

src/resources/ha-sidebar-edit-style.ts

@@ -1,7 +1,7 @@
 import { css } from "lit";
 
 export const sidebarEditStyle = css`
-  ha-sortable ha-md-list-item:nth-child(2n) {
+  ha-sortable ha-md-list-item.draggable:nth-child(2n) {
     animation-name: keyframes1;
     animation-iteration-count: infinite;
     transform-origin: 50% 10%;
@@ -9,7 +9,7 @@ export const sidebarEditStyle = css`
     animation-duration: 0.25s;
   }
 
-  ha-sortable ha-md-list-item:nth-child(2n-1) {
+  ha-sortable ha-md-list-item.draggable:nth-child(2n-1) {
     animation-name: keyframes2;
     animation-iteration-count: infinite;
     animation-direction: alternate;
@@ -18,8 +18,7 @@ export const sidebarEditStyle = css`
     animation-duration: 0.33s;
   }
 
-  ha-sortable ha-md-list-item {
+  ha-sortable ha-md-list-item.draggable {
-    height: 48px;
     cursor: grab;
   }