fix(web): shared link expiration date accessibility (#12060)

- use native select - shows focus, automatically has keyboard
  navigation, accessible for screen readers
- remove DropdownButton component
- fix dropdown styling in Safari

web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte

@@ -8,7 +8,6 @@
   import { SharedLinkType, createSharedLink, updateSharedLink, type SharedLinkResponseDto } from '@immich/sdk';
   import { mdiContentCopy, mdiLink } from '@mdi/js';
   import { createEventDispatcher } from 'svelte';
-  import DropdownButton, { type DropDownOption } from '../dropdown-button.svelte';
   import { NotificationType, notificationController } from '../notification/notification';
   import SettingInputField, { SettingInputFieldType } from '../settings/setting-input-field.svelte';
   import SettingSwitch from '../settings/setting-switch.svelte';
@@ -16,6 +15,7 @@
   import { t } from 'svelte-i18n';
   import { locale } from '$lib/stores/preferences.store';
   import { DateTime, Duration } from 'luxon';
+  import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
 
   export let onClose: () => void;
   export let albumId: string | undefined = undefined;
@@ -27,7 +27,7 @@
   let allowDownload = true;
   let allowUpload = false;
   let showMetadata = true;
-  let expirationOption: DropDownOption<number> | undefined;
+  let expirationOption: number = 0;
   let password = '';
   let shouldChangeExpirationTime = false;
   let enablePassword = false;
@@ -48,14 +48,12 @@
   ];
 
   $: relativeTime = new Intl.RelativeTimeFormat($locale);
-  $: expiredDateOption = [
-    { label: $t('never'), value: 0 },
-    ...expirationOptions.map(
-      ([value, unit]): DropDownOption<number> => ({
-        label: relativeTime.format(value, unit),
-        value: Duration.fromObject({ [unit]: value }).toMillis(),
-      }),
-    ),
+  $: expiredDateOptions = [
+    { text: $t('never'), value: 0 },
+    ...expirationOptions.map(([value, unit]) => ({
+      text: relativeTime.format(value, unit),
+      value: Duration.fromObject({ [unit]: value }).toMillis(),
+    })),
   ];
 
   $: shareType = albumId ? SharedLinkType.Album : SharedLinkType.Individual;
@@ -82,8 +80,7 @@
   }
 
   const handleCreateSharedLink = async () => {
-    const expirationDate =
-      expirationOption && expirationOption.value > 0 ? DateTime.now().plus(expirationOption.value).toISO() : undefined;
+    const expirationDate = expirationOption > 0 ? DateTime.now().plus(expirationOption).toISO() : undefined;
 
     try {
       const data = await createSharedLink({
@@ -112,8 +109,7 @@
     }
 
     try {
-      const expirationDate =
-        expirationOption && expirationOption.value > 0 ? DateTime.now().plus(expirationOption.value).toISO() : null;
+      const expirationDate = expirationOption > 0 ? DateTime.now().plus(expirationOption).toISO() : null;
 
       await updateSharedLink({
         id: editingLink.id,
@@ -212,19 +208,18 @@
           <SettingSwitch bind:checked={allowUpload} title={$t('allow_public_user_to_upload')} />
         </div>
 
-        <div class="text-sm">
-          {#if editingLink}
-            <p class="immich-form-label my-2">
-              <SettingSwitch bind:checked={shouldChangeExpirationTime} title={$t('change_expiration_time')} />
-            </p>
-          {:else}
-            <p class="immich-form-label my-2">{$t('expire_after')}</p>
-          {/if}
-
-          <DropdownButton
-            options={expiredDateOption}
-            bind:selected={expirationOption}
+        {#if editingLink}
+          <div class="my-3">
+            <SettingSwitch bind:checked={shouldChangeExpirationTime} title={$t('change_expiration_time')} />
+          </div>
+        {/if}
+        <div class="mt-3">
+          <SettingSelect
+            bind:value={expirationOption}
+            options={expiredDateOptions}
+            label={$t('expire_after')}
             disabled={editingLink && !shouldChangeExpirationTime}
+            number={true}
           />
         </div>
       </div>