Skip to content

fix(QInput,QField): expose error state to assistive tech#18323

Open
web3blind wants to merge 1 commit into
quasarframework:devfrom
web3blind:fix-qinput-field-aria-error-state
Open

fix(QInput,QField): expose error state to assistive tech#18323
web3blind wants to merge 1 commit into
quasarframework:devfrom
web3blind:fix-qinput-field-aria-error-state

Conversation

@web3blind

Copy link
Copy Markdown

Fixes #17306.

This adds the missing ARIA error-state relationship for Quasar fields so assistive technologies can identify invalid controls and reach the rendered error message.

What changed

  • Adds a stable id to the rendered field error message container while an error is active.
  • Applies aria-invalid="true", aria-errormessage, and aria-describedby to native QInput controls in error state.
  • Preserves existing aria-describedby values instead of replacing them.
  • Exposes ariaInvalid, ariaDescribedby, and ariaErrormessage in the QField control slot scope so custom controls can wire the same relationship.
  • Documents the new control slot scope values in the QField API metadata.
  • Adds focused tests for native QInput controls and custom QField control slots.

Validation

  • pnpm --filter quasar build
  • pnpm --filter quasar test -- --run ui/src/components/input/QInput.test.js ui/src/components/field/QField.test.js
    • Test Files 101 passed (101)
    • Tests 1063 passed (1063)
  • pnpm exec oxlint --no-error-on-unmatched-pattern ui/src/components/input/QInput.js ui/src/composables/private.use-field/use-field.js ui/src/components/input/QInput.test.js ui/src/components/field/QField.test.js
    • Found 0 warnings and 0 errors.
  • git diff --check

Note: full pnpm lint:ui:check was blocked in my local checkout by a generated-file/environment issue unrelated to these changes: ui/playground/.quasar/tsconfig.json was missing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

a11y: handle ARIA error state in form field components

1 participant