Skip to content

🎨 Palette: Add accessible focus state and ARIA label to Playground textarea #41

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: Add accessible focus state and ARIA label to Playground textarea #41

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
@@ -1,3 +1,6 @@
## 2025-03-05 - Form controls missing focus indicators and ARIA labels
**Learning:** Found that custom search inputs and select dropdowns were using `focus:outline-none` but missing visual focus states, impairing keyboard accessibility. Additionally, they were missing explicit ARIA labels.
**Action:** Always ensure any interactive control using `focus:outline-none` has a corresponding `focus-visible:` ring state added (using standard `focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--strand-color-accent-lede)]`), and verify inputs have `aria-label` or related `aria-labelledby`.
## 2026-05-25 - Missing ARIA Labels on Textareas with Custom Outlines
**Learning:** Interactive textareas using `focus:outline-none` in custom panels lack proper accessibility indicators and labels.
**Action:** Ensure such elements are decorated with explicit `aria-label`s and standard focus visible rings (like `focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--strand-color-accent-lede)]`).
3 changes: 2 additions & 1 deletion apps/quill/client/components/playground-view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -341,7 +341,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 text"

@gemini-code-assist gemini-code-assist Bot May 25, 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 aria-label value "Input text" is slightly inconsistent with the visual label "Input" provided by the Panel component. For better accessibility and consistency (WCAG 2.5.3), the accessible name should ideally match the visual label. Additionally, the word "text" is redundant as screen readers already announce the element's role (textarea).

Suggested change
aria-label="Input text"
aria-label="Input"

className="min-h-[220px] w-full resize-y rounded-md 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 Down
Loading