From 3982064636722d2407d7e1090764261ebe1aa893 Mon Sep 17 00:00:00 2001
From: Henry Wilkinson <henry@wilkinson.graphics>
Date: Wed, 7 Feb 2024 18:11:20 -0500
Subject: [PATCH] Fixes workflow selector keyboard navigation (#1514)

Fixes #1387

### Context

While checking some other keyboard navigation issues, I found that I was
unable to create a crawl workflow using only keyboard navigation. This
PR fixes that!

### Changes
- Changes from `<div>`s to `<button>`s so that these can be selected
with tab and enter.
- Adds tabindex for correct selection of items
- Removes the H3 & combines with window title
- Adds width and height to image and width to its container, should make
for a more stable layout while loading (#1387)
---
 .../crawl-workflows/new-workflow-dialog.ts    | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/frontend/src/features/crawl-workflows/new-workflow-dialog.ts b/frontend/src/features/crawl-workflows/new-workflow-dialog.ts
index 09a5eb2c..b68d753f 100644
--- a/frontend/src/features/crawl-workflows/new-workflow-dialog.ts
+++ b/frontend/src/features/crawl-workflows/new-workflow-dialog.ts
@@ -41,9 +41,14 @@ export class NewWorkflowDialog extends LitElement {
     }
 
     .jobTypeButton {
+      padding: 0.25rem;
       display: block;
-      width: min-content;
+      width: 16.5rem;
       cursor: pointer;
+      background: none;
+      text-align: left;
+      border: none;
+      border-radius: 0.75rem;
     }
 
     figure {
@@ -56,6 +61,8 @@ export class NewWorkflowDialog extends LitElement {
     }
 
     .jobTypeImg {
+      width: 100%;
+      max-height: 9rem;
       transition-property: transform;
       transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
       transition-duration: 150ms;
@@ -72,14 +79,13 @@ export class NewWorkflowDialog extends LitElement {
   render() {
     return html`
       <btrix-dialog
-        .label=${msg("Create a New Crawl Workflow")}
+        .label=${msg("Choose New Workflow Type")}
         .open=${this.open}
         style="--width: 46rem"
       >
-        <h3 class="title heading">${msg("Choose Crawl Type")}</h3>
         <div class="container">
-          <div
-            role="button"
+          <button
+            tabindex="2"
             class="jobTypeButton"
             @click=${() => {
               this.dispatchEvent(
@@ -100,9 +106,9 @@ export class NewWorkflowDialog extends LitElement {
                 </p>
               </figcaption>
             </figure>
-          </div>
-          <div
-            role="button"
+          </button>
+          <button
+            tabindex="1"
             class="jobTypeButton"
             @click=${() => {
               this.dispatchEvent(
@@ -124,7 +130,7 @@ export class NewWorkflowDialog extends LitElement {
               </figcaption>
             </figure>
           </div>
-        </div>
+        </button>
       </btrix-dialog>
     `;
   }