From 0b6270e7459c536e17c103585574afe704528cfb Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Sun, 24 Nov 2024 00:12:35 +0600
Subject: [PATCH] web/SettingsInput: better screen reader accessibility

aria-label is now read instead of placeholders, cuz lengthy ones like uuid are a sensory overload and could confuse people. instead, now we make a fake ui placeholder (because there's no other way to have exclusively aria-label while also showing placeholder normally)
---
 web/i18n/en/settings.json                     |  7 +++--
 .../components/settings/SettingsInput.svelte  | 28 ++++++++++++++-----
 .../routes/settings/instances/+page.svelte    |  2 ++
 3 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/web/i18n/en/settings.json b/web/i18n/en/settings.json
index 6e754e97..dc876b8e 100644
--- a/web/i18n/en/settings.json
+++ b/web/i18n/en/settings.json
@@ -115,9 +115,12 @@
 
     "processing.community": "community instances",
     "processing.enable_custom.title": "use a custom processing server",
-    "processing.enable_custom.description": "cobalt will use a custom processing server if you choose to. even though cobalt has some security measures in place, we are not responsible for any damages done via a community instance, as we have no control over them.\n\nplease be mindful of what instances you use and make sure they're hosted by people you trust.",
+    "processing.enable_custom.description": "cobalt will use a custom processing instance if you choose to. even though cobalt has some security measures in place, we are not responsible for any damages done via a community instance, as we have no control over them.\n\nplease be mindful of what instances you use and make sure they're hosted by people you trust.",
 
     "processing.access_key": "instance access key",
     "processing.access_key.title": "use an instance access key",
-    "processing.access_key.description": "cobalt will use this key to make requests to the processing instance instead of other authentication methods. make sure the instance supports api keys!"
+    "processing.access_key.description": "cobalt will use this key to make requests to the processing instance instead of other authentication methods. make sure the instance supports api keys!",
+
+    "processing.custom_instance.input.alt_text": "custom instance domain",
+    "processing.access_key.input.alt_text": "u-u-i-d access key"
 }
diff --git a/web/src/components/settings/SettingsInput.svelte b/web/src/components/settings/SettingsInput.svelte
index 0c96e338..4a3fc373 100644
--- a/web/src/components/settings/SettingsInput.svelte
+++ b/web/src/components/settings/SettingsInput.svelte
@@ -18,6 +18,7 @@
     export let settingId: Id;
     export let settingContext: Context;
     export let placeholder: string;
+    export let altText: string;
     export let type: "url" | "uuid" = "url";
     export let showInstanceWarning = false;
 
@@ -27,11 +28,9 @@
     };
 
     let input: HTMLInputElement;
-
     let inputValue: string = String(get(settings)[settingContext][settingId]);
     let inputFocused = false;
-
-    let validInput: boolean;
+    let validInput = false;
 
     const writeToSettings = (value: string, type: "url" | "uuid" | "text") => {
         updateSetting({
@@ -59,7 +58,7 @@
 </script>
 
 <div id="settings-input-holder">
-    <div id="input-container" class:focused={inputFocused}>
+    <div id="input-container" class:focused={inputFocused} aria-hidden="false">
         <input
             id="input-box"
             bind:this={input}
@@ -73,16 +72,22 @@
             autocapitalize="off"
             maxlength="64"
             pattern={regex[type]}
-            {placeholder}
+            aria-label={altText}
+            aria-hidden="false"
         />
+
+        {#if inputValue.length === 0}
+            <span class="input-placeholder" aria-hidden="true">
+                {placeholder}
+            </span>
+        {/if}
     </div>
 
     <div id="settings-input-buttons">
         <button
             class="settings-input-button"
             aria-label={$t("button.save")}
-            disabled={inputValue == $settings[settingContext][settingId] ||
-                !validInput}
+            disabled={inputValue == $settings[settingContext][settingId] || !validInput}
             on:click={save}
         >
             <IconCheck />
@@ -114,6 +119,8 @@
         display: flex;
         align-items: center;
         width: 100%;
+        position: relative;
+        overflow: hidden;
     }
 
     #input-container,
@@ -139,6 +146,13 @@
         opacity: 1;
     }
 
+    .input-placeholder {
+        position: absolute;
+        color: var(--gray);
+        pointer-events: none;
+        white-space: nowrap;
+    }
+
     #input-box:focus-visible {
         box-shadow: unset !important;
     }
diff --git a/web/src/routes/settings/instances/+page.svelte b/web/src/routes/settings/instances/+page.svelte
index 887440fc..6ae2c3f8 100644
--- a/web/src/routes/settings/instances/+page.svelte
+++ b/web/src/routes/settings/instances/+page.svelte
@@ -24,6 +24,7 @@
                 settingId="customInstanceURL"
                 placeholder="https://instance.url.example/"
                 showInstanceWarning
+                altText={$t("settings.processing.custom_instance.input.alt_text")}
             />
         {/if}
     </div>
@@ -47,6 +48,7 @@
                 settingContext="processing"
                 settingId="customApiKey"
                 placeholder="00000000-0000-0000-0000-000000000000"
+                altText={$t("settings.processing.access_key.input.alt_text")}
                 type="uuid"
             />
         {/if}