Skip to content

[feat] More strongly type the autocomplete HTML attribute #3237

@josephine-njooi

Description

@josephine-njooi

Does your feature request relate to a specific USWDS component?

TextInput, TextInputMask, Select, Textarea, potentially others.

What USWDS Version is this feature present in?

Not sure which versions these were introduced in, but they are present in v3.13.0

Is your feature request related to a problem? Please describe.

The autocomplete attribute spec defines a finite set of strings that are valid autocomplete values. However, the autocomplete prop on components such as TextInput, implicitly defined by JSX.IntrinsicElements["input"], type the prop as any string, including strings that are not valid for the HTML autocomplete spec. This creates a risk of typos in the autocomplete string, which are less likely to be caught by tests because it is difficult to unit test autocomplete behavior (since it requires a browser for saving).

Describe the solution you'd like

It would help if the autocomplete prop was also more strongly typed as string literals. An example type implementation of the autocomplete spec can be found here: https://github.com/newjersey/doula-medicaid/pull/67/files#diff-173a85642c8aea4da1409ea6a2666070eec9e424b7c2db52a9bf10f0ec88dac7

I can understand if this seems out of scope for this library, and more of an input-intrinsic Typescript thing. That said, some component-intrinsic-props in this library are already more strongly typed as string literals, such as type in TextInput. And that stronger typing is definitely helpful!

Describe alternatives you've considered

I was hoping that there would already be a typescript implementation for the autocomplete attribute, perhaps in a reusable types package. But in searching, I wasn't able to find anything.

Additional context

The HTML autocomplete attribute is tied to the WCAG AA Identify Input Purpose accessibility requirement, and so is a legal requirement under the ADA for state and local governments.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions