Skip to content

🎨 Palette: [UX improvement] Add ARIA labels and focus states to playground inputs #45

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
aloewright wants to merge 1 commit into
base: main
Choose a base branch
from
Open

🎨 Palette: [UX improvement] Add ARIA labels and focus states to playground inputs #45

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
12 changes: 9 additions & 3 deletions apps/quill/client/components/playground-view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -295,7 +295,8 @@ export function PlaygroundView({
<div className="mb-6 grid gap-3 md:grid-cols-3">
<Control label="Guide">
<select
className="pp-select"
aria-label="Guide"
className="pp-select focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--strand-color-accent-lede)]"
Comment on lines +298 to +299

@gemini-code-assist gemini-code-assist Bot May 26, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The <select> element is already nested inside a <Control> component, which renders a <label> element. In HTML, nesting form controls inside a <label> implicitly associates them, providing the accessible name automatically. Therefore, aria-label="Guide" is redundant and can be safely removed to keep the markup clean.

Suggested change
aria-label="Guide"
className="pp-select focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--strand-color-accent-lede)]"
className="pp-select focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--strand-color-accent-lede)]"

onChange={(e) => setGuideSlug(e.target.value)}
value={guideSlug}
>
Expand All @@ -309,7 +310,8 @@ export function PlaygroundView({

<Control label="Preset">
<select
className="pp-select"
aria-label="Preset"
className="pp-select focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--strand-color-accent-lede)]"
Comment on lines +313 to +314

@gemini-code-assist gemini-code-assist Bot May 26, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Similar to the Guide dropdown, this <select> is nested inside a <Control> component (which renders a <label>). The implicit label association automatically provides the accessible name, making aria-label="Preset" redundant.

Suggested change
aria-label="Preset"
className="pp-select focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--strand-color-accent-lede)]"
className="pp-select focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--strand-color-accent-lede)]"

onChange={(e) => setPresetSlug(e.target.value as UseCase | "")}
value={presetSlug}
>
Expand All @@ -326,6 +328,7 @@ export function PlaygroundView({

<Control label={`Temperature · ${temperature.toFixed(1)}`}>
<input
aria-label="Temperature"
className="w-full"
Comment on lines +331 to 332

@gemini-code-assist gemini-code-assist Bot May 26, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The <Control> wrapper here has a dynamic label: Temperature · {temperature.toFixed(1)}. By hardcoding aria-label="Temperature", screen readers will only announce "Temperature" and won't announce the dynamic temperature value when focusing the slider. Removing the aria-label allows the implicit label to be used, which correctly includes the dynamic value.

Suggested change
aria-label="Temperature"
className="w-full"
className="w-full"

max="1"
min="0"
Expand All @@ -341,7 +344,8 @@ export function PlaygroundView({
<div className="grid gap-5 md:grid-cols-2">
<Panel label="Input">
<textarea
className="min-h-[220px] w-full resize-y bg-transparent text-sm focus:outline-none"
aria-label="Input"
className="min-h-[220px] w-full resize-y bg-transparent text-sm focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--strand-color-accent-lede)]"
onChange={(e) => setInput(e.target.value)}
placeholder="Paste a customer message, a prompt, a paragraph to rewrite…"
style={{ color: "var(--strand-color-ink-primary)" }}
Expand All @@ -362,6 +366,7 @@ export function PlaygroundView({
style={{ color: "var(--strand-color-ink-muted)" }}
>
<input
aria-label="Extra pass (slower)"
checked={humanizeExtraPass}
Comment on lines +369 to 370

@gemini-code-assist gemini-code-assist Bot May 26, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The checkbox is nested inside a <label> with the visible text Extra pass (slower, more thorough). Setting aria-label="Extra pass (slower)" overrides the visible label for screen readers, resulting in a mismatch between the visible text and the accessible name. This violates WCAG 2.5.3 (Label in Name). Removing the aria-label ensures the full visible text is used as the accessible name.

Suggested change
aria-label="Extra pass (slower)"
checked={humanizeExtraPass}
checked={humanizeExtraPass}

disabled={isRunning}
onChange={(e) => setHumanizeExtraPass(e.target.checked)}
Expand Down Expand Up @@ -719,6 +724,7 @@ function HumanizeToggle({
}}
>
<input
aria-label="Humanize output"
checked={on}
Comment on lines +727 to 728

@gemini-code-assist gemini-code-assist Bot May 26, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The <input> is nested inside a <label> that contains the text Humanize output. The implicit label association already provides the correct accessible name, making aria-label="Humanize output" redundant.

Suggested change
aria-label="Humanize output"
checked={on}
checked={on}

disabled={disabled || !authenticated}
onChange={onToggle}
Expand Down
Loading