jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-26 02:36:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adjust check focus behaviour for todo list (#19472)

Browse Source 
* Adjust check focus behaviour for todo list

* improve aria
This commit is contained in:
Bram Kragten 2024-01-22 13:58:35 +01:00 committed by GitHub
parent 10ad0010cf
commit bf4b76864d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 105 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/panels/lovelace/cards/hui-todo-list-card.ts
View File

@ -224,13 +224,21 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
` `
: nothing} : nothing}
</div> </div>
<ha-sortable
handle-selector="ha-svg-icon"
draggable-selector=".draggable"
.disabled=${!this._reordering}
@item-moved=${this._itemMoved}
>
<mwc-list wrapFocus multi>
${uncheckedItems.length ${uncheckedItems.length
? html`<div class="header"> ? html`
<span> <div class="header" role="seperator">
<h2>
${this.hass!.localize( ${this.hass!.localize(
"ui.panel.lovelace.cards.todo-list.unchecked_items" "ui.panel.lovelace.cards.todo-list.unchecked_items"
)} )}
</span> </h2>
${this.todoListSupportsFeature( ${this.todoListSupportsFeature(
TodoListEntityFeature.MOVE_TODO_ITEM TodoListEntityFeature.MOVE_TODO_ITEM
) )
@ -258,15 +266,8 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
</ha-button-menu>` </ha-button-menu>`
: nothing} : nothing}
</div> </div>
<ha-sortable
handle-selector="ha-svg-icon"
.disabled=${!this._reordering}
@item-moved=${this._itemMoved}
>
<mwc-list id="unchecked">
${this._renderItems(uncheckedItems, unavailable)} ${this._renderItems(uncheckedItems, unavailable)}
</mwc-list> `
</ha-sortable>`
: html`<p class="empty"> : html`<p class="empty">
${this.hass.localize( ${this.hass.localize(
"ui.panel.lovelace.cards.todo-list.no_unchecked_items" "ui.panel.lovelace.cards.todo-list.no_unchecked_items"
@ -274,13 +275,14 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
</p>`} </p>`}
${checkedItems.length ${checkedItems.length
? html` ? html`
<div role="separator">
<div class="divider"></div> <div class="divider"></div>
<div class="header"> <div class="header">
<span> <h2>
${this.hass!.localize( ${this.hass!.localize(
"ui.panel.lovelace.cards.todo-list.checked_items" "ui.panel.lovelace.cards.todo-list.checked_items"
)} )}
</span> </h2>
${this.todoListSupportsFeature( ${this.todoListSupportsFeature(
TodoListEntityFeature.DELETE_TODO_ITEM TodoListEntityFeature.DELETE_TODO_ITEM
) )
@ -308,11 +310,12 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
</ha-button-menu>` </ha-button-menu>`
: nothing} : nothing}
</div> </div>
<mwc-list multi id="checked"> </div>
${this._renderItems(checkedItems, unavailable)} ${this._renderItems(checkedItems, unavailable)}
</mwc-list>
` `
: ""} : ""}
</mwc-list>
</ha-sortable>
</ha-card> </ha-card>
`; `;
} }
@ -344,6 +347,7 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
left left
.hasMeta=${showReorder || showDelete} .hasMeta=${showReorder || showDelete}
class="editRow ${classMap({ class="editRow ${classMap({
draggable: item.status === TodoItemStatus.NeedsAction,
completed: item.status === TodoItemStatus.Completed, completed: item.status === TodoItemStatus.Completed,
multiline: Boolean(item.description || item.due), multiline: Boolean(item.description || item.due),
})}" })}"
@ -471,6 +475,12 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
} }
private async _completeItem(ev): Promise<void> { 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); const item = this._getItem(ev.currentTarget.itemId);
if (!item) { if (!item) {
return; return;
@ -483,17 +493,11 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
? TodoItemStatus.Completed ? TodoItemStatus.Completed
: TodoItemStatus.NeedsAction, : TodoItemStatus.NeedsAction,
}); });
if (focusedIndex !== undefined && list) {
await this.updateComplete; await this.updateComplete;
const newList: List = this.shadowRoot!.querySelector( await list.updateComplete;
item.status === TodoItemStatus.NeedsAction ? "#checked" : "#unchecked" list.focusItemAtIndex(focusedIndex);
)!; }
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);
} }
private async _clearCompletedItems(): Promise<void> { private async _clearCompletedItems(): Promise<void> {
@ -562,6 +566,9 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
} }
private async _moveItem(oldIndex: number, newIndex: number) { private async _moveItem(oldIndex: number, newIndex: number) {
// correct index for header
oldIndex -= 1;
newIndex -= 1;
const uncheckedItems = this._getUncheckedItems(this._items); const uncheckedItems = this._getUncheckedItems(this._items);
const item = uncheckedItems[oldIndex]; const item = uncheckedItems[oldIndex];
let prevItem: TodoItem | undefined; let prevItem: TodoItem | undefined;
@ -630,8 +637,9 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
direction: var(--direction); direction: var(--direction);
} }
.header span { .header h2 {
color: var(--primary-text-color); color: var(--primary-text-color);
font-size: inherit;
font-weight: 500; font-weight: 500;
} }