Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(autocomplete-valid): incomplete for invalid but safe values #4500

Merged
merged 7 commits into from
Jun 20, 2024
Merged

fix(autocomplete-valid): incomplete for invalid but safe values #4500

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1515f72
fix(autocomplete-valid): incomplete for invalid but safe values
gaiety-deque Jun 11, 2024
1b59fdf
added additional common safe but invalid
gaiety-deque Jun 11, 2024
b7c4dc9
Update lib/checks/forms/autocomplete-valid.json
gaiety-deque Jun 13, 2024
59018e8
changed description to ignoredValues
gaiety-deque Jun 13, 2024
1d5d63f
check options
straker Jun 17, 2024
8f1be34
add test
straker Jun 17, 2024
497a9a1
Merge branch 'develop' into autocomplete-valid-incompletes
straker Jun 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 47 additions & 0 deletions doc/check-options.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
- [aria-required-children](#aria-required-children)
- [aria-required-parent](#aria-required-parent)
- [aria-roledescription](#aria-roledescription)
- [autocomplete-valid](#autocomplete-valid)
- [color-contrast](#color-contrast)
- [page-has-heading-one](#page-has-heading-one)
- [page-has-main](#page-has-main)
Expand Down Expand Up @@ -237,6 +238,52 @@ Previously supported properties `validTreeRowAttrs` is no longer available. `inv
</tbody>
</table>

### autocomplete-valid

<table>
<thead>
<tr>
<th>Option</th>
<th align="left">Default</th>
<th align="left">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code>stateTerms</code>
</td>
<td align="left">
<pre lang=js><code>[
'none',
'false',
'true',
'disabled',
'enabled',
'undefined',
'null',
]</code></pre>
</td>
<td align="left">List of allowed autocomplete state terms other than "on" and "off."</td>
</tr>
<tr>
<td>
<code>ignoredValues</code>
</td>
<td align="left">
<pre lang=js><code>[
'text',
'pronouns',
'gender',
'message',
'content'
]</code></pre>
</td>
<td align="left">List of autocomplete values that are technically invalid but will be ignored as they may not necessarily cause accessibility problems</td>
</tr>
</tbody>
</table>

### color-contrast

| Option | Default | Description |
Expand Down
8 changes: 4 additions & 4 deletions doc/rule-descriptions.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,10 +77,10 @@

## WCAG 2.1 Level A & AA Rules

| Rule ID | Description | Impact | Tags | Issue Type | ACT Rules |
| :----------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------------------- | :--------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [autocomplete-valid](https://dequeuniversity.com/rules/axe/4.9/autocomplete-valid?application=RuleDescription) | Ensure the autocomplete attribute is correct and suitable for the form field | Serious | cat.forms, wcag21aa, wcag135, EN-301-549, EN-9.1.3.5, ACT | failure | [73f2c2](https://act-rules.github.io/rules/73f2c2) |
| [avoid-inline-spacing](https://dequeuniversity.com/rules/axe/4.9/avoid-inline-spacing?application=RuleDescription) | Ensure that text spacing set through style attributes can be adjusted with custom stylesheets | Serious | cat.structure, wcag21aa, wcag1412, EN-301-549, EN-9.1.4.12, ACT | failure | [24afc2](https://act-rules.github.io/rules/24afc2), [9e45ec](https://act-rules.github.io/rules/9e45ec), [78fd32](https://act-rules.github.io/rules/78fd32) |
| Rule ID | Description | Impact | Tags | Issue Type | ACT Rules |
| :----------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------------------- | :------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [autocomplete-valid](https://dequeuniversity.com/rules/axe/4.9/autocomplete-valid?application=RuleDescription) | Ensure the autocomplete attribute is correct and suitable for the form field | Serious | cat.forms, wcag21aa, wcag135, EN-301-549, EN-9.1.3.5, ACT | failure, needs&nbsp;review | [73f2c2](https://act-rules.github.io/rules/73f2c2) |
| [avoid-inline-spacing](https://dequeuniversity.com/rules/axe/4.9/avoid-inline-spacing?application=RuleDescription) | Ensure that text spacing set through style attributes can be adjusted with custom stylesheets | Serious | cat.structure, wcag21aa, wcag1412, EN-301-549, EN-9.1.4.12, ACT | failure | [24afc2](https://act-rules.github.io/rules/24afc2), [9e45ec](https://act-rules.github.io/rules/9e45ec), [78fd32](https://act-rules.github.io/rules/78fd32) |

## WCAG 2.2 Level A & AA Rules

Expand Down
2 changes: 1 addition & 1 deletion lib/checks/forms/autocomplete-valid-evaluate.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { isValidAutocomplete } from '../../commons/text';

function autocompleteValidEvaluate(node, options, virtualNode) {
function autocompleteValidEvaluate(_node, options, virtualNode) {
const autocomplete = virtualNode.attr('autocomplete') || '';
return isValidAutocomplete(autocomplete, options);
}
Expand Down
8 changes: 5 additions & 3 deletions lib/checks/forms/autocomplete-valid.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,9 @@
"metadata": {
"impact": "serious",
"messages": {
"pass": "The autocomplete attribute is correctly formatted",
"fail": "The autocomplete attribute is incorrectly formatted"
"pass": "the autocomplete attribute is correctly formatted",
"fail": "the autocomplete attribute is incorrectly formatted",
"incomplete": "the autocomplete attribute has a non-standard value. Check whether any standard value could be used instead."
Copy link
Contributor

@straker straker Jun 17, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I struggled to understand what the meaning of this message was suppose to be from the recent suggestion. I hope this clarifies it but we can discuss if you want this changed @WilcoFiers

}
},
"options": {
Expand All @@ -17,6 +18,7 @@
"enabled",
"undefined",
"null"
]
],
"ignoredValues": ["text", "pronouns", "gender", "message", "content"]
}
}
8 changes: 7 additions & 1 deletion lib/commons/text/is-valid-autocomplete.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,8 @@ function isValidAutocomplete(
locations = [],
qualifiers = [],
standaloneTerms = [],
qualifiedTerms = []
qualifiedTerms = [],
ignoredValues = []
} = {}
) {
autocompleteValue = autocompleteValue.toLowerCase().trim();
Expand Down Expand Up @@ -117,6 +118,11 @@ function isValidAutocomplete(
}

const purposeTerm = autocompleteTerms[autocompleteTerms.length - 1];

if (ignoredValues.includes(purposeTerm)) {
return undefined;
}

return (
standaloneTerms.includes(purposeTerm) ||
qualifiedTerms.includes(purposeTerm)
Expand Down
5 changes: 3 additions & 2 deletions locales/_template.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -682,8 +682,9 @@
"fail": "The autocomplete value is inappropriate for this type of input"
},
"autocomplete-valid": {
"pass": "The autocomplete attribute is correctly formatted",
"fail": "The autocomplete attribute is incorrectly formatted"
"pass": "the autocomplete attribute is correctly formatted",
"fail": "the autocomplete attribute is incorrectly formatted",
"incomplete": "the autocomplete attribute has a non-standard value. Check whether any standard value could be used instead."
},
"accesskeys": {
"pass": "Accesskey attribute value is unique",
Expand Down
5 changes: 5 additions & 0 deletions test/checks/forms/autocomplete-valid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,11 @@ describe('autocomplete-valid', function () {
assert.isFalse(evaluate.apply(checkContext, params));
});

it('returns undefined (incomplete) if autocomplete is ignored', function () {
var params = checkSetup('<input autocomplete="text" id="target" />');
assert.isUndefined(evaluate.apply(checkContext, params));
});

it('uses options to change what is valid autocomplete', function () {
var options = { stateTerms: ['foo'] };
var params = checkSetup(
Expand Down
10 changes: 10 additions & 0 deletions test/commons/text/is-valid-autocomplete.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,4 +206,14 @@ describe('text.isValidAutocomplete', () => {
);
});
});

describe('options.ignoredValues', () => {
it('returns undefined if value is invalid and ignored', () => {
assert.isUndefined(
isValidAutocomplete('bad-term', {
ignoredValues: ['bad-term']
})
);
});
});
});
7 changes: 7 additions & 0 deletions test/integration/rules/autocomplete-valid/autocomplete-valid.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,3 +170,10 @@
<input autocomplete="section-foo email webauthn" id="pass92" />
<input autocomplete="section-foo work email webauthn" id="pass93" />
<input autocomplete="section-foo billing work email webauthn" id="pass94" />

<!-- Incomplete, ignored values -->
<input autocomplete="text" id="incomplete1" />
<input autocomplete="pronouns" id="incomplete2" />
<input autocomplete="gender" id="incomplete3" />
<input autocomplete="message" id="incomplete4" />
<input autocomplete="content" id="incomplete5" />
7 changes: 7 additions & 0 deletions test/integration/rules/autocomplete-valid/autocomplete-valid.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,13 @@
"description": "autocomplete-valid tests",
"rule": "autocomplete-valid",
"violations": [["#fail1"], ["#fail2"], ["#fail3"], ["#fail4"], ["#fail5"]],
"incomplete": [
["#incomplete1"],
["#incomplete2"],
["#incomplete3"],
["#incomplete4"],
["#incomplete5"]
],
"passes": [
["#pass1"],
["#pass2"],
Expand Down
Loading