Make menu's work with keyboard (#6421)

This commit is contained in:
Bram Kragten 2020-07-17 20:31:44 +02:00 committed by GitHub
parent cddbf460f8
commit 92915eddc2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 38 additions and 27 deletions

View File

@ -101,10 +101,10 @@ class HassioAddonStore extends LitElement {
<mwc-icon-button slot="trigger" alt="menu">
<ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
</mwc-icon-button>
<mwc-list-item @tap=${this._manageRepositories}>
<mwc-list-item @request-selected=${this._manageRepositories}>
Repositories
</mwc-list-item>
<mwc-list-item @tap=${this.refreshData}>
<mwc-list-item @request-selected=${this.refreshData}>
Reload
</mwc-list-item>
</ha-button-menu>

View File

@ -10,7 +10,6 @@ import {
} from "lit-element";
import "@material/mwc-button";
import "@material/mwc-menu";
import "@material/mwc-list/mwc-list-item";
import type { Menu, Corner } from "@material/mwc-menu";
import "./ha-icon-button";

View File

@ -77,7 +77,7 @@ export class HaDateRangePicker extends LitElement {
</div>
${this.ranges
? html`<div slot="ranges" class="date-range-ranges">
<mwc-list @click=${this._setDateRange}>
<mwc-list @request-selected=${this._setDateRange}>
${Object.entries(this.ranges).map(
([name, dates]) => html`<mwc-list-item
.activated=${this.startDate.getTime() ===

View File

@ -136,7 +136,7 @@ export default class HaAutomationActionRow extends LitElement {
><ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
</mwc-icon-button>
<mwc-list-item
@tap=${this._switchYamlMode}
@request-selected=${this._switchYamlMode}
.disabled=${selected === -1}
>
${yamlMode
@ -152,7 +152,7 @@ export default class HaAutomationActionRow extends LitElement {
"ui.panel.config.automation.editor.actions.duplicate"
)}
</mwc-list-item>
<mwc-list-item @tap=${this._onDelete}>
<mwc-list-item @request-selected=${this._onDelete}>
${this.hass.localize(
"ui.panel.config.automation.editor.actions.delete"
)}

View File

@ -71,7 +71,7 @@ export default class HaAutomationConditionRow extends LitElement {
slot="trigger"
><ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon
></mwc-icon-button>
<mwc-list-item @tap=${this._switchYamlMode}>
<mwc-list-item @request-selected=${this._switchYamlMode}>
${this._yamlMode
? this.hass.localize(
"ui.panel.config.automation.editor.edit_ui"
@ -85,7 +85,7 @@ export default class HaAutomationConditionRow extends LitElement {
"ui.panel.config.automation.editor.actions.duplicate"
)}
</mwc-list-item>
<mwc-list-item @tap=${this._onDelete}>
<mwc-list-item @request-selected=${this._onDelete}>
${this.hass.localize(
"ui.panel.config.automation.editor.actions.delete"
)}

View File

@ -101,7 +101,7 @@ export default class HaAutomationTriggerRow extends LitElement {
><ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon
></mwc-icon-button>
<mwc-list-item
@tap=${this._switchYamlMode}
@request-selected=${this._switchYamlMode}
.disabled=${selected === -1}
>
${yamlMode
@ -117,7 +117,7 @@ export default class HaAutomationTriggerRow extends LitElement {
"ui.panel.config.automation.editor.actions.duplicate"
)}
</mwc-list-item>
<mwc-list-item @tap=${this._onDelete}>
<mwc-list-item @request-selected=${this._onDelete}>
${this.hass.localize(
"ui.panel.config.automation.editor.actions.delete"
)}

View File

@ -462,7 +462,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
<ha-svg-icon path=${mdiFilterVariant}></ha-svg-icon>
</mwc-icon-button>
<mwc-list-item
@click="${this._showDisabledChanged}"
@request-selected="${this._showDisabledChanged}"
graphic="control"
>
<ha-checkbox
@ -474,7 +474,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
)}
</mwc-list-item>
<mwc-list-item
@click="${this._showRestoredChanged}"
@request-selected="${this._showRestoredChanged}"
graphic="control"
>
<ha-checkbox
@ -486,7 +486,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
)}
</mwc-list-item>
<mwc-list-item
@click="${this._showReadOnlyChanged}"
@request-selected="${this._showReadOnlyChanged}"
graphic="control"
>
<ha-checkbox

View File

@ -284,7 +284,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
>
<ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
</mwc-icon-button>
<mwc-list-item @click=${this._toggleShowIgnored}>
<mwc-list-item @request-selected=${this._toggleShowIgnored}>
${this.hass.localize(
this._showIgnored
? "ui.panel.config.integrations.ignore.hide_ignored"

View File

@ -231,7 +231,7 @@ export class HaIntegrationCard extends LitElement {
>
<ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
</mwc-icon-button>
<mwc-list-item @click=${this._showSystemOptions}>
<mwc-list-item @request-selected=${this._showSystemOptions}>
${this.hass.localize(
"ui.panel.config.integrations.config_entry.system_options"
)}
@ -255,7 +255,10 @@ export class HaIntegrationCard extends LitElement {
</mwc-list-item>
</a>
`}
<mwc-list-item class="warning" @click=${this._removeIntegration}>
<mwc-list-item
class="warning"
@request-selected=${this._removeIntegration}
>
${this.hass.localize(
"ui.panel.config.integrations.config_entry.delete"
)}

View File

@ -78,17 +78,20 @@ export class HuiCardOptions extends LitElement {
<ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
</mwc-icon-button>
<mwc-list-item @tap=${this._moveCard}>
<mwc-list-item @request-selected=${this._moveCard}>
${this.hass!.localize(
"ui.panel.lovelace.editor.edit_card.move"
)}</mwc-list-item
>
<mwc-list-item @tap=${this._duplicateCard}
<mwc-list-item @request-selected=${this._duplicateCard}
>${this.hass!.localize(
"ui.panel.lovelace.editor.edit_card.duplicate"
)}</mwc-list-item
>
<mwc-list-item class="delete-item" @tap=${this._deleteCard}>
<mwc-list-item
class="delete-item"
@request-selected=${this._deleteCard}
>
${this.hass!.localize(
"ui.panel.lovelace.editor.edit_card.delete"
)}</mwc-list-item

View File

@ -302,6 +302,10 @@ export class HuiCardEditor extends LitElement {
.yaml-editor {
padding: 8px 0px;
}
.error,
.warning {
word-break: break-word;
}
.error {
color: var(--error-color);
}

View File

@ -160,14 +160,16 @@ class HUIRoot extends LitElement {
aria-label=${this.hass!.localize(
"ui.panel.lovelace.unused_entities.title"
)}
@tap="${this._handleUnusedEntities}"
@request-selected="${this._handleUnusedEntities}"
>
${this.hass!.localize(
"ui.panel.lovelace.unused_entities.title"
)}
</mwc-list-item>
`}
<mwc-list-item @tap="${this.lovelace!.enableFullEditMode}">
<mwc-list-item
@request-selected="${this.lovelace!.enableFullEditMode}"
>
${this.hass!.localize(
"ui.panel.lovelace.editor.menu.raw_editor"
)}
@ -210,7 +212,7 @@ class HUIRoot extends LitElement {
aria-label=${this.hass!.localize(
"ui.panel.lovelace.menu.refresh"
)}
@tap="${this._handleRefresh}"
@request-selected="${this._handleRefresh}"
>
${this.hass!.localize(
"ui.panel.lovelace.menu.refresh"
@ -220,7 +222,7 @@ class HUIRoot extends LitElement {
aria-label=${this.hass!.localize(
"ui.panel.lovelace.unused_entities.title"
)}
@tap="${this._handleUnusedEntities}"
@request-selected="${this._handleUnusedEntities}"
>
${this.hass!.localize(
"ui.panel.lovelace.unused_entities.title"
@ -235,7 +237,7 @@ class HUIRoot extends LitElement {
aria-label=${this.hass!.localize(
"ui.panel.lovelace.menu.reload_resources"
)}
@tap="${this._handleReloadResources}"
@request-selected=${this._handleReloadResources}
>
${this.hass!.localize(
"ui.panel.lovelace.menu.reload_resources"
@ -249,7 +251,7 @@ class HUIRoot extends LitElement {
aria-label=${this.hass!.localize(
"ui.panel.lovelace.menu.configure_ui"
)}
@tap="${this._editModeEnable}"
@request-selected=${this._editModeEnable}
>
${this.hass!.localize(
"ui.panel.lovelace.menu.configure_ui"
@ -261,7 +263,7 @@ class HUIRoot extends LitElement {
aria-label=${this.hass!.localize(
"ui.panel.lovelace.menu.help"
)}
@tap="${this._handleHelp}"
@request-selected=${this._handleHelp}
>
${this.hass!.localize("ui.panel.lovelace.menu.help")}
</mwc-list-item>

View File

@ -90,7 +90,7 @@ class HaPanelShoppingList extends LocalizeMixin(PolymerElement) {
slot="trigger"
>
</ha-icon-button>
<mwc-list-item on-click="_clearCompleted">
<mwc-list-item on-request-selected="_clearCompleted">
[[localize('ui.panel.shopping-list.clear_completed')]]
</mwc-list-item>
</ha-button-menu>