Updated text box hint text for improved accessibility

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