From a47899359928ee104c81a92312984d7d02225541 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Wed, 3 Jul 2024 14:09:09 +0600
Subject: [PATCH] web: improve screen reader usability

- switchers now have audible states
- toggles are now interpreted as toggles
- fixed weird spacing introduced in last commit
---
 web/src/components/buttons/SettingsButton.svelte | 1 +
 web/src/components/buttons/SettingsToggle.svelte | 1 +
 web/src/components/buttons/Switcher.svelte       | 4 ++--
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/web/src/components/buttons/SettingsButton.svelte b/web/src/components/buttons/SettingsButton.svelte
index 2f57b438..ca3be280 100644
--- a/web/src/components/buttons/SettingsButton.svelte
+++ b/web/src/components/buttons/SettingsButton.svelte
@@ -21,6 +21,7 @@
     id="setting-button-{settingContext}-{String(settingId)}-{settingValue}"
     class="button"
     class:active={isActive}
+    aria-pressed={isActive}
     on:click={() =>
         updateSetting({
             [settingContext]: {
diff --git a/web/src/components/buttons/SettingsToggle.svelte b/web/src/components/buttons/SettingsToggle.svelte
index 6ed93ef3..1bbb59fb 100644
--- a/web/src/components/buttons/SettingsToggle.svelte
+++ b/web/src/components/buttons/SettingsToggle.svelte
@@ -23,6 +23,7 @@
 <div id="setting-toggle-{settingContext}-{String(settingId)}" class="toggle-parent">
     <button
         class="toggle-container"
+        aria-pressed={isEnabled}
         on:click={() =>
             updateSetting({
                 [settingContext]: {
diff --git a/web/src/components/buttons/Switcher.svelte b/web/src/components/buttons/Switcher.svelte
index 8deb0587..71a20653 100644
--- a/web/src/components/buttons/Switcher.svelte
+++ b/web/src/components/buttons/Switcher.svelte
@@ -2,7 +2,7 @@
     export let big: boolean = false;
 </script>
 
-<div id="switcher-container" class="switcher" class:big={big}>
+<div id="switcher-container" class="switcher" class:big={big} role="listbox">
     <slot></slot>
 </div>
 
@@ -18,7 +18,7 @@
     }
 
     .switcher :global(.button) {
-        white-space: pre;
+        white-space: nowrap;
     }
 
     .switcher:not(.big) :global(.button:first-child) {