fix Svelte accessibily linter warnings, no more autofocus

diff --git a/src/components/Map.svelte b/src/components/Map.svelte
index dd2a1ae0017e8cb507dea2d7efed2f888146cef3..37166f603ba9bda88ee93d79bfe84220898af293 100644 (file)
--- a/src/components/Map.svelte
+++ b/src/components/Map.svelte
@@ -184,9 +184,9 @@
 
 <MapPosition />
 <div id="map" use:mapAction />
-<div id="show-map-position" class="leaflet-bar btn btn-sm btn-outline-secondary"
+<button id="show-map-position" class="leaflet-bar btn btn-sm btn-outline-secondary"
       on:click|stopPropagation={show_map_position_click}
->show map bounds</div>
+>show map bounds</button>
 
 <style>
   #map {

diff --git a/src/components/ResultsList.svelte b/src/components/ResultsList.svelte
index 3b6c7133945a564e1098608e75325d611ef23976..0e6b144f0427ee3cd7dfc593a1e9131b23b1eb34 100644 (file)
--- a/src/components/ResultsList.svelte
+++ b/src/components/ResultsList.svelte
@@ -59,7 +59,8 @@
       <div class="result"
            class:highlight={iResNum === iHighlightNum}
            data-position="{iResNum}"
-           on:click|stopPropagation={handleClick}>
+           on:click|stopPropagation={handleClick}
+           on:keypress|stopPropagation={handleClick}>
         <div style="float:right">
           <MapIcon aPlace={aResult} />
         </div>

diff --git a/src/components/SearchSection.svelte b/src/components/SearchSection.svelte
index a43ad75866ace053f2b96083f14bc34591a80579..efffc0fda6569f3ead5b0c75e1e7583bef0eb043 100644 (file)
--- a/src/components/SearchSection.svelte
+++ b/src/components/SearchSection.svelte
@@ -99,8 +99,7 @@
                type="text"
                class="form-control form-control-sm"
                placeholder="Search"
-               value="{api_request_params.q || ''}"
-               autofocus />
+               value="{api_request_params.q || ''}" />
       </div>
       <div class="col-auto">
         <button type="submit" class="btn btn-primary btn-sm mx-1">Search</button>

diff --git a/src/components/SearchSectionDetails.svelte b/src/components/SearchSectionDetails.svelte
index 276b56af6acbf18b485bc4390253f809ca0fe087..def887386df64d9dd115cd0953b2574bb0acfb9b 100644 (file)
--- a/src/components/SearchSectionDetails.svelte
+++ b/src/components/SearchSectionDetails.svelte
@@ -30,8 +30,7 @@
       <input type="edit"
              class="form-control form-control-sm me-1"
              pattern="^[NWRnwr]?[0-9]+$|.*openstreetmap.*"
-             value="{api_request_params.osmtype || ''}{api_request_params.osmid || ''}{api_request_params.place_id || ''}"
-             autofocus />
+             value="{api_request_params.osmtype || ''}{api_request_params.osmid || ''}{api_request_params.place_id || ''}" />
       </div>
     <div class="col-auto">
       <button type="submit" class="btn btn-primary btn-sm">Show</button>

diff --git a/src/components/SearchSectionReverse.svelte b/src/components/SearchSectionReverse.svelte
index 2f53f39751f5376af959c550f1e994b5cfb3b05b..46bb2b9d11a850b6f99fa6e01d7723b76d9f3eff 100644 (file)
--- a/src/components/SearchSectionReverse.svelte
+++ b/src/components/SearchSectionReverse.svelte
@@ -49,15 +49,14 @@
            class="form-control form-control-sm d-inline"
            placeholder="latitude"
            pattern="^-?\d+(\.\d+)?$"
-           autofocus
            bind:value={lat}
            on:change={maybeSplitLatitude} />
   </div>
   <div class="col-auto">
-    <a id="switch-coords"
+    <button id="switch-coords"
        on:click|preventDefault|stopPropagation={() => gotoCoordinates(lon, lat)}
        class="btn btn-outline-secondary btn-sm"
-       title="switch lat and lon">&lt;&gt;</a>
+       title="switch lat and lon">&lt;&gt;</button>
   </div>
   <div class="col-auto">
     <label for="reverse-lon">lon</label>