Axe-core: `autocomplete-valid` rule breaking on "off" value (PR #1121)

[majapw]

axe-core version: ^3.1.0

Hello there!

v3.1.0 of axe-core added a check for the autocomplete-valid rule (https://github.com/dequelabs/axe-core/commit/e6189ce). We've been using autocomplete="off" internally for a while to disable the automatic browser behavior on certain types of inputs (https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion). Is this value for autocomplete problematic in terms of accessibility? It wasn't addressed at all in the rule specification as far as I could tell.

[jeeyyy]

@majapw

Thanks for reporting this. We will do some testing internally for this scenario & get back to you.

Will be in touch.

[jeeyyy]

@majapw

The autocomplete-valid rule, ensures if a given value for the autocomplete is valid.

Screen readers will still announce the field when autocomplete is set to off, if you were to hide the field from accessibility tree, use aria-hidden.

Are there any specific usages for you with autocomplete, where this rule is raising a fail?

[majapw]

Hi @jkodu, it may be related to the type value being set to "tel". Is that an issue?

<NumericInputController> default
--
��� passes a11y checks
Firefox 56.0.0 (Ubuntu 0.0.0)
Message: autocomplete attribute must be used correctly
Read more: https://dequeuniversity.com/rules/axe/3.1/autocomplete-valid?application=axeAPI
Code: <input autocomplete="off" class="input_ptsaj3-o_O-input_defaultPlaceholder_jsyynz" id="input_1" name="input_1" placeholder="Numeric Input Field" value="42" type="tel">

[jeeyyy]

@majapw - you are right, I ran the code snippet through tests, and removing type='tel' fixed it.

@WilcoFiers - Could you add your opinion on the above question from @majapw.

[majapw]

Thanks @jkodu! Looking forward to a response

[jeeyyy]

@majapw - PR has been opened with a fix - https://github.com/dequelabs/axe-core/pull/1121

[jeeyyy]

PR has been merged. Closing issue.

[robertfoobar]

Hello @jkodu ,

I'm using [email protected] and am running into a similar issue. The following HTML
<input autocomplete="off" id="searchInput" name="searchInput" type="search">
which I believe should be W3C compatible, raises axe-core issue "Ensure the autocomplete attribute is correct and suitable for the form field". I think this is a false positive.

I've already applied fix #1121 to autocomplete-appropriate.js inside my node_modules folder. Didn't help. I've also seen that there is no test case for search inputs until now.

Could you please double-check/try to reproduce that?

Thanks,
Robert

[jeeyyy]

@robertfoobar - I will do some testing and revert back to you.

Also, 3.1.2 is now released on https://www.npmjs.com/package/axe-core, so you may not need to update the node_modules yourself.

[timogasda]

I can also confirm that I am getting (in my opinion) incorrect violations for the autocomplete-valid rule when using autocomplete with type="search". In my case, I want autocomplete to be on:

<input type="search" autocomplete="on">

However, according to various resources like MDN and W3C docs, this should be valid:
http://w3c.github.io/html-reference/input.search.html
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete

[marcysutton]

@jkodu was there a specific reason why type="search" was left off the list of types? https://github.com/dequelabs/axe-core/blob/ff03339a9f125891967ab45b084d3ccc8dd1e2f8/lib/checks/forms/autocomplete-appropriate.js

[jeeyyy]

@marcysutton - not any particular reason for leaving it out. Overlooked.

Will aim to put together a PR.