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