What components does this change affect?
This change affects all implementations of the text box component.
HTML structure changes:
- Added a unique identifier to the guidance text div and linked it to the text box input using aria-describedby
Before
<div class="form-field-guidance-text">
I am some guidance text
</div>
<input
class="form-control"
type="text"
id="TextBoxWithGuidanceText"
name="TextBoxWithGuidanceText" />After
<div id="TextBoxWithGuidanceText-guidance"
class="form-field-guidance-text">
I am some guidance text
</div>
<input
class="form-control"
aria-describedby="TextBoxWithGuidanceText-guidance"
type="text"
id="TextBoxWithGuidanceText"
name="TextBoxWithGuidanceText" />Why this change was made
This change improves the accessibility of the text box component by ensuring the text box guidance text is programmatically associated with the related input.
Benefits include:
- Better accessibility – screen readers can announce guidance text when the text box receives focus
- Supports WCAG 2.2 guidance – improves the relationship between form controls and supporting information
- Better user experience – users relying on assistive technologies can access the same guidance provided visually
Recommended checks for consuming teams
After updating your Design System packages, we recommend reviewing text box and text box guidance text usage in your application to confirm everything behaves as expected.
Areas worth checking:
- guidance text continues to display correctly
- spacing and layout remain consistent
- screen readers announce guidance text when the text box receives focus
- any custom JavaScript interacting with text boxes continues to behave as expected
Applications not using the NuGet package tag helpers should review any manually maintained text box markup and align it with the updated structure shown above and on the text box page 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 text box values continue to submit and save as expected.
Summary
This change is not expected to introduce functional issues. A quick review in consuming applications is recommended to confirm the updated markup works as expected in your implementation.
This pattern will be extended to other Design System form components in a future release.
Internal reference
Design System internal reference: 97148