Summary

Simplified and added test coverage for the resolveIdRefs utility added in #6308, per recommendations in #6310.

Breaking change

⚠️ This is potentially a breaking change.

This would only be considered a breaking change if someone expected USWDS code to throw an error if specifying an aria-controls value on a password component referencing an element which doesn't exist. This is exceedingly unlikely, since unless someone were explicitly catching this error, the thrown error would have interrupted the initialization of the password component, causing the component to not function as expected.

Related issue

Closes #6310

Preview link

Preview link: http://localhost:6006/?path=/story/patterns-forms--sign-in

Problem statement

As a developer, I expect that USWDS will strive toward initializing components as gracefully as possible given the potential for invalid inputs, so that my website doesn't have broken controls.

As a end-user, I expect that USWDS will optimize its code so that feedback relevant for code development is not included in the production builds to end-users, so that pages download and load quickly.

As a developer, I expect that USWDS has full test coverage for its components and related utilities, to reduce the risk of bugs, and to make expected inputs and outputs more explicit.

Solution

• Remove thrown error on missing ID for resolveIdRefs
• Add inline code documentation and JSDoc-based TypeScript type annotations for resolveIdRefs
• Add test coverage for resolveIdRefs

Testing and review

Verify no regressions in the behavior of "Show password" toggle in the password component.

1. Go to http://localhost:6006/?path=/story/patterns-forms--sign-in
2. Enter text in "Password"
3. Observe that password text is masked
4. Click "Show password"
5. Observe that password text is unmasked

Before opening this PR, make sure you’ve done whichever of these applies to you:

• Confirm that this code follows the 18F Front End Coding Style Guide and Accessibility Guide.
• Run git pull origin [base branch] to pull in the most recent updates from your base and check for merge conflicts. (Often, the base branch is develop).
• Run npm run prettier:sass to format any Sass updates.
• Run npm test and confirm that all tests pass.
• Run your code through HTML_CodeSniffer and make sure it’s error free.