Skip to content

Text field alerts a11y#8033

Open
Wagner3UB wants to merge 5 commits intomainfrom
text-field-alerts-a11y
Open

Text field alerts a11y#8033
Wagner3UB wants to merge 5 commits intomainfrom
text-field-alerts-a11y

Conversation

@Wagner3UB
Copy link
Contributor

@Wagner3UB Wagner3UB commented Mar 20, 2026

#5619

Fix: screen readers were not announcing field errors or required state on form inputs.

  • Added aria-live="polite" and aria-atomic="true" to the error region in FormFieldWrapper so error messages are announced when they appear in the DOM
  • Added aria-required and aria-invalid attributes to the Input in TextWidget for proper field identification by assistive technologies
Screenshot 2026-03-20 at 15 32 55 Screenshot 2026-03-20 at 15 35 06

Copy link
Collaborator

@stevepiercy stevepiercy left a comment

Choose a reason for hiding this comment

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

News clarification and a question to check rendering missed on the original source.

<div
class="ui red basic label form-error-label"
>
Only 7-bit bytes characters are allowed. Cannot contain uppercase letters, special characters: &lt;, &gt;, &, #, /, ?, or others that are illegal in URLs. Cannot start with: _, aq_, @@, ++. Cannot end with __. Cannot be: request,contributors, ., .., "". Cannot contain new lines.
Copy link
Collaborator

Choose a reason for hiding this comment

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

I just noticed this. Does the ampersand render to the screen, or does it need to be encoded?

Copy link
Contributor

@pnicolli pnicolli Mar 21, 2026

Choose a reason for hiding this comment

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

This good question got me curious and I checked, since this is a snapshot test result and should (theoretically) represent the result of rendering.
This is the actual string that is being render, the &lt; was converted while the & was not, so I think it's safe to assume this is fine, at least for the sake of this PR.

https://github.com/plone/volto/blob/main/packages/volto/src/components/manage/Widgets/IdWidget.jsx#L30
https://github.com/plone/volto/blob/main/packages/volto/locales/en/LC_MESSAGES/volto.po#L2675

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.

3 participants