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

Keyboard accessible menus in hass-tabs-subpage-data-table (#23927)

Browse Source
This commit is contained in:
karwosts 2025-01-28 22:23:27 -08:00 committed by GitHub
parent 167f859f2a
commit 543c7df3e0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 23 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/layouts/hass-tabs-subpage-data-table.ts
View File

@ -355,7 +355,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
></ha-assist-chip> ></ha-assist-chip>
<ha-md-menu-item <ha-md-menu-item
.value=${undefined} .value=${undefined}
@click=${this._selectAll} .clickAction=${this._selectAll}
> >
<div slot="headline"> <div slot="headline">
${localize("ui.components.subpage-data-table.select_all")} ${localize("ui.components.subpage-data-table.select_all")}
@ -363,7 +363,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
</ha-md-menu-item> </ha-md-menu-item>
<ha-md-menu-item <ha-md-menu-item
.value=${undefined} .value=${undefined}
@click=${this._selectNone} .clickAction=${this._selectNone}
> >
<div slot="headline"> <div slot="headline">
${localize( ${localize(
@ -374,7 +374,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
<ha-md-divider role="separator" tabindex="-1"></ha-md-divider> <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
<ha-md-menu-item <ha-md-menu-item
.value=${undefined} .value=${undefined}
@click=${this._disableSelectMode} .clickAction=${this._disableSelectMode}
> >
<div slot="headline"> <div slot="headline">
${localize( ${localize(
@ -500,7 +500,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
? html` ? html`
<ha-md-menu-item <ha-md-menu-item
.value=${id} .value=${id}
@click=${this._handleGroupBy} .clickAction=${this._handleGroupBy}
.selected=${id === this._groupColumn} .selected=${id === this._groupColumn}
class=${classMap({ selected: id === this._groupColumn })} class=${classMap({ selected: id === this._groupColumn })}
> >
@ -511,7 +511,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
)} )}
<ha-md-menu-item <ha-md-menu-item
.value=${undefined} .value=${undefined}
@click=${this._handleGroupBy} .clickAction=${this._handleGroupBy}
.selected=${this._groupColumn === undefined} .selected=${this._groupColumn === undefined}
class=${classMap({ selected: this._groupColumn === undefined })} class=${classMap({ selected: this._groupColumn === undefined })}
> >
@ -519,7 +519,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
</ha-md-menu-item> </ha-md-menu-item>
<ha-md-divider role="separator" tabindex="-1"></ha-md-divider> <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
<ha-md-menu-item <ha-md-menu-item
@click=${this._collapseAllGroups} .clickAction=${this._collapseAllGroups}
.disabled=${this._groupColumn === undefined} .disabled=${this._groupColumn === undefined}
> >
<ha-svg-icon <ha-svg-icon
@ -529,7 +529,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
${localize("ui.components.subpage-data-table.collapse_all_groups")} ${localize("ui.components.subpage-data-table.collapse_all_groups")}
</ha-md-menu-item> </ha-md-menu-item>
<ha-md-menu-item <ha-md-menu-item
@click=${this._expandAllGroups} .clickAction=${this._expandAllGroups}
.disabled=${this._groupColumn === undefined} .disabled=${this._groupColumn === undefined}
> >
<ha-svg-icon <ha-svg-icon
@ -546,6 +546,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
<ha-md-menu-item <ha-md-menu-item
.value=${id} .value=${id}
@click=${this._handleSortBy} @click=${this._handleSortBy}
@keydown=${this._handleSortBy}
keep-open keep-open
.selected=${id === this._sortColumn} .selected=${id === this._sortColumn}
class=${classMap({ selected: id === this._sortColumn })} class=${classMap({ selected: id === this._sortColumn })}
@ -623,6 +624,8 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
} }
private _handleSortBy(ev) { private _handleSortBy(ev) {
if (ev.type === "keydown" && ev.key !== "Enter" && ev.key !== " ") return;
const columnId = ev.currentTarget.value; const columnId = ev.currentTarget.value;
if (!this._sortDirection || this._sortColumn !== columnId) { if (!this._sortDirection || this._sortColumn !== columnId) {
this._sortDirection = "asc"; this._sortDirection = "asc";
@ -639,9 +642,9 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
}); });
} }
private _handleGroupBy(ev) { private _handleGroupBy = (item) => {
this._setGroupColumn(ev.currentTarget.value); this._setGroupColumn(item.value);
} };
private _setGroupColumn(columnId: string) { private _setGroupColumn(columnId: string) {
this._groupColumn = columnId; this._groupColumn = columnId;
@ -665,30 +668,30 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
}); });
} }
private _collapseAllGroups() { private _collapseAllGroups = () => {
this._dataTable.collapseAllGroups(); this._dataTable.collapseAllGroups();
} };
private _expandAllGroups() { private _expandAllGroups = () => {
this._dataTable.expandAllGroups(); this._dataTable.expandAllGroups();
} };
private _enableSelectMode() { private _enableSelectMode() {
this._selectMode = true; this._selectMode = true;
} }
private _disableSelectMode() { private _disableSelectMode = () => {
this._selectMode = false; this._selectMode = false;
this._dataTable.clearSelection(); this._dataTable.clearSelection();
} };
private _selectAll() { private _selectAll = () => {
this._dataTable.selectAll(); this._dataTable.selectAll();
} };
private _selectNone() { private _selectNone = () => {
this._dataTable.clearSelection(); this._dataTable.clearSelection();
} };
private _handleSearchChange(ev: CustomEvent) { private _handleSearchChange(ev: CustomEvent) {
if (this.filter === ev.detail.value) { if (this.filter === ev.detail.value) {