Consistently use links for nav and buttons for actions. #15

a-b-street · Feb 9, 2024 · 663fdcc · 663fdcc
1 parent ad44ece
commit 663fdcc
Show file tree

Hide file tree

Showing 10 changed files with 80 additions and 71 deletions.
diff --git a/web/src/BackButton.svelte b/web/src/BackButton.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { Link } from "./common";
   import { createEventDispatcher } from "svelte";
 
   let dispatch = createEventDispatcher<{
@@ -15,4 +16,4 @@
 
 <svelte:window on:keydown={onKeyDown} />
 
-<button on:click={() => dispatch("click")}>Back</button>
+<Link on:click={() => dispatch("click")}>Back</Link>
diff --git a/web/src/DebugMode.svelte b/web/src/DebugMode.svelte
@@ -10,7 +10,6 @@
 <SplitComponent>
   <div slot="top">
     <nav aria-label="breadcrumb">
-      <!-- svelte-ignore a11y-invalid-attribute -->
       <ul>
         <li>
           <a href="#" on:click={() => ($mode = { mode: "title" })}>

diff --git a/web/src/NetworkMode.svelte b/web/src/NetworkMode.svelte
@@ -37,7 +37,6 @@
 <SplitComponent>
   <div slot="top" style="display: flex; justify-content: space-between;">
     <nav aria-label="breadcrumb">
-      <!-- svelte-ignore a11y-invalid-attribute -->
       <ul>
         <li>
           <a href="#" on:click={() => ($mode = { mode: "title" })}>
@@ -47,18 +46,23 @@
         <li>Pick neighbourhood</li>
       </ul>
     </nav>
-    <span style="display: flex">
-      <button
-        class="outline"
-        style="margin-right: 8px"
-        on:click={() => ($mode = { mode: "route", prevMode: "network" })}
-      >
-        Route
-      </button>
-      <button class="outline" on:click={() => ($mode = { mode: "debug-gj" })}>
-        Debug route snapper
-      </button>
-    </span>
+    <nav>
+      <ul>
+        <li>
+          <a
+            href="#"
+            on:click={() => ($mode = { mode: "route", prevMode: "network" })}
+          >
+            Route
+          </a>
+        </li>
+        <li>
+          <a href="#" on:click={() => ($mode = { mode: "debug-gj" })}>
+            Debug route snapper
+          </a>
+        </li>
+      </ul>
+    </nav>
   </div>
   <div slot="sidebar">
     <p>
@@ -72,20 +76,24 @@
       boundary may not match the conventional definition of "neighbourhood."
     </p>
 
-    <button on:click={newBoundary}>Draw a new boundary</button>
-    {#each boundaryNames as name}
-      <div style="display: flex; justify-content: space-between;">
-        <button class="outline" on:click={() => pickNeighbourhood(name)}>
-          {name}
-        </button>
-        <button
-          class="secondary outline"
-          on:click={() => deleteNeighbourhood(name)}
-        >
-          X
-        </button>
-      </div>
-    {/each}
+    <a href="#" on:click={newBoundary}>Draw a new boundary</a>
+    <ul>
+      {#each boundaryNames as name}
+        <li>
+          <span style="display: flex; justify-content: space-between;">
+            <a href="#" on:click={() => pickNeighbourhood(name)}>
+              {name}
+            </a>
+            <button
+              class="secondary outline"
+              on:click={() => deleteNeighbourhood(name)}
+            >
+              X
+            </button>
+          </span>
+        </li>
+      {/each}
+    </ul>
 
     <hr />
     <ManageSavefiles />

diff --git a/web/src/RouteMode.svelte b/web/src/RouteMode.svelte
@@ -26,7 +26,6 @@
 <SplitComponent>
   <div slot="top">
     <nav aria-label="breadcrumb">
-      <!-- svelte-ignore a11y-invalid-attribute -->
       <ul>
         <li>
           <a href="#" on:click={() => ($mode = { mode: "title" })}>

diff --git a/web/src/SetBoundaryMode.svelte b/web/src/SetBoundaryMode.svelte
@@ -51,7 +51,6 @@
 <SplitComponent>
   <div slot="top">
     <nav aria-label="breadcrumb">
-      <!-- svelte-ignore a11y-invalid-attribute -->
       <ul>
         <li>
           <a href="#" on:click={() => ($mode = { mode: "title" })}>
@@ -81,8 +80,8 @@
     <h1>Draw your neighbourhood boundary for {name}</h1>
 
     <div style="display: flex; justify-content: space-between;">
-      <button on:click={() => notNull($route_tool).finish()}>Finish</button>
-      <button class="secondary" on:click={onFailure}>Cancel</button>
+      <a href="#" on:click={() => notNull($route_tool).finish()}>Finish</a>
+      <a href="#" on:click={onFailure}>Cancel</a>
     </div>
 
     <p>TODO: maybe move the instructions from the previous screen to here...</p>

diff --git a/web/src/ViewShortcutsMode.svelte b/web/src/ViewShortcutsMode.svelte
@@ -81,7 +81,6 @@
 <SplitComponent>
   <div slot="top">
     <nav aria-label="breadcrumb">
-      <!-- svelte-ignore a11y-invalid-attribute -->
       <ul>
         <li>
           <a href="#" on:click={() => ($mode = { mode: "title" })}>

diff --git a/web/src/common/Link.svelte b/web/src/common/Link.svelte
@@ -0,0 +1 @@
+<a href="#" on:click><slot /></a>
diff --git a/web/src/common/index.ts b/web/src/common/index.ts
@@ -8,6 +8,7 @@ export { default as BasemapPicker } from "./BasemapPicker.svelte";
 export { default as Geocoder } from "./Geocoder.svelte";
 export { default as Layout } from "./Layout.svelte";
 export { default as Legend } from "./Legend.svelte";
+export { default as Link } from "./Link.svelte";
 export { default as Loading } from "./Loading.svelte";
 export { default as Modal } from "./Modal.svelte";
 export { default as OverpassSelector } from "./OverpassSelector.svelte";

diff --git a/web/src/edit/NeighbourhoodMode.svelte b/web/src/edit/NeighbourhoodMode.svelte
@@ -102,7 +102,6 @@
 <SplitComponent>
   <div slot="top" style="display: flex; justify-content: space-between;">
     <nav aria-label="breadcrumb">
-      <!-- svelte-ignore a11y-invalid-attribute -->
       <ul>
         <li>
           <a href="#" on:click={() => ($mode = { mode: "title" })}>
@@ -114,45 +113,48 @@
             Pick neighbourhood
           </a>
         </li>
+        <li>Editing modal filters</li>
+      </ul>
+    </nav>
+    <nav>
+      <ul>
+        <li>
+          <a href="#" on:click={() => ($mode = { mode: "view-shortcuts" })}>
+            View shortcuts
+          </a>
+        </li>
+        <li>
+          <a
+            href="#"
+            on:click={() =>
+              ($mode = { mode: "route", prevMode: "neighbourhood" })}
+          >
+            Route
+          </a>
+        </li>
+        <li>
+          <a
+            href="#"
+            on:click={() =>
+              ($mode = {
+                mode: "set-boundary",
+                name: notNull(notNull(boundary).properties).name,
+                existing: boundary,
+              })}
+          >
+            Change this boundary
+          </a>
+        </li>
         <li>
-          Editing modal filters in <u>
-            {notNull(notNull(boundary).properties).name}
-          </u>
+          <a href="#" on:click={() => ($mode = { mode: "debug" })}>Debug</a>
         </li>
       </ul>
     </nav>
-    <span style="display: flex">
-      <button
-        class="outline"
-        style="margin-right: 8px"
-        on:click={() => ($mode = { mode: "view-shortcuts" })}
-      >
-        View shortcuts
-      </button>
-      <button
-        class="outline"
-        style="margin-right: 8px"
-        on:click={() => ($mode = { mode: "route", prevMode: "neighbourhood" })}
-      >
-        Route
-      </button>
-      <button class="outline" on:click={() => ($mode = { mode: "debug" })}>
-        Debug
-      </button>
-    </span>
   </div>
   <div slot="sidebar">
-    <button
-      class="outline"
-      on:click={() =>
-        ($mode = {
-          mode: "set-boundary",
-          name: notNull(notNull(boundary).properties).name,
-          existing: boundary,
-        })}
-    >
-      Change this neighbourhood boundary
-    </button>
+    <p>
+      Editing neighbourhood <u>{notNull(notNull(boundary).properties).name}</u>
+    </p>
 
     <p>
       Now that you've defined a neighbourhood boundary, you can see the possible

diff --git a/web/src/title/About.svelte b/web/src/title/About.svelte
@@ -15,8 +15,8 @@
       >
         A/B Street LTN tool
       </a>
-      . Most parts of it do not work yet, and you should probably use the other
-      version of the tool instead.
+      . Most parts of it do not work yet, and you should probably use the other version
+      of the tool instead.
     </p>
     <p>To use this tool, you need to:</p>
     <ol>
@@ -42,7 +42,7 @@
       <a href="https://www.openstreetmap.org/about" target="_blank">
         OpenStreetMap
       </a>
-       data.
+      data.
     </p>
     <center>
       <button on:click={() => notNull(dialog).close()}>Start!</button>