[FormField] Support errorIcon and errorPrefix props for WCAG 1.4.1 compliance
Maintainers usually reply within 1 day
Nobody has claimed this yet.
Assessment
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Newbie friendliness
- 45/100
- Issue type
- Feature
- Clarity
- Mostly clear
- Activity status
- Active
- Tech stack
- tailwindcss, typescript
- Domain
- accessibility, frontend
Research direction
The work is on UFormField, where the error message is rendered; find that render path first and confirm how it is currently styled. Before coding, check with maintainers whether errorIcon should accept a string, a slot, or both, since the issue leaves this open. Done when both props are optional, render before the error text, and leave the default output unchanged for existing users.
Written by the indexing model from the issue text.
Description
Package
v4.x
Description
When validating form fields using UFormField, error states are currently indicated visually using color (red text/border by default). Under WCAG 2.2 Success Criterion 1.4.1 (Use of Color - Level A), color must not be the sole visual means of communicating an error or state change.
To comply with accessibility standards, form error messages need non-color visual indicators such as an explicit text prefix (e.g., Error: or Required:) or a visual error icon alongside the error message text.
Proposal
Adding two optional props to UFormField:
errorPrefix?: string
- Prepends a text indicator before the error string (e.g.,
"Error","Required"). - Defaults to
undefinedto ensure zero breaking changes for existing users. - Rendered alongside the error text (e.g.,
Error: Please enter a valid email).
errorIcon?: string | slot
- Displays an icon before the error message (e.g.,
i-heroicons-exclamation-circle). - Defaults to
undefinedto ensure zero breaking changes for existing users.
Additional context
- WCAG Guideline: WCAG 2.2 SC 1.4.1 Use of Color
- Technique G14: Ensuring that information conveyed by color differences is also available in text.
- Dominant language
- TypeScript
- Stars
- 7k
- Forks
- 1.1k
- Avg merge
- 1d 17h
- Merged PRs (30d)
- 170
Getting set up
- No Dockerfile or Docker Compose file
- Has a pull request template
- Read the contributing guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from nuxt/ui
-
NavigationMenu: expanding a nested item in vertical orientation collapses its parent when using v-modelPossibly taken @cristianchiriac claimed this 1 day ago. Open
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
Maintainers usually reply within 1 day
-
UAvatar wrong root for passthoughPossibly taken @lazerg claimed this 49 days ago. Opentriage
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
Maintainers usually reply within 1 day
-
triage
Difficulty 2/5 1-3 hours Newbie friendliness 64/100
Maintainers usually reply within 1 day
-
triage
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
Maintainers usually reply within 1 day
-
v5
Difficulty 2/5 Half a day Newbie friendliness 66/100
Maintainers usually reply within 1 day
Similar issues
-
bug priority: P2
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
Maintainers usually reply within 1 day
-
wayfinder:task
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
Maintainers usually reply within 1 day
-
bug customer-reported data-plane question Service Attention Storage
Difficulty 2/5 1-3 hours Newbie friendliness 69/100
Azure/azure-rest-api-specs#47397 · 2 comments ·
Maintainers usually reply within 1 day
-
Claude thinking budget can shrink capped Haiku responses to 2,048 tokensPossibly taken @DavyMassoneto claimed this today. Open
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
diegosouzapw/OmniRoute#17109 ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
paperclipai/paperclip#16785 ·
Maintainers usually reply within 1 day