From bf4b76864dd22ce7954785c082ff80139c20b6e7 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Mon, 22 Jan 2024 13:58:35 +0100
Subject: [PATCH] Adjust check focus behaviour for todo list (#19472)

* Adjust check focus behaviour for todo list

* improve aria
---
 .../lovelace/cards/hui-todo-list-card.ts      | 202 +++++++++---------
 1 file changed, 105 insertions(+), 97 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-todo-list-card.ts b/src/panels/lovelace/cards/hui-todo-list-card.ts
index 4d286c7fd3..56b9cbadab 100644
--- a/src/panels/lovelace/cards/hui-todo-list-card.ts
+++ b/src/panels/lovelace/cards/hui-todo-list-card.ts
@@ -224,95 +224,98 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
               `
             : nothing}
         </div>
-        ${uncheckedItems.length
-          ? html`<div class="header">
-                <span>
-                  ${this.hass!.localize(
-                    "ui.panel.lovelace.cards.todo-list.unchecked_items"
-                  )}
-                </span>
-                ${this.todoListSupportsFeature(
-                  TodoListEntityFeature.MOVE_TODO_ITEM
-                )
-                  ? html`<ha-button-menu>
-                      <ha-icon-button
-                        slot="trigger"
-                        .path=${mdiDotsVertical}
-                      ></ha-icon-button>
-                      <ha-list-item
-                        @click=${this._toggleReorder}
-                        graphic="icon"
-                      >
-                        ${this.hass!.localize(
-                          this._reordering
-                            ? "ui.panel.lovelace.cards.todo-list.exit_reorder_items"
-                            : "ui.panel.lovelace.cards.todo-list.reorder_items"
-                        )}
-                        <ha-svg-icon
-                          slot="graphic"
-                          .path=${mdiSort}
-                          .disabled=${unavailable}
-                        >
-                        </ha-svg-icon>
-                      </ha-list-item>
-                    </ha-button-menu>`
-                  : nothing}
-              </div>
-              <ha-sortable
-                handle-selector="ha-svg-icon"
-                .disabled=${!this._reordering}
-                @item-moved=${this._itemMoved}
-              >
-                <mwc-list id="unchecked">
+        <ha-sortable
+          handle-selector="ha-svg-icon"
+          draggable-selector=".draggable"
+          .disabled=${!this._reordering}
+          @item-moved=${this._itemMoved}
+        >
+          <mwc-list wrapFocus multi>
+            ${uncheckedItems.length
+              ? html`
+                  <div class="header" role="seperator">
+                    <h2>
+                      ${this.hass!.localize(
+                        "ui.panel.lovelace.cards.todo-list.unchecked_items"
+                      )}
+                    </h2>
+                    ${this.todoListSupportsFeature(
+                      TodoListEntityFeature.MOVE_TODO_ITEM
+                    )
+                      ? html`<ha-button-menu>
+                          <ha-icon-button
+                            slot="trigger"
+                            .path=${mdiDotsVertical}
+                          ></ha-icon-button>
+                          <ha-list-item
+                            @click=${this._toggleReorder}
+                            graphic="icon"
+                          >
+                            ${this.hass!.localize(
+                              this._reordering
+                                ? "ui.panel.lovelace.cards.todo-list.exit_reorder_items"
+                                : "ui.panel.lovelace.cards.todo-list.reorder_items"
+                            )}
+                            <ha-svg-icon
+                              slot="graphic"
+                              .path=${mdiSort}
+                              .disabled=${unavailable}
+                            >
+                            </ha-svg-icon>
+                          </ha-list-item>
+                        </ha-button-menu>`
+                      : nothing}
+                  </div>
                   ${this._renderItems(uncheckedItems, unavailable)}
-                </mwc-list>
-              </ha-sortable>`
-          : html`<p class="empty">
-              ${this.hass.localize(
-                "ui.panel.lovelace.cards.todo-list.no_unchecked_items"
-              )}
-            </p>`}
-        ${checkedItems.length
-          ? html`
-              <div class="divider"></div>
-              <div class="header">
-                <span>
-                  ${this.hass!.localize(
-                    "ui.panel.lovelace.cards.todo-list.checked_items"
+                `
+              : html`<p class="empty">
+                  ${this.hass.localize(
+                    "ui.panel.lovelace.cards.todo-list.no_unchecked_items"
                   )}
-                </span>
-                ${this.todoListSupportsFeature(
-                  TodoListEntityFeature.DELETE_TODO_ITEM
-                )
-                  ? html`<ha-button-menu>
-                      <ha-icon-button
-                        slot="trigger"
-                        .path=${mdiDotsVertical}
-                      ></ha-icon-button>
-                      <ha-list-item
-                        @click=${this._clearCompletedItems}
-                        graphic="icon"
-                        class="warning"
-                      >
+                </p>`}
+            ${checkedItems.length
+              ? html`
+                  <div role="separator">
+                    <div class="divider"></div>
+                    <div class="header">
+                      <h2>
                         ${this.hass!.localize(
-                          "ui.panel.lovelace.cards.todo-list.clear_items"
+                          "ui.panel.lovelace.cards.todo-list.checked_items"
                         )}
-                        <ha-svg-icon
-                          class="warning"
-                          slot="graphic"
-                          .path=${mdiDeleteSweep}
-                          .disabled=${unavailable}
-                        >
-                        </ha-svg-icon>
-                      </ha-list-item>
-                    </ha-button-menu>`
-                  : nothing}
-              </div>
-              <mwc-list multi id="checked">
-                ${this._renderItems(checkedItems, unavailable)}
-              </mwc-list>
-            `
-          : ""}
+                      </h2>
+                      ${this.todoListSupportsFeature(
+                        TodoListEntityFeature.DELETE_TODO_ITEM
+                      )
+                        ? html`<ha-button-menu>
+                            <ha-icon-button
+                              slot="trigger"
+                              .path=${mdiDotsVertical}
+                            ></ha-icon-button>
+                            <ha-list-item
+                              @click=${this._clearCompletedItems}
+                              graphic="icon"
+                              class="warning"
+                            >
+                              ${this.hass!.localize(
+                                "ui.panel.lovelace.cards.todo-list.clear_items"
+                              )}
+                              <ha-svg-icon
+                                class="warning"
+                                slot="graphic"
+                                .path=${mdiDeleteSweep}
+                                .disabled=${unavailable}
+                              >
+                              </ha-svg-icon>
+                            </ha-list-item>
+                          </ha-button-menu>`
+                        : nothing}
+                    </div>
+                  </div>
+                  ${this._renderItems(checkedItems, unavailable)}
+                `
+              : ""}
+          </mwc-list>
+        </ha-sortable>
       </ha-card>
     `;
   }
@@ -344,6 +347,7 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
               left
               .hasMeta=${showReorder || showDelete}
               class="editRow ${classMap({
+                draggable: item.status === TodoItemStatus.NeedsAction,
                 completed: item.status === TodoItemStatus.Completed,
                 multiline: Boolean(item.description || item.due),
               })}"
@@ -471,6 +475,12 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
   }
 
   private async _completeItem(ev): Promise<void> {
+    let focusedIndex: number | undefined;
+    let list: List | undefined;
+    if (ev.type === "keydown") {
+      list = this.renderRoot.querySelector("mwc-list")!;
+      focusedIndex = list.getFocusedItemIndex();
+    }
     const item = this._getItem(ev.currentTarget.itemId);
     if (!item) {
       return;
@@ -483,17 +493,11 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
           ? TodoItemStatus.Completed
           : TodoItemStatus.NeedsAction,
     });
-    await this.updateComplete;
-    const newList: List = this.shadowRoot!.querySelector(
-      item.status === TodoItemStatus.NeedsAction ? "#checked" : "#unchecked"
-    )!;
-    await newList.updateComplete;
-    const items =
-      item.status === TodoItemStatus.NeedsAction
-        ? this._getCheckedItems(this._items)
-        : this._getUncheckedItems(this._items);
-    const index = items.findIndex((itm) => itm.uid === item.uid);
-    newList.focusItemAtIndex(index);
+    if (focusedIndex !== undefined && list) {
+      await this.updateComplete;
+      await list.updateComplete;
+      list.focusItemAtIndex(focusedIndex);
+    }
   }
 
   private async _clearCompletedItems(): Promise<void> {
@@ -562,6 +566,9 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
   }
 
   private async _moveItem(oldIndex: number, newIndex: number) {
+    // correct index for header
+    oldIndex -= 1;
+    newIndex -= 1;
     const uncheckedItems = this._getUncheckedItems(this._items);
     const item = uncheckedItems[oldIndex];
     let prevItem: TodoItem | undefined;
@@ -630,8 +637,9 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
         direction: var(--direction);
       }
 
-      .header span {
+      .header h2 {
         color: var(--primary-text-color);
+        font-size: inherit;
         font-weight: 500;
       }