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

@@ -21,6 +21,7 @@
     id="setting-button-{settingContext}-{String(settingId)}-{settingValue}"
     class="button"
     class:active={isActive}
+    aria-pressed={isActive}
     on:click={() =>
         updateSetting({
             [settingContext]: {

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]: {

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) {