Set initial focus for lovelace dialogs (#11667)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/panels/config/lovelace/dashboards/dialog-lovelace-dashboard-detail.ts

@@ -207,6 +207,7 @@ export class DialogLovelaceDashboardDetail extends LitElement {
           slot="primaryAction"
           @click=${this._updateDashboard}
           .disabled=${urlInvalid || titleInvalid || this._submitting}
+          dialogInitialFocus
         >
           ${this._params.urlPath
             ? this._params.dashboard?.id

src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts

@@ -94,6 +94,7 @@ export class HuiCreateDialogCard
               .label=${this.hass!.localize(
                 "ui.panel.lovelace.editor.cardpicker.by_card"
               )}
+              dialogInitialFocus
             ></mwc-tab>
             <mwc-tab
               .label=${this.hass!.localize(

src/panels/lovelace/editor/card-editor/hui-dialog-delete-card.ts

@@ -53,7 +53,11 @@ export class HuiDialogDeleteCard extends LitElement {
               `
             : ""}
         </div>
-        <mwc-button slot="secondaryAction" @click=${this.closeDialog}>
+        <mwc-button
+          slot="secondaryAction"
+          @click=${this.closeDialog}
+          dialogInitialFocus
+        >
           ${this.hass!.localize("ui.common.cancel")}
         </mwc-button>
         <mwc-button slot="primaryAction" class="warning" @click=${this._delete}>

src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts

@@ -207,6 +207,7 @@ export class HuiDialogEditCard
               @config-changed=${this._handleConfigChanged}
               @GUImode-changed=${this._handleGUIModeChanged}
               @editor-save=${this._save}
+              dialogInitialFocus
             ></hui-card-element-editor>
           </div>
           <div class="element-preview">
@@ -242,7 +243,7 @@ export class HuiDialogEditCard
             `
           : ""}
         <div slot="primaryAction" @click=${this._save}>
-          <mwc-button @click=${this._cancel}>
+          <mwc-button @click=${this._cancel} dialogInitialFocus>
             ${this.hass!.localize("ui.common.cancel")}
           </mwc-button>
           ${this._cardConfig !== undefined && this._dirty

src/panels/lovelace/editor/card-editor/hui-dialog-suggest-card.ts

@@ -92,7 +92,11 @@ export class HuiDialogSuggestCard extends LitElement {
               `
             : ""}
         </div>
-        <mwc-button slot="secondaryAction" @click=${this.closeDialog}>
+        <mwc-button
+          slot="secondaryAction"
+          @click=${this.closeDialog}
+          dialogInitialFocus
+        >
           ${this._params.yaml
             ? this.hass!.localize("ui.common.close")
             : this.hass!.localize("ui.common.cancel")}

src/panels/lovelace/editor/header-footer-editor/hui-dialog-create-headerfooter.ts

@@ -56,15 +56,20 @@ export class HuiCreateDialogHeaderFooter
       >
         <div class="elements">
           ${headerFooterElements.map(
-            (headerFooter) =>
+            (headerFooter, index) =>
               html`
                 <ha-card
+                  role="button"
+                  tabindex="0"
+                  aria-labeledby=${"card-name-" + index}
                   outlined
                   .type=${headerFooter.type}
                   @click=${this._handleHeaderFooterPicked}
+                  @keyDown=${this._handleHeaderFooterPicked}
+                  dialogInitialFocus
                 >
                   <ha-svg-icon .path=${headerFooter.icon}></ha-svg-icon>
-                  <div>
+                  <div .id=${"card-name-" + index} role="none presentation">
                     ${this.hass!.localize(
                       `ui.panel.lovelace.editor.header-footer.types.${headerFooter.type}.name`
                     )}
@@ -83,6 +88,15 @@ export class HuiCreateDialogHeaderFooter
   }
 
   private async _handleHeaderFooterPicked(ev: CustomEvent): Promise<void> {
+    if (
+      ev instanceof KeyboardEvent &&
+      ev.key !== "Enter" &&
+      ev.key !== " " &&
+      ev.key !== "Spacebar"
+    ) {
+      return;
+    }
+
     const type = (ev.currentTarget as any).type;
     let config: LovelaceHeaderFooterConfig = { type };
 

src/panels/lovelace/editor/hui-dialog-save-config.ts

@@ -93,6 +93,7 @@ export class HuiSaveConfig extends LitElement implements HassDialog {
                   <ha-switch
                     .checked=${this._emptyConfig}
                     @change=${this._emptyConfigChanged}
+                    dialogInitialFocus
                   ></ha-switch
                 ></ha-formfield>
               `
@@ -115,6 +116,7 @@ export class HuiSaveConfig extends LitElement implements HassDialog {
                 <ha-yaml-editor
                   .hass=${this.hass}
                   .defaultValue=${this._params!.lovelace.config}
+                  dialogInitialFocus
                 ></ha-yaml-editor>
               `}
         </div>

src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts

@@ -50,6 +50,7 @@ export class HuiDialogEditLovelace extends LitElement {
             .hass=${this.hass}
             .config=${this._config}
             @lovelace-config-changed=${this._ConfigChanged}
+            dialogInitialFocus
           ></hui-lovelace-editor>
         </div>
         <mwc-button @click=${this.closeDialog} slot="secondaryAction">

src/panels/lovelace/editor/select-view/hui-dialog-select-view.ts

@@ -79,6 +79,7 @@ export class HuiDialogSelectView extends LitElement {
               @closed=${stopPropagation}
               fixedMenuPosition
               naturalMenuWidth
+              dialogInitialFocus
             >
               <mwc-list-item
                 value="lovelace"
@@ -104,7 +105,7 @@ export class HuiDialogSelectView extends LitElement {
         ${this._config
           ? this._config.views.length > 1
             ? html`
-                <mwc-list>
+                <mwc-list dialogInitialFocus>
                   ${this._config.views.map(
                     (view, idx) => html`
                       <mwc-radio-list-item
@@ -124,7 +125,11 @@ export class HuiDialogSelectView extends LitElement {
               `
             : ""
           : html`<div>No config found.</div>`}
-        <mwc-button slot="secondaryAction" @click=${this.closeDialog}>
+        <mwc-button
+          slot="secondaryAction"
+          @click=${this.closeDialog}
+          dialogInitialFocus
+        >
           ${this.hass!.localize("ui.common.cancel")}
         </mwc-button>
         <mwc-button slot="primaryAction" @click=${this._selectView}>

src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts

@@ -183,7 +183,7 @@ export class HuiDialogEditView extends LitElement {
             .selected=${this._curTabIndex}
             @selected-item-changed=${this._handleTabSelected}
           >
-            <paper-tab id="tab-settings"
+            <paper-tab id="tab-settings" dialogInitialFocus
               >${this.hass!.localize(
                 "ui.panel.lovelace.editor.edit_view.tab_settings"
               )}</paper-tab