fix(input): fix accessibility issues

demo/components/DemoButtonGroups.svelte

@@ -13,6 +13,7 @@
   import NeoButtonGroup from '~/buttons/NeoButtonGroup.svelte';
   import IconAccount from '~/icons/IconAccount.svelte';
   import NeoSelect from '~/inputs/NeoSelect.svelte';
+  import { displayValue } from '~/inputs/neo-select.model';
   import { DefaultShadowElevation } from '~/utils/shadow.utils';
 
   const { onClick, loading: loading$, onLoading } = useButtonState('DemoGroupClicked');
@@ -74,6 +75,8 @@
     placeholder="Select color"
     position="left"
     floating={false}
+    color={options.color}
+    display={displayValue}
     size="10"
     bind:value={options.color}
     containerProps={{ style: 'margin-left: 6rem' }}

demo/components/DemoButtons.svelte

@@ -16,6 +16,7 @@
   import NeoSwitchButton from '~/buttons/NeoSwitchButton.svelte';
   import IconAccount from '~/icons/IconAccount.svelte';
   import NeoSelect from '~/inputs/NeoSelect.svelte';
+  import { displayValue } from '~/inputs/neo-select.model';
 
   const { onClick, loading: isLoading, onLoading } = useButtonState('DemoButtonClick');
 
@@ -94,6 +95,8 @@
       placeholder="Select color"
       position="left"
       floating={false}
+      color={options.color}
+      display={displayValue}
       size="10"
       bind:value={options.color}
       containerProps={{ style: 'margin-left: 6rem' }}

demo/components/DemoCards.svelte

@@ -12,6 +12,7 @@
   import NeoCard from '~/cards/NeoCard.svelte';
   import NeoNumberStep from '~/inputs/NeoNumberStep.svelte';
   import NeoSelect from '~/inputs/NeoSelect.svelte';
+  import { displayValue } from '~/inputs/neo-select.model';
   import NeoSkeletonMedia from '~/skeletons/NeoSkeletonMedia.svelte';
   import NeoSkeletonText from '~/skeletons/NeoSkeletonText.svelte';
   import { DefaultShadowElevation, getDefaultElevation, MaxShadowElevation, MinShadowElevation } from '~/utils/shadow.utils';
@@ -115,6 +116,8 @@
     placeholder="Select color"
     position="left"
     floating={false}
+    color={options.color}
+    display={displayValue}
     size="10"
     bind:value={options.color}
     containerProps={{ style: 'margin-left: 6rem' }}

demo/components/DemoInputs.svelte

@@ -557,6 +557,8 @@
     placeholder="Select color"
     position="left"
     floating={false}
+    color={options.color}
+    display={displayValue}
     size="10"
     bind:value={options.color}
     containerProps={{ style: 'margin-left: 6rem' }}
@@ -577,7 +579,7 @@
 {/snippet}
 
 {#snippet after()}
-  <NeoButton text rounded={options.rounded} disabled={options.disabled} readonly={options.readonly}>
+  <NeoButton text aria-label="After button snippet" rounded={options.rounded} disabled={options.disabled} readonly={options.readonly}>
     {#snippet icon()}
       <IconFileUpload style="min-width: 1.25rem; min-height:1.25rem" />
     {/snippet}
@@ -771,7 +773,6 @@
         required
         label="Custom Select"
         placeholder="Select multiple"
-        display={displayValue}
         options={items}
         multiple
         bind:ref={selectCustomMultipleState.ref}
@@ -1145,6 +1146,7 @@
 {#snippet beforeRange()}
   <NeoButton
     rounded
+    aria-label="Increment range"
     glass={options.glass}
     disabled={options.disabled}
     readonly={options.readonly}
@@ -1160,6 +1162,7 @@
 {#snippet afterRange()}
   <NeoButton
     rounded
+    aria-label="Decrement range"
     glass={options.glass}
     disabled={options.disabled}
     readonly={options.readonly}

demo/components/DemoPill.svelte

@@ -10,6 +10,7 @@
   import IconMail from '~/icons/IconMail.svelte';
   import NeoNumberStep from '~/inputs/NeoNumberStep.svelte';
   import NeoSelect from '~/inputs/NeoSelect.svelte';
+  import { displayValue } from '~/inputs/neo-select.model';
   import NeoPill from '~/pill/NeoPill.svelte';
 
   const options = $state({
@@ -97,6 +98,8 @@
     placeholder="Select color"
     position="left"
     floating={false}
+    color={options.color}
+    display={displayValue}
     size="10"
     bind:value={options.color}
     rounded={options.rounded}

demo/components/DemoTabs.svelte

@@ -14,6 +14,7 @@
   import NeoButtonGroup from '~/buttons/NeoButtonGroup.svelte';
   import IconAccount from '~/icons/IconAccount.svelte';
   import NeoSelect from '~/inputs/NeoSelect.svelte';
+  import { displayValue } from '~/inputs/neo-select.model';
   import NeoTab from '~/nav/NeoTab.svelte';
   import NeoTabDivider from '~/nav/NeoTabDivider.svelte';
   import NeoTabs from '~/nav/NeoTabs.svelte';
@@ -119,6 +120,8 @@
     placeholder="Select color"
     position="left"
     floating={false}
+    color={options.color}
+    display={displayValue}
     size="10"
     bind:value={options.color}
     containerProps={{ style: 'margin-left: 6rem' }}

demo/components/DemoTooltips.svelte

@@ -18,6 +18,7 @@
   import NeoNumberStep from '~/inputs/NeoNumberStep.svelte';
   import NeoSelect from '~/inputs/NeoSelect.svelte';
   import NeoInput from '~/inputs/common/NeoInput.svelte';
+  import { displayValue } from '~/inputs/neo-select.model';
   import NeoListBaseItem from '~/list/NeoListBaseItem.svelte';
   import NeoPopSelect from '~/tooltips/NeoPopSelect.svelte';
   import NeoTooltip from '~/tooltips/NeoTooltip.svelte';
@@ -155,6 +156,8 @@
     placeholder="Select color"
     position="left"
     floating={false}
+    color={options.color}
+    display={displayValue}
     size="10"
     bind:value={options.color}
     containerProps={{ style: 'margin-left: 6rem' }}

src/lib/inputs/NeoCheckbox.svelte

@@ -67,6 +67,7 @@
   }: NeoCheckboxProps = $props();
   /* eslint-enable prefer-const */
 
+  const labelId = $derived(label ? `neo-checkbox-label-${getUUID()}` : undefined);
   const elevation = $derived(coerce(rest?.elevation ?? DefaultShadowShallowElevation));
 
   let initial = $state(checked);
@@ -172,6 +173,7 @@
       class={['neo-checkbox-input', rest.class]}
     />
     <NeoCheckboxButton
+      aria-labelledby={labelId}
       {indeterminate}
       {checked}
       {touched}
@@ -186,7 +188,7 @@
       onclick={() => ref?.click()}
       {...buttonProps}
     />
-    <NeoLabel bind:ref={labelRef} for={id} {label} {disabled} {required} {...labelProps} />
+    <NeoLabel bind:ref={labelRef} id={labelId} for={id} {label} {disabled} {required} {...labelProps} />
     {#if loading !== undefined}
       <span class="neo-checkbox-suffix">
         {#if loading}

src/lib/inputs/NeoColorPicker.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { getUUID } from '@dvcol/common-utils/common/string';
+
   import type { FormEventHandler } from 'svelte/elements';
   import type { NeoButtonProps } from '~/buttons/neo-button.model.js';
 
@@ -74,12 +76,15 @@
     ref?.dispatchEvent(new InputEvent(e.type, e));
     pickerProps?.onchange?.(e);
   };
+
+  const labelId = $derived(rest?.label ? `neo-color-picker-label-${getUUID()}` : undefined);
 </script>
 
 {#snippet before()}
   <NeoColorPickerSelector
     bind:ref={pickerRef}
     bind:value
+    aria-labelledby={labelId}
     height="100%"
     rounded={rest.rounded}
     disabled={rest.disabled}
@@ -122,4 +127,5 @@
   {minlength}
   {maxlength}
   {...rest}
+  labelProps={{ id: labelId, ...rest.labelProps }}
 />

src/lib/inputs/NeoPin.svelte

@@ -89,6 +89,8 @@
   }: NeoPinProps = $props();
   /* eslint-enable prefer-const */
 
+  const labelId = $derived(label ? `neo-pin-label-${getUUID()}` : undefined);
+
   const refs = $state<NeoInputHTMLElement[][]>(Array(Number(groups)).fill([]));
   const values = $state<string[][]>(Array(Number(groups)).fill(Array(Number(count)).fill('')));
   const touches = $state<boolean[][]>(Array(Number(groups)).fill(Array(Number(count)).fill(false)));
@@ -393,14 +395,17 @@
         bind:value
         oninvalid={onInvalid}
       />
-      {#each Array(Number(groups)) as _, i}
+      {#each { length: Number(groups) } as _, i}
         <div class="neo-pin-group">
-          {#each Array(Number(count)) as __, j}
+          {#each { length: Number(count) } as __, j}
             <NeoInput
               bind:ref={refs[i][j]}
               bind:value={values[i][j]}
               bind:dirty={dirtiness[i][j]}
               bind:touched={touches[i][j]}
+              data-group={i + 1}
+              data-count={j + 1}
+              aria-labelledby={labelId}
               size={1}
               maxlength={1}
               minlength={1}
@@ -485,6 +490,7 @@
 {#if label}
   <NeoLabel
     for={id}
+    id={labelId}
     bind:ref={labelRef}
     {required}
     label={labelGroup}

src/lib/inputs/NeoRadio.svelte

@@ -56,6 +56,7 @@
   }: NeoRadioProps = $props();
   /* eslint-enable prefer-const */
 
+  const labelId = $derived(label ? `neo-radio-label-${getUUID()}` : undefined);
   const elevation = $derived(coerce(rest?.elevation ?? DefaultShadowShallowElevation));
 
   let initial = $state(checked);
@@ -108,6 +109,7 @@
     class={['neo-radio-input', rest.class]}
   />
   <NeoRadioButton
+    aria-labelledby={labelId}
     {checked}
     {touched}
     {rounded}
@@ -121,7 +123,7 @@
     onclick={() => ref?.click()}
     {...buttonProps}
   />
-  <NeoLabel bind:ref={labelRef} for={id} {label} {disabled} {required} {...labelProps} />
+  <NeoLabel bind:ref={labelRef} id={labelId} for={id} {label} {disabled} {required} {...labelProps} />
   {#if loading !== undefined}
     <span class="neo-radio-suffix">
       {#if loading}

src/lib/inputs/NeoRange.svelte

@@ -441,6 +441,7 @@
               bind:this={lowerTooltip.elements.reference}
               class="neo-range-handle"
               style:--neo-range-handler-z-index={lastIndex ? 0 : 1}
+              aria-label="Drag to set {isArray ? 'lower ' : ''}value"
               {...handler}
             >
               <!--   handle handle   -->
@@ -449,7 +450,7 @@
               <span class="neo-range-handle-before neo-range">
                 <!--   handle before   -->
               </span>
-              <button bind:this={upperTooltip.elements.reference} class="neo-range-handle" {...progressHandler}>
+              <button bind:this={upperTooltip.elements.reference} class="neo-range-handle" aria-label="Drag to set upper value" {...progressHandler}>
                 <!--   handle handle   -->
               </button>
             {/if}

src/lib/inputs/NeoSelect.svelte

@@ -138,6 +138,7 @@
     }
   };
 
+  // TODO - rework container/wrapper tags
   // TODO - rework focus highlights
   // TODO - button rework css top match elevation / pressed (in place of hover)
 </script>
@@ -171,7 +172,7 @@
   bind:focused
   bind:focusin
   bind:value
-  display={(display ?? customDisplay) ? (customDisplay ?? display?.(value)) : undefined}
+  display={(display ?? customDisplay) ? (customDisplay ?? display?.(selected)) : undefined}
   {rounded}
   {floating}
   {clearable}
@@ -193,9 +194,9 @@
     ...affixProps,
     closeProps: { onclick: onClear, ...affixProps?.closeProps },
   }}
+  containerTag="button"
   containerProps={{
-    role: 'select',
-    tabindex: 0,
+    role: null,
     onclick: toggle,
     onkeydown,
     ...rest.containerProps,

src/lib/inputs/NeoSwitch.svelte

@@ -72,6 +72,7 @@
   }: NeoSwitchProps = $props();
   /* eslint-enable prefer-const */
 
+  const labelId = $derived(label ? `neo-switch-label-${getUUID()}` : undefined);
   const elevation = $derived(coerce(rest?.elevation ?? DefaultShadowShallowElevation));
 
   let initial = $state(checked);
@@ -172,6 +173,7 @@
       class={['neo-switch-input', rest.class]}
     />
     <NeoSwitchButton
+      aria-labelledby={labelId}
       {handle}
       {off}
       {on}
@@ -189,7 +191,7 @@
       onclick={() => ref?.click()}
       {...buttonProps}
     />
-    <NeoLabel bind:ref={labelRef} for={id} {label} {disabled} {required} {...labelProps} />
+    <NeoLabel bind:ref={labelRef} id={labelId} for={id} {label} {disabled} {required} {...labelProps} />
     {#if loading !== undefined}
       <span class="neo-switch-suffix">
         {#if loading}

src/lib/inputs/NeoTextarea.svelte

@@ -253,10 +253,11 @@
   /**
    * Change the value of the input
    */
-  export const change: NeoInputMethods<HTMLTextAreaElement>['change'] = (_value: NeoInputValue<HTMLTextAreaElement>, event?: InputEvent) => {
-    if (event) ref?.dispatchEvent(event);
+  export const change: NeoInputMethods<HTMLTextAreaElement>['change'] = async (_value: NeoInputValue<HTMLTextAreaElement>, event?: InputEvent) => {
     value = _value;
     focus();
+    await tick();
+    if (event) ref?.dispatchEvent(event);
     return validate();
   };
 

src/lib/inputs/common/NeoBaseInput.svelte

@@ -154,13 +154,14 @@
   /**
    * Change the state of the input
    */
-  export const change: NeoInputMethods<HTMLInputElement>['change'] = (_value: NeoInputValue<HTMLInputElement>, event?: InputEvent) => {
+  export const change: NeoInputMethods<HTMLInputElement>['change'] = async (_value: NeoInputValue<HTMLInputElement>, event?: InputEvent) => {
     if (rest.type === 'checkbox' || rest.type === 'radio') {
       checked = !!_value;
     } else {
       value = _value?.toString();
     }
     focus();
+    await tick();
     if (event) ref?.dispatchEvent(event);
     return validate();
   };
@@ -253,7 +254,6 @@
   />
   <svelte:element
     this={displayTag}
-    {id}
     class:neo-input={true}
     class:neo-after={after}
     class:neo-before={before}

src/lib/inputs/common/NeoInput.svelte

@@ -453,9 +453,11 @@
   .neo-input-before,
   .neo-input-after {
     display: inline-flex;
+    align-items: center;
     box-sizing: border-box;
     min-width: min-content;
     font: inherit;
+    text-align: start;
     text-decoration: none;
     outline: none;
     transition:
@@ -468,6 +470,7 @@
       border-color 0.3s ease,
       border-radius 0.3s ease,
       box-shadow 0.3s ease-out;
+    appearance: none;
   }
 
   .neo-input {