From 81b730274af0823f487b66806f3537c7d85692db Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 26 May 2026 13:02:41 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Improve=20accessibili?=
 =?UTF-8?q?ty=20of=20wind=20speed=20unit=20toggle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Jandave0 <185737041+Jandave0@users.noreply.github.com>
---
 .Jules/palette.md                            |  3 +++
 components/settings/hardware-config-form.tsx | 12 +++++++++---
 2 files changed, 12 insertions(+), 3 deletions(-)
 create mode 100644 .Jules/palette.md

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 0000000..98a7620
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-05-26 - Custom Segmented Control Accessibility
+**Learning:** Custom UI elements that function as segmented controls or toggles often lack crucial accessibility attributes (like `role="group"`, `role="switch"`, `aria-checked`) and essential keyboard focus states, making them difficult or impossible for screen reader and keyboard users to use properly.
+**Action:** Always check custom toggles/segmented controls for appropriate ARIA roles (`group`, `switch`, or `radio`), state attributes (`aria-checked`), descriptive labels (`aria-label`), and robust keyboard focus visible styles (`focus-visible:ring`).
diff --git a/components/settings/hardware-config-form.tsx b/components/settings/hardware-config-form.tsx
index 90cfc25..e2cceee 100644
--- a/components/settings/hardware-config-form.tsx
+++ b/components/settings/hardware-config-form.tsx
@@ -166,26 +166,32 @@ export function HardwareConfigForm({ initialData }: HardwareConfigFormProps) {
                   <FormItem>
                     <div className="flex items-center justify-between">
                       <FormLabel className="text-text-primary">Stow Wind Speed</FormLabel>
-                      <div className="flex bg-bg-base rounded-md border border-border-default p-0.5">
+                      <div className="flex bg-bg-base rounded-md border border-border-default p-0.5" role="group" aria-label="Wind speed unit">
                         <button
                           type="button"
+                          role="switch"
+                          aria-checked={windUnit === "ms"}
+                          aria-label="Use meters per second"
                           onClick={() => {
                             if (windUnit === "kmh") {
                               setWindUnit("ms");
                             }
                           }}
-                          className={`px-2 py-0.5 text-[10px] rounded ${windUnit === "ms" ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-muted"}`}
+                          className={`px-2 py-0.5 text-[10px] rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-accent-primary hover:text-text-primary transition-colors ${windUnit === "ms" ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-muted"}`}
                         >
                           m/s
                         </button>
                         <button
                           type="button"
+                          role="switch"
+                          aria-checked={windUnit === "kmh"}
+                          aria-label="Use kilometers per hour"
                           onClick={() => {
                             if (windUnit === "ms") {
                               setWindUnit("kmh");
                             }
                           }}
-                          className={`px-2 py-0.5 text-[10px] rounded ${windUnit === "kmh" ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-muted"}`}
+                          className={`px-2 py-0.5 text-[10px] rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-accent-primary hover:text-text-primary transition-colors ${windUnit === "kmh" ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-muted"}`}
                         >
                           km/h
                         </button>