lashman/openpylon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

add ARIA tab roles, pressed states, and labels to settings dialog

Browse Source
This commit is contained in:
Your Name
2026-02-19 19:50:54 +02:00
parent 3918a66ff6
commit fe5baec172
1 changed files with 11 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/settings/SettingsDialog.tsx
View File

@@ -132,10 +132,12 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
</DialogHeader>
{/* Tab bar */}
<div className="flex gap-1 border-b border-border pb-2">
<div className="flex gap-1 border-b border-border pb-2" role="tablist" aria-label="Settings sections">
{TABS.map((t) => (
<Button
key={t.value}
role="tab"
aria-selected={tab === t.value}
variant={tab === t.value ? "secondary" : "ghost"}
size="sm"
onClick={() => setTab(t.value)}
@@ -150,6 +152,8 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
<AnimatePresence mode="popLayout" initial={false}>
<motion.div
key={tab}
role="tabpanel"
aria-label={`${tab} settings`}
className="flex flex-col gap-5"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
@@ -166,6 +170,7 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
<Button
key={value}
type="button"
aria-pressed={settings.theme === value}
variant={settings.theme === value ? "default" : "outline"}
size="sm"
onClick={() => setTheme(value)}
@@ -193,6 +198,7 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
variant="ghost"
size="icon-xs"
onClick={() => setUiZoom(1)}
aria-label="Reset zoom"
className="text-pylon-text-secondary hover:text-pylon-text"
>
<RotateCcw className="size-3" />
@@ -207,6 +213,7 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
step="0.05"
value={settings.uiZoom}
onChange={(e) => setUiZoom(parseFloat(e.target.value))}
aria-label="UI Zoom level"
className="w-full accent-pylon-accent"
/>
<div className="mt-1 flex justify-between font-mono text-[10px] text-pylon-text-secondary">
@@ -259,6 +266,7 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
<Button
key={value}
type="button"
aria-pressed={settings.density === value}
variant={settings.density === value ? "default" : "outline"}
size="sm"
onClick={() => setDensity(value)}
@@ -283,6 +291,7 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
<Button
key={String(value)}
type="button"
aria-pressed={settings.reduceMotion === value}
variant={settings.reduceMotion === value ? "default" : "outline"}
size="sm"
onClick={() => setReduceMotion(value)}
@@ -304,6 +313,7 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
<Button
key={value}
type="button"
aria-pressed={settings.defaultColumnWidth === value}
variant={settings.defaultColumnWidth === value ? "default" : "outline"}
size="sm"
onClick={() => setDefaultColumnWidth(value)}