What components does this change affect?
This change affects all implementations of the required fields marker displayed on forms.
HTML structure changes:
- added the text "Required fields are marked with an asterisk" directly to the HTML. This text was previously injected using CSS.
Required fields marker before
<p class="requiredFieldMarkerNotice "></p>Required fields marker after
<p class="requiredFieldMarkerNotice">Required fields are marked with an asterisk</p>The associated CSS ::before rule used to provide the text has also been removed.
Required fields marker Tag Helper
Applications using the Turas Design System NuGet package and the turas-required-field-marker Tag Helper do not need to make any manual markup changes.
The existing Tag Helper usage remains unchanged
<turas-required-field-marker></turas-required-field-marker>The Tag Helper will now generate the updated HTML
<p class="requiredFieldMarkerNotice">Required fields are marked with an asterisk</p>Why this change was made
This change improves the accessibility of the required fields marker by ensuring the explanatory text is part of the HTML content rather than being generated using CSS.
Benefits include:
- improved accessibility – the explanatory text is available as part of the page content for assistive technologies
- more robust markup – the information is represented directly in the HTML rather than relying on a CSS pseudo-element
- improved consistency – the required fields guidance is available independently of the CSS implementation
Recommended checks for consuming teams
After updating your Design System packages, we recommend reviewing the required fields marker in your application.
Areas worth checking:
- the text "Required fields are marked with an asterisk" is displayed as expected
- the marker retains the expected styling and spacing
Applications not using the NuGet package tag helpers should review any manually maintained markup and align it with the updated structure shown above.
Data submission
No changes are expected to form submission, model binding, or data persistence as part of this update.
Summary
This change improves accessibility by ensuring the required fields marker text is included directly in the HTML and available to assistive technologies, rather than being generated using CSS.
Internal reference
Design System internal reference: 104152