jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-25 18:26:35 +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}
</div>
<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">
<span>
? html`
<div class="header" role="seperator">
<h2>
${this.hass!.localize(
"ui.panel.lovelace.cards.todo-list.unchecked_items"
)}
</span>
</h2>
${this.todoListSupportsFeature(
TodoListEntityFeature.MOVE_TODO_ITEM
)
@ -258,15 +266,8 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
</ha-button-menu>`
: nothing}
</div>
<ha-sortable
handle-selector="ha-svg-icon"
.disabled=${!this._reordering}
@item-moved=${this._itemMoved}
>
<mwc-list id="unchecked">
${this._renderItems(uncheckedItems, unavailable)}
</mwc-list>
</ha-sortable>`
`
: html`<p class="empty">
${this.hass.localize(
"ui.panel.lovelace.cards.todo-list.no_unchecked_items"
@ -274,13 +275,14 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
</p>`}
${checkedItems.length
? html`
<div role="separator">
<div class="divider"></div>
<div class="header">
<span>
<h2>
${this.hass!.localize(
"ui.panel.lovelace.cards.todo-list.checked_items"
)}
</span>
</h2>
${this.todoListSupportsFeature(
TodoListEntityFeature.DELETE_TODO_ITEM
)
@ -308,11 +310,12 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
</ha-button-menu>`
: nothing}
</div>
<mwc-list multi id="checked">
</div>
${this._renderItems(checkedItems, unavailable)}
</mwc-list>
`
: ""}
</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,
});
if (focusedIndex !== undefined && list) {
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);
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;
}