♿️ Improve overall a11

Author: johannchopin

src/components/CopySaveActions.svelte

@@ -8,6 +8,9 @@
   export let onSave
 
   const VALIDATION_ANIMATION_DURATION = 700
+  const DOWNLOAD_MINIFIED_CSS = "Download minified css"
+  const COPY_MINIFIED_CSS = "Copy minified css to clipboard"
+
   let isSavedToClipboard = false
   let isSaved = false
 
@@ -31,10 +34,20 @@
 </script>
 
 <div class={`d-flex ${className} copy-save-actions`}>
-  <button class="btn btn-link p-1" on:click={saveToClipboard}>
+  <button
+    class="btn btn-link p-1"
+    title={COPY_MINIFIED_CSS}
+    aria-label={COPY_MINIFIED_CSS}
+    on:click={saveToClipboard}
+  >
     <Icon name={isSavedToClipboard ? 'check' : 'clipboard'}/>
   </button>
-  <button class="btn btn-link p-1 ms-1" on:click={save}>
+  <button
+    class="btn btn-link p-1 ms-1"
+    title={DOWNLOAD_MINIFIED_CSS}
+    aria-label={DOWNLOAD_MINIFIED_CSS}
+    on:click={save}
+  >
     <Icon name={isSaved ? 'check' : 'download'}/>
   </button>
 </div>

src/components/SavedSizeBadge.svelte

@@ -4,4 +4,9 @@
   export { className as class }
 </script>
 
-<span class={`fw-lighter fst-italic ${className}`}> - saved {size / 1000} kB</span>
+<span 
+  class={`fw-lighter fst-italic ${className}`}
+  aria-live="polite"
+> 
+  - saved {size / 1000} kB
+</span>

src/components/Textarea.svelte

@@ -46,7 +46,13 @@
   </button>
 
   <div id="result" class="position-relative ms-2 flex-grow-1 d-flex p-0 align-items-center" style="width: 0;">
-    <input class="form-control" type="text" disabled={optimizedInput === undefined} bind:value={optimizedInput}>
+    <input
+      type="text"
+      class="form-control"
+      aria-hidden={true}
+      disabled={optimizedInput === undefined}
+      bind:value={optimizedInput}
+    >
     {#if optimizedInput !== undefined}
       <SavedSizeBadge size={savedSize} class="text-nowrap ms-2" />
       <CopySaveActions