Updated date picker, text area, radio buttons and checkbox group required for improved accessibility

What components does this change affect?

This change affects all implementations of the following components:

HTML structure changes:

added aria-required="true" to required date date picker and text area inputs
added <span class="sr-only">Required</span> to required radio buttons and checkbox group legends

Date picker before

<input 
     id="" 
     name="" 
     type="text" 
     class="form-control turas-date-picker" />

Date picker after

<input 
     id="" 
     name="" 
     type="text" 
     class="form-control turas-date-picker" 
     aria-required="true" />

Text area before

<textarea 
     placeholder="" 
     class="form-control"
     id="" 
     name="">

Text area after

<textarea 
     placeholder="" 
     class="form-control"
     aria-required="true"       
     id="" 
     name="">

Radio buttons before

<legend class="control-label requiredFieldMarker">
     Radio buttons
</legend>

Radio buttons after

<legend class="control-label requiredFieldMarker  ">
     Radio buttons
     <span class="sr-only">Required</span>
</legend>

Checkbox group before

<legend class="control-label requiredFieldMarker ">
     Checkbox group
</legend>

Checkbox group after

<legend class="control-label requiredFieldMarker ">
     Checkbox group required
     <span class="sr-only">required</span>
</legend>

Why this change was made

This change improves the accessibility of the date picker, text area, radio buttons and checkbox group components by ensuring required fields are programmatically identified as required for users of assistive technologies.

Benefits include:

better accessibility – screen readers can identify when a text box is required
supports WCAG 2.2 guidance – helps ensure required fields are communicated programmatically as well as visually
better user experience – helps users understand which fields must be completed before submitting a form

Recommended checks for consuming teams

After updating your Design System packages, we recommend reviewing date picker, text area, radio buttons and checkbox group usage in your application to confirm everything behaves as expected.

Areas worth checking:

required fields continue to display correctly
required field indicators remain visible
screen readers announce required fields appropriately
existing validation behaviour remains unchanged

Applications not using the NuGet package tag helpers should review any manually maintained markup and align it with the updated structure shown above and on the date picker, text area, radio buttons and checkbox group pages in the form components section.

Data submission

No changes are expected to form submission, model binding, or data persistence as part of this update.

For peace of mind, you may wish to perform a quick check in consuming applications to confirm date picker, text area, radio buttons and checkbox group values continue to submit and save as expected.

Summary

This change improves accessibility by ensuring required fields are programmatically identified as required for assistive technologies.

This pattern will be extended to other Design System form components in a future release.

Internal reference

Design System internal reference: 98299

Updated date picker, text area, radio buttons and checkbox group required