USWDS-Site - Guidance: Combo box autocomplete guidance

[mahoneycm]

Summary

Found when discussing accessibility checklists with @amycole501

Input and select components can use autocomplete to store and fill user data. The list of token values is limited and exclusive to personal data.

Combobox dynamically sets auto-complete to off.

Proposed solution

Add guidance to "When to consider something else" to use input or select when autocomplete is desired.

Autocomplete. Use an input or select component when autocomplete is desired.

Alternative solutions

We discussed adding a feature to combo box to allow users to set autocomplete, but the appropriate use cases seem like rare, edge cases. The input for the specified tokens is often unique and would not be presented in a drop-down list (credit card number, street address, email address). Others are smaller lists that wouldn't necessitate a combo box (pronouns, prefix/suffix). You could use combobox for user Country (there is no state autofill in the list) or birth month, but you should only use these autocomplete fields for personal data, not a general pick a month / country respectively.

References

MDN Docs - HTML attribute: autocomplete W3C - Using HTML 5.2 autocomplete attributes

[mejiaj]

For discussion

Common patterns and applications of autocomplete. How and when to use.

[mahoneycm]

W3C Combobox Autocomplete behaviors

In W3C's combobox with autocomplete examples, they do not use the standard autocomplete attribute. They use aria-autocomplete to specify if the component will use inline, list, or both inline and list autocompletion. They then use custom JS to implement actual autocomplete behaviors.

This is inline with MDN aria-autocomplete documentation:

The aria-autocomplete property only describes the type of predictive behavior for an input element for assistive technologies; it doesn't provide the functionality. The actual autocompletion should be provided using HTML attributes or JavaScript.

Our component currently sets aria-autocomplete="list" and autocomplete="false". Setting autocomplete to false does the following:

The browser is not permitted to automatically enter or select a value for this field. It is possible that the document or application provides its own autocomplete feature, or that security concerns require that the field's value not be automatically entered.

Which appears to be acceptable for the W3C criteria:

For the Success Criterion, it is assumed that the autocomplete attribute is not used on form fields that do not correspond to an autocomplete field described in the HTML autocomplete attribute specification.

Given this information, is there any value in adding the guidance to use another component for autocomplete fields? Or do we deem it unnecessary given our component matches expected patterns? I feel like we might be able to close this and leave it as is but curious what others think!

[mejiaj]

@mahoneycm would it be more accurate to rename this issue Combo box autocomplete guidance or something similar for clarity?

To understand next steps we had to look at W3C and MDN. Your comment does a good job at combining these findings. If we could further synthesize that autocomplete is not recommended for combobox; that seems like a good recommendation to users.

Otherwise users have to do similar repetitive research.

[mahoneycm]

@mejiaj I would also like to add that it is currently not possible to add a different autocomplete attribute value to the combobox input.

It is explicitly set to false by our JS

https://github.com/uswds/uswds/blob/369cf3fdf9abf721a357e864a0f6adbf667ba862/packages/usa-combo-box/src/index.js#L224-L232

There also doesn't appear to be any handoff of attributes from the placeholder select to the input that gets dynamically added to the page. The attribute would be hidden with the select element during initialization.

This is part of the reason I initially thought this would be something we add to the "when to consider something else" guidance. Something along the lines of...

When to consider something else

Autocompletion functionality. Due to the specificity of acceptable autofill tokens, autocomplete is set to false for this component. Consider the input component if you wish to utilize this functionality.

[mejiaj]

@mahoneycm can you add this for discussion to the team in an upcoming sync so we can confirm next steps?