Skip to content

fix(z-input): add visual indicator for required fields#626

Open
ada-workbackai wants to merge 2 commits intomasterfrom
workbackai/fix/wcag-3.3.2-required-field-indicator
Open

fix(z-input): add visual indicator for required fields#626
ada-workbackai wants to merge 2 commits intomasterfrom
workbackai/fix/wcag-3.3.2-required-field-indicator

Conversation

@ada-workbackai
Copy link
Copy Markdown
Contributor

Summary

Fixes WCAG 3.3.2 (Labels or Instructions) by adding a visual asterisk (*) indicator to required form fields in the z-input component.

Issue: Required form fields (such as "Nome" and "Cognome" on the student registration form) lack visual indicators to show users which fields must be completed. While the Continue button remains disabled until fields are filled, there is no visual cue (such as an asterisk) to inform users that these fields are required.

Solution: Modified the renderLabel() method in the z-input component to append a red asterisk (*) with aria-hidden="true" when the required prop is set to true. The asterisk provides a universally recognized visual indicator while the required attribute on the input element provides programmatic indication for assistive technologies.

Implementation Details

  • Added conditional rendering of asterisk in renderLabel() method
  • Styled asterisk with error color (--color-form-hover-error) for visual prominence
  • Used aria-hidden="true" on asterisk since the required attribute already provides programmatic indication

Application Usage Requirements

Important: Applications using the z-input component must add the required attribute to achieve full WCAG 3.3.2 compliance:

<!-- Before -->
<z-input type="text" label="nome" placeholder="Nome" />

<!-- After -->
<z-input type="text" label="nome" placeholder="Nome" required />

The following applications should be updated to add required attributes:

  • Student registration form (/registrazione/studente/1) - Nome and Cognome fields

Test Plan

  • Built component successfully with yarn build.wc
  • Verified asterisk appears in label when required prop is true
  • Verified asterisk is styled with error color for visibility
  • Confirmed aria-hidden="true" prevents duplicate announcements

Evidence

View before/after screenshots and full audit details:
https://app.workback.ai/dashboard/issue/5031/


WCAG Reference:
3.3.2 Labels or Instructions (Level A)

Adds asterisk (*) visual indicator to required form fields to comply with WCAG 3.3.2 Level A.

User impact: Users with cognitive disabilities or those unfamiliar with form conventions will now clearly see which fields are required before attempting submission.
Applied prettier formatting to match project code style standards.
@ada-workbackai
Copy link
Copy Markdown
Contributor Author

Pushed changes to fix CI failures:

  • Fixed prettier formatting issues in z-input component

The CI checks should now pass. Ready for review when you have a chance.

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.

1 participant