Text Input: Stray ID referenced in aria-describedby when not needed

[davidakennedy]

Bug Report

• [x] I’ve searched for any related issues and avoided creating a duplicate issue.

What happened

The text input component references a charcount-message ID even when the charcount property isn't enabled. So the charcount-message ID doesn't exist on the page.

What I expected to happen

The charcount-message ID shouldn't be there since this component, in the current setup doesn't use that property.

Reproducing

• USWDS component version: 3
• Device: Macbook Pro
• Browser: Chrome

Steps to reproduce:

1. Go to: https://staging.va.gov/decision-reviews/higher-level-review/request-higher-level-review-form-20-0996
2. Log in with vetsgov+test236@id.me](mailto:vetsgov+test236@id.me
3. Get to the screen where you edit the Veteran's mobile phone number: https://staging.va.gov/decision-reviews/higher-level-review/request-higher-level-review-form-20-0996/edit-contact-information-mobile-phone Also happens on: https://staging.va.gov/decision-reviews/higher-level-review/request-higher-level-review-form-20-0996/edit-contact-information-email-address and https://staging.va.gov/decision-reviews/higher-level-review/request-higher-level-review-form-20-0996/informal-conference/representative-info
4. View the two text inputs with the extra aria-describedby. Like:

<input class="usa-input" id="inputField" type="tel" aria-describedby="charcount-message" aria-invalid="false" maxlength="14" pattern="^[0-9-() ]+$" name="root_inputPhoneNumber" autocomplete="tel" required="" part="input">

Urgency

How urgent is this request? Please select the appropriate option below and/or provide details

• [ ] This bug is blocking work currently in progress
• [ ] This bug is affecting work currently in progress but we have a workaround
• [ ] This bug is blocking work planned within the next few sprints
• [x] This bug is not blocking any work
• [ ] Other

Details

See screenshot.

@Mottie says:

This is built into the va-text-input web component. The charcount-message span is set to appear if the va-text-input has both a charcount and a maxlength attribute on it. In storybook, this span contains "10 characters allowed" - so it is always visible

So, I think including the charcount-message ID in the aria-describedby when charcount andmaxlength` are missing is a bug