Improve keyboard nav (#8794)

src/components/trace/hat-trace-timeline.ts

@@ -541,17 +541,20 @@ export class HaAutomationTracer extends LitElement {
       this.shadowRoot!.querySelectorAll<HaTimeline>(
         "ha-timeline[data-path]"
       ).forEach((el) => {
-        el.style.setProperty(
-          "--timeline-ball-color",
-          this.selectedPath === el.dataset.path ? "var(--primary-color)" : null
-        );
-        if (!this.allowPick || el.dataset.upgraded) {
+        el.toggleAttribute("selected", this.selectedPath === el.dataset.path);
+        if (!this.allowPick || el.tabIndex === 0) {
           return;
         }
-        el.dataset.upgraded = "1";
-        el.addEventListener("click", () => {
+        el.tabIndex = 0;
+        const selectEl = () => {
           this.selectedPath = el.dataset.path;
           fireEvent(this, "value-changed", { value: el.dataset.path });
+        };
+        el.addEventListener("click", selectEl);
+        el.addEventListener("keydown", (ev: KeyboardEvent) => {
+          if (ev.key === "Enter" || ev.key === " ") {
+            selectEl();
+          }
         });
         el.addEventListener("mouseover", () => {
           el.raised = true;
@@ -572,6 +575,13 @@ export class HaAutomationTracer extends LitElement {
         ha-timeline[data-path] {
           cursor: pointer;
         }
+        ha-timeline[selected] {
+          --timeline-ball-color: var(--primary-color);
+        }
+        ha-timeline:focus {
+          outline: none;
+          --timeline-ball-color: var(--accent-color);
+        }
         .error {
           --timeline-ball-color: var(--error-color);
           color: var(--error-color);

src/panels/config/automation/trace/ha-automation-trace-path-details.ts

@@ -57,13 +57,13 @@ export class HaAutomationTracePathDetails extends LitElement {
           ["logbook", "Related logbook entries"],
         ].map(
           ([view, label]) => html`
-            <div
+            <button
               .view=${view}
               class=${classMap({ active: this._view === view })}
               @click=${this._showTab}
             >
               ${label}
-            </div>
+            </button>
           `
         )}
       </div>

src/panels/config/automation/trace/ha-automation-trace.ts

@@ -122,7 +122,7 @@ export class HaAutomationTrace extends LitElement {
                   class="linkButton"
                   href="/config/automation/edit/${this.automationId}"
                 >
-                  <mwc-icon-button label="Edit Automation">
+                  <mwc-icon-button label="Edit Automation" tabindex="-1">
                     <ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
                   </mwc-icon-button>
                 </a>
@@ -190,18 +190,20 @@ export class HaAutomationTrace extends LitElement {
                       ["config", "Automation Config"],
                     ].map(
                       ([view, label]) => html`
-                        <div
+                        <button
+                          tabindex="0"
                           .view=${view}
                           class=${classMap({ active: this._view === view })}
                           @click=${this._showTab}
                         >
                           ${label}
-                        </div>
+                        </button>
                       `
                     )}
                     ${this._trace.blueprint_inputs
                       ? html`
-                          <div
+                          <button
+                            tabindex="0"
                             .view=${"blueprint"}
                             class=${classMap({
                               active: this._view === "blueprint",

src/panels/config/automation/trace/styles.ts

@@ -18,8 +18,10 @@ export const traceTabStyles = css`
     cursor: pointer;
     position: relative;
     bottom: -1px;
+    border: none;
     border-bottom: 2px solid transparent;
     user-select: none;
+    background: none;
   }
 
   .tabs > *.active {