Skip to content

🎨 Palette: Improve accessibility of wind speed unit toggle #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Jandave0 wants to merge 1 commit into
base: P2/3--Refactor-&-Reliability
Choose a base branch
from
Open

🎨 Palette: Improve accessibility of wind speed unit toggle #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .Jules/palette.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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`).
12 changes: 9 additions & 3 deletions components/settings/hardware-config-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down