Make menu's work with keyboard (#6421)

home-assistant · Jul 17, 2020 · 92915ed · 92915ed
1 parent cddbf46
commit 92915ed
Show file tree

Hide file tree

Showing 13 changed files with 38 additions and 27 deletions.
diff --git a/hassio/src/addon-store/hassio-addon-store.ts b/hassio/src/addon-store/hassio-addon-store.ts
@@ -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>

diff --git a/src/components/ha-button-menu.ts b/src/components/ha-button-menu.ts
@@ -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";

diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts
@@ -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() ===

diff --git a/src/panels/config/automation/action/ha-automation-action-row.ts b/src/panels/config/automation/action/ha-automation-action-row.ts
@@ -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"
                 )}

diff --git a/src/panels/config/automation/condition/ha-automation-condition-row.ts b/src/panels/config/automation/condition/ha-automation-condition-row.ts
@@ -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"
                 )}

diff --git a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
@@ -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"
                 )}

diff --git a/src/panels/config/entities/ha-config-entities.ts b/src/panels/config/entities/ha-config-entities.ts
@@ -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

diff --git a/src/panels/config/integrations/ha-config-integrations.ts b/src/panels/config/integrations/ha-config-integrations.ts
@@ -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"

diff --git a/src/panels/config/integrations/ha-integration-card.ts b/src/panels/config/integrations/ha-integration-card.ts
@@ -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"
               )}

diff --git a/src/panels/lovelace/components/hui-card-options.ts b/src/panels/lovelace/components/hui-card-options.ts
@@ -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

diff --git a/src/panels/lovelace/editor/card-editor/hui-card-editor.ts b/src/panels/lovelace/editor/card-editor/hui-card-editor.ts
@@ -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);
       }

diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts
@@ -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>

diff --git a/src/panels/shopping-list/ha-panel-shopping-list.js b/src/panels/shopping-list/ha-panel-shopping-list.js
@@ -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>