Improve accessibility

- Sliders all have step=1 now
- Indicate live regions for the two status text elements

src/lib/layouts/connect/ConnectSection.svelte

@@ -12,7 +12,7 @@
   <div class="grow">
     <h2 class="font-semibold text-xl/8" id="connect-section-label">Connect to a device</h2>
 
-    <div class="row gap-1 text-sm">
+    <div class="row gap-1 text-sm" aria-live="polite">
       {#if deviceCtx.device === null}
         <IconPending aria-hidden /> Not connected to any device yet. Plug in your device, and click on the button to select
         it.

src/lib/layouts/edit/controls/conversion/BiasSlider.svelte

@@ -7,13 +7,13 @@
 
   const config = getConversionConfig()
 
-  let value = $derived(config.bias)
+  let value = $derived(Math.round(config.bias * 100))
 </script>
 
 <div class="stack gap-4" role="group" aria-label="Bias">
   <div class="row gap-1 text-sm">
     <Label id="bias-input-label">Bias</Label>
-    <span class="font-normal text-muted-foreground"> = {Math.floor(value * 100)}% </span>
+    <span class="font-normal text-muted-foreground"> = {value}% </span>
     <MoreInfo>
       Whether the conversion algorithm should bias the entire image towards white (negative) or black (positive).
     </MoreInfo>
@@ -22,10 +22,10 @@
   <Slider
     type="single"
     bind:value
-    onValueCommit={() => (config.bias = value)}
-    min={-1}
-    max={1}
-    step={0.01}
+    onValueCommit={() => (config.bias = value / 100)}
+    min={-100}
+    max={100}
+    step={1}
     aria-labelledby="bias-input-label"
   />
 </div>

src/lib/layouts/edit/controls/conversion/ContrastSlider.svelte

@@ -7,13 +7,13 @@
 
   const config = getConversionConfig()
 
-  let value = $derived(config.contrast)
+  let value = $derived(Math.round(config.contrast * 100))
 </script>
 
 <div class="stack gap-4" role="group" aria-label="Contrast">
   <div class="row gap-1 text-sm">
     <Label id="contrast-input-label">Contrast</Label>
-    <span class="font-normal text-muted-foreground"> = {Math.floor(value * 100)}% </span>
+    <span class="font-normal text-muted-foreground"> = {value}% </span>
     <MoreInfo>
       How eager the conversion algorithm should push colors towards the two ends (black and white) of the grayscale.
     </MoreInfo>
@@ -22,10 +22,10 @@
   <Slider
     type="single"
     bind:value
-    onValueCommit={() => (config.contrast = value)}
+    onValueCommit={() => (config.contrast = value / 100)}
     min={0}
-    max={1}
-    step={0.01}
+    max={100}
+    step={1}
     aria-labelledby="contrast-input-label"
   />
 </div>

src/lib/layouts/write/WriteSection.svelte

@@ -1,14 +1,11 @@
 <script lang="ts">
-  import IconHelp from '~icons/material-symbols/help'
   import IconPending from '~icons/material-symbols/pending'
   import IconArrowUploadProgress from '~icons/material-symbols/arrow-upload-progress'
   import IconWarning from '~icons/material-symbols/warning'
   import WriteButton from './WriteButton.svelte'
 
-  import { getDeviceContext } from '$lib/contexts/device.svelte'
   import { getImageContext } from '$lib/contexts/image.svelte'
 
-  const deviceCtx = getDeviceContext()
   const imageCtx = getImageContext()
 
   let inProgress = $state(false)
@@ -18,10 +15,8 @@
   <div class="grow">
     <h2 class="font-semibold text-xl/8" id="write-section-label">Write pattern to device</h2>
 
-    <div class="row gap-1 text-sm">
-      {#if deviceCtx.device === null}
-        <IconHelp aria-hidden /> To start writing patterns to your device, connect it first.
-      {:else if imageCtx.image === null}
+    <div class="row gap-1 text-sm" aria-live="polite">
+      {#if imageCtx.image === null}
         <IconPending aria-hidden /> Select an image file in order to write it onto your device.
       {:else if !inProgress}
         <IconArrowUploadProgress aria-hidden /> Write the pattern onto your device if you have finished editing the image.