Missing aria-live regions in server-side validation messages

There is currently no built-in configuration switch or documented roadmap item in the JHipster core generator to automatically inject aria-live regions or role="alert" into the default server-side validation templates for Angular or React. Accessibility for these generated forms relies on the base Bootstrap 5 scaffolding, which focuses on visual cues (error classes) rather than programmatic announcements.

Likely Explanation

JHipster generates entity templates based on a set of predefined blueprints. Because validation messages are often conditionally rendered or injected into the DOM after a server response (or page refresh), they are treated as static content by screen readers unless they are wrapped in a live region that exists in the DOM before the error text appears. The current scaffolding lacks these wrappers, meaning assistive technologies will not announce the errors automatically upon submission.

Implementation Steps

To ensure validation messages are announced without manual per-page editing, you must customize the generator templates or post-process the generated components. Use the following ARIA patterns:

1. Establish a Live Region

Wrap the error message container in an element with aria-live="polite" and aria-atomic="true". Using "polite" is preferred over role="alert" for form validation to avoid interrupting the user if multiple fields return errors simultaneously.

<div class="error-container" aria-live="polite" aria-atomic="true">
  <!-- Validation messages rendered here -->
</div>

2. Link Inputs to Errors

To provide context when a user navigates to a specific field, ensure the input is programmatically linked to its error message:

• Add aria-invalid="true" to the input when a server-side error is present.
• Use aria-describedby="[ID-of-error-message]" on the input to point to the specific error text.

Verification

To verify the fix, perform the following checks:

1. DOM Inspection: Ensure the aria-live container is present in the HTML before the form is submitted.
2. Screen Reader Test: Using NVDA, JAWS, or VoiceOver, submit an invalid form. The screen reader should announce the error messages automatically without requiring the user to Tab into the error field.
3. Audit: Run an accessibility tool (e.g., axe-core) to confirm that aria-describedby correctly maps to the error element.

Diagnostic Detail Needed: Are you using a custom JHipster blueprint, or are you modifying the generated code directly after the jhipster entity command?