Improve map tools

Author: kyoshino

src/lib/components/contents/details/editor/translate-button.svelte

@@ -39,7 +39,7 @@
 {#if otherLocales.length === 1}
   {@const [otherLocale] = otherLocales}
   {@const label = $_('translate_from_x', { values: { locale: getLocaleLabel(otherLocale) } })}
-  <!-- @todo Replace the native tooltip -->
+  <!-- @todo Replace `title` with a native tooltip -->
   <Button
     variant="ghost"
     {size}

src/lib/components/contents/details/widgets/map/map-editor.svelte

@@ -8,7 +8,7 @@
 <script>
   // cSpell:ignore Nominatim jsonv2
 
-  import { AlertDialog, Button, Listbox, Option, SearchBar } from '@sveltia/ui';
+  import { AlertDialog, Button, Icon, Listbox, Option, SearchBar } from '@sveltia/ui';
   import { isObject } from '@sveltia/utils/object';
   import { onMount, untrack } from 'svelte';
   import { _ } from 'svelte-i18n';
@@ -361,18 +361,24 @@
 
 <!-- @todo Support LineString and Polygon types -->
 {#if geometryType === 'Point'}
-  <!-- @todo Replace this with <Combobox> -->
-  <div class="toolbar">
-    <SearchBar bind:value={searchQuery} {readonly} flex />
+  <div role="none" class="toolbar">
+    <!-- @todo Replace this with `<Combobox>` -->
+    <SearchBar bind:value={searchQuery} {readonly} flex placeholder={$_('find_place')} />
+    <!-- @todo Replace `title` with a native tooltip -->
     <Button
       variant="tertiary"
-      label={$_('use_your_location')}
+      iconic
+      title={$_('use_your_location')}
+      aria-label={$_('use_your_location')}
       disabled={readonly}
       onclick={() => {
         useCurrentLocation();
       }}
-    />
-
+    >
+      {#snippet startIcon()}
+        <Icon name="near_me" />
+      {/snippet}
+    </Button>
     {#if !required}
       <Button
         variant="tertiary"
@@ -386,11 +392,11 @@
   </div>
 
   {#if searching}
-    <div class="search-result searching">{$_('searching')}</div>
+    <div role="alert" class="search-result searching">{$_('searching')}</div>
   {:else if searchQuery}
     {#if searchResults}
       {#if searchResults.length}
-        <Listbox>
+        <Listbox aria-label={$_('search_results')}>
           {#each searchResults as result (result.place_id)}
             <Option
               label={result.display_name}
@@ -401,7 +407,7 @@
           {/each}
         </Listbox>
       {:else}
-        <div class="search-result no-result">{$_('no_results')}</div>
+        <div role="alert" class="search-result no-result">{$_('no_results')}</div>
       {/if}
     {/if}
   {/if}

src/lib/locales/en.js

@@ -564,10 +564,11 @@ export const strings = {
     empty_key: 'Key is required.',
     duplicate_key: 'Key must be unique.',
   },
-  use_your_location: 'Use Current Location',
+  find_place: 'Find a Place',
+  use_your_location: 'Use Your Location',
   geolocation_error_title: 'Geolocation Error',
   geolocation_error_body: 'There was an error while retrieving your location.',
-  geolocation_unsupported: 'Geolocation is not supported by this browser.',
+  geolocation_unsupported: 'Geolocation API is not supported by this browser.',
 
   // Content preview
   boolean: {

src/lib/locales/ja.js

@@ -468,6 +468,7 @@ export const strings = {
       description: 'エントリーを保存中に問題が発生しました。後で再度お試しください。',
     },
   },
+  find_place: '場所を検索',
   use_your_location: '現在地を使用',
   geolocation_error_title: '位置情報エラー',
   geolocation_error_body: 'あなたの現在地を取得できませんでした。',