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.

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

Autocomplete attribute has valid value updates #1567

Closed
wants to merge 21 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
1f735b0
Editorial changes in response to TF feedback
ajanec01 Jan 18, 2021
091255c
updating with origin
ajanec01 Feb 17, 2021
07bbefe
suggestions from #1540 and #1541
ajanec01 Feb 17, 2021
561e9b7
Update _rules/autocomplete-valid-value-73f2c2.md
ajanec01 Feb 18, 2021
90fcb2f
Per @Jym77 suggestions
ajanec01 Feb 18, 2021
fc8bb3e
ASCII case-insensitive error fix
ajanec01 Feb 18, 2021
b48ae5d
Update _rules/autocomplete-valid-value-73f2c2.md
ajanec01 Mar 22, 2021
e09f82f
Merge branch 'develop' of https://github.com/act-rules/act-rules.gith…
ajanec01 Mar 22, 2021
63ee4aa
Merge branch 'autocomplete-TF-feedback' of https://github.com/act-rul…
ajanec01 Mar 22, 2021
a18822e
changing order for better readability- J-Y M suggestion
ajanec01 Mar 22, 2021
37e3077
Merge branch 'autocomplete-TF-feedback' of https://github.com/act-rul…
ajanec01 Apr 15, 2021
df414d6
refactoring type
ajanec01 Apr 16, 2021
149a7ab
spelling error
ajanec01 Apr 16, 2021
38fe055
Update _rules/autocomplete-valid-value-73f2c2.md
ajanec01 Apr 19, 2021
bb7d4bf
Update embedded-image.md
ajanec01 Apr 19, 2021
7855e22
Update rendered-image-resource.md
ajanec01 Apr 19, 2021
ffd3f0a
As per Wilco suggesstions
ajanec01 Apr 19, 2021
0c1ad5d
Merge branch 'autocomplete-TF-feedback' of https://github.com/act-rul…
ajanec01 Apr 19, 2021
a8fc7fd
trying remove additional files
ajanec01 Apr 24, 2021
d9e82c9
updating with origin
ajanec01 Apr 24, 2021
491cac9
Merge branch 'autocomplete-TF-feedback' of https://github.com/act-rul…
ajanec01 Apr 24, 2021
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
70 changes: 34 additions & 36 deletions _rules/autocomplete-valid-value-73f2c2.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,10 @@ acknowledgments:

This rule applies to any HTML `input`, `select` and `textarea` element with an `autocomplete` [attribute value][] that is neither empty (`""`) nor only [ASCII whitespace][], except if one of the following is true:

- **autofill expectation**: the `autocomplete` attribute consists of a single token that is [ASCII case-insensitive][] match for string `off` or string `on`; or
- **hidden**: the element is not [visible][], and not [included in the accessibility tree][]; or
- **disabled**: the element is a [disabled element]; or
- **fixed value**: the element is an `input` element with a `type` [attribute value][] of either `hidden`, `button`, `submit` or `reset`; or
- **fixed value**: the element is an `input` element with a `type` [attribute value][] of `hidden`, `button`, `submit` or `reset`; or
- **static**: the element is not part of [sequential focus navigation][] and has a [semantic role][] that is not a [widget role][].

## Expectation 1
Expand All @@ -37,19 +38,15 @@ Each test target's `autocomplete` [attribute value][] is a [space separated][] l
3. An optional token of either "home", "work", "mobile", "fax" or "pager", only if the last token is "email", "impp", "tel" or "tel-\*"; then
4. A required token from the [correct autocomplete field][].

## Expectation 2
Copy link
Member

Choose a reason for hiding this comment

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

You still have some failing examples that now pass the rule. Can you take those out and add in a passed example showing this should no longer be failed?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Will add an example with an incorrect type. Which failed example is now passing? I've looked through them again and I'm not sure which ones you mean.
I've also checked the examples with optional tokens and if they are in the wrong order, querying the autocomplete returns an empty string, which is in line with what we currently have.


Each test target's `autocomplete` [attribute value][] has a [correct autocomplete field][] that is [appropriate][appropriate field for the form control] for that test target.

## Assumptions

The `autocomplete` attribute is used on form fields that correspond to [Input Purposes for User Interface Components](https://www.w3.org/TR/WCAG21/#input-purposes) and collect information about the user.

If the `autocomplete` attribute is used to describe "custom" taxonomy, for example `<input type="text" autocomplete="banner" />`, success Criterion [1.3.5 Identify Input Purpose][sc135] may be satisfied even if this rule failed.

The `type` attribute is used correctly according to the intended purpose of `input` elements. If an incorrect `type` attribute is used for `input` elements, this rule may fail elements that satisfy success Criterion [1.3.5 Identify Input Purpose][sc135]. For example if an `input` element has a `type` of `number`, but is expecting an e-mail address.
The `aria-disabled` state is used on `input` elements which are not part of [sequential focus navigation][] and are not otherwise [operable](https://www.w3.org/TR/wai-aria-1.2/#dfn-operable). If this is not the case, this rule may be inapplicable on elements that are still operable and require a valid `autocomplete` attribute to satisfy success Criterion [1.3.5 Identify Input Purpose][sc135].

The `aria-disabled` state is used on `input` elements which are not part of [sequential focus navigation][] and are not otherwise [operable](https://www.w3.org/TR/wai-aria-1.2/#dfn-operable). If this is not the case, this rule may be inapplicable on elements that are still [operable](https://www.w3.org/TR/wai-aria-1.2/#dfn-operable) and require a valid `autocomplete` attribute to satisfy success Criterion [1.3.5 Identify Input Purpose][sc135].
Mainstream user agents tend to provide autofill suggestions for `input` elements with or without an [appropriate field name for the form control][]. As such, the assistive technologies should be able recognize the purpose of a control even when the `autocomplete` [attribute value][] is inappropriate for the control's `type` [attribute value][].
Copy link
Collaborator

Choose a reason for hiding this comment

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

I'm not sure what is the assumption here…
"mainstream user agents tend to provide…" is not an assumption, it's a fact
"the AT should be able to…" is also not an assumption.

That should either be moved to the background or phrased in a way that mak the assumption obvious (even though I agree that the "This rule assumes that…" formulation is a bit heavy, I like it before it make it easy to spot the actual assumption and easier to write something which is actually an assumption).


## Accessibility Support

Expand All @@ -74,15 +71,15 @@ The auto-completing feature of the `autocomplete` attribute benefits many users,

#### Passed Example 1

This `autocomplete` [attribute value][] only has the required token, and is valid for an `input` element which has a default type of `text`.
This `autocomplete` [attribute value][] only has the required token "username".

```html
<label>Username<input autocomplete="username"/></label>
```

#### Passed Example 2

This `autocomplete` [attribute value][] only has the required token, and is valid for a `select` element. Even though the element's [form owner](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#form-owner) has `autocomplete="off"`, thus preventing the user agent from completing it, it does not prevent the `autocomplete` [attribute value][] from being programmatically identifiable.
The `autocomplete` [attribute value][] only of the `select` element has the required token "bday-month". Even though the element's [form owner](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#form-owner) has `autocomplete="off"`, thus preventing the user agent from completing it, it does not prevent the `autocomplete` [attribute value][] from being programmatically identifiable.

```html
<form autocomplete="off">
Expand All @@ -98,23 +95,23 @@ This `autocomplete` [attribute value][] only has the required token, and is vali

#### Passed Example 3

This `autocomplete` [attribute value][] only has the required token, and is valid for a `textarea` element. Mixing upper and lower case letters is allowed for `autocomplete` attributes.
This `autocomplete` [attribute value][] only has the required token "street-address". Mixing upper and lower case letters is allowed for `autocomplete` attributes.

```html
<label> Street address<textarea autocomplete="Street-Address"></textarea></label>
```

#### Passed Example 4

This `autocomplete` [attribute value][] list includes a `work` token, allowed because it is used before `email`. The `email` token is allowed on `input` elements with a `type` [attribute value][] of `text`.
This `autocomplete` [attribute value][] list includes a `work` token, allowed because it is used before `email`.

```html
<label>Work email<input autocomplete="Work Email"/></label>
```

#### Passed Example 5

This `autocomplete` [attribute value][] list includes a `section-` token, which can preface any [correct autocomplete field][]. The `email` token is allowed on `input` elements with a `type` [attribute value][] of `text`.
This `autocomplete` [attribute value][] list includes a `section-` token, which can preface any [correct autocomplete field][].

```html
<label>Partner's email address<input autocomplete="section-partner email"/></label>
Expand All @@ -130,12 +127,20 @@ This `autocomplete` [attribute value][] list includes `section-` and `billing` t

#### Passed Example 7

This `autocomplete` [attribute value][] list includes all allowed types of tokens in the correct order. The `email` token is allowed on `input` elements with a `type` [attribute value][] of `text`.
This `autocomplete` [attribute value][] list includes all allowed types of tokens in the correct order.

```html
<label>Office email<input type="text" autocomplete="section-primary shipping work email"/></label>
```

#### Passed Example 8

This `autocomplete` [attribute value][] only has the required token "bday-day". It remains programmatically identifiable even though it is inappropriate for the control's `type` [attribute value][] "tel".

```html
<label>Birthday day<input name="bdayday" type="tel" autocomplete="bday-day"/></label>
```

### Failed

#### Failed Example 1
Expand All @@ -148,7 +153,7 @@ This `autocomplete` [attribute value][] has an unknown term that is not a [corre

#### Failed Example 2

This `autocomplete` [attribute value][] has the `work` token on a [correct autocomplete field][], however `work` can not be used with `photo`.
This `autocomplete` [attribute value][] has the `work` token which is a [correct autocomplete field][]. However, `work` can not be used with `photo`.

```html
<label>Photo<input autocomplete="work photo"/></label>
Expand Down Expand Up @@ -190,71 +195,64 @@ The `autocomplete` attribute value is on an `input` element that does not have a

#### Inapplicable Example 1

This `button` element does not support `autocomplete` attributes.

```html
<button autocomplete="username"></button>
```

#### Inapplicable Example 2

This `autocomplete` [attribute value][] is empty ("").

```html
<label>Username<input autocomplete=""/></label>
```

#### Inapplicable Example 3
#### Inapplicable Example 2

This `autocomplete` [attribute value][] contains only [ASCII whitespace][].

```html
<label>Username<input autocomplete=" "/></label>
```

#### Inapplicable Example 4
#### Inapplicable Example 3

This `autocomplete` [attribute value][] is on an element that is not [visible][] through `display:none`.

```html
<label>Username<input autocomplete="username" style="display:none"/></label>
```

#### Inapplicable Example 5

This `autocomplete` attribute is on an `input` element with a `type` [attribute value][] that does not support autocomplete.

```html
<label>Username<input type="button" autocomplete="username"/></label>
```

#### Inapplicable Example 6
#### Inapplicable Example 4

This `autocomplete` attribute is on an `input` element that has the `disabled` attribute.

```html
<label>Username<input autocomplete="username" disabled/></label>
```

#### Inapplicable Example 7
#### Inapplicable Example 5

This `autocomplete` attribute is on an `input` element that has the `aria-disabled` [attribute value][] of `true`.

```html
<label>Username<input autocomplete="username" aria-disabled="true"/></label>
```

#### Inapplicable Example 8
#### Inapplicable Example 6

This `autocomplete` attribute is ignored because it is on an element with a [semantic role][] of `none`. The `disabled` attribute is required to ensure [presentational roles conflict resolution][] does not cause the `none` role to be ignored.

```html
<label>Username<input type="text" role="none" disabled autocomplete="username"/></label>
```

#### Inapplicable Example 7

This `autocomplete` attribute is inapplicable because it has the `off` value.

```html
<label>Friend's first name<input type="text" autocomplete="off"/></label>
```

[ascii whitespace]: https://infra.spec.whatwg.org/#ascii-whitespace 'HTML ASCII whitespace 2020/08/12'
[ascii case-insensitive]: https://infra.spec.whatwg.org/#ascii-case-insensitive 'definition of ASCII case-insensitive'
[attribute value]: #attribute-value 'Definition of Attribute Value'
[appropriate field for the form control]: #appropriate-field-for-the-form-control 'Definition of Appropriate field for the form control'
[appropriate field name for the form control]: #appropriate-field-for-the-form-control 'Definition of Appropriate field for the form control'
[correct autocomplete field]: #correct-autocomplete-field 'Definition of Correct autocomplete field'
[disabled element]: #disabled-element 'Definition of Disabled Element'
[html specification for autofill detail tokens]: https://html.spec.whatwg.org/#autofill-detail-tokens 'HTML Autofill Detail, 2020/08/12'
Expand Down
2 changes: 1 addition & 1 deletion pages/glossary/rendered-image-resource.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,4 +13,4 @@ A _rendered image resource_ in a [web page][] is any resource with [visible pixe
[embedded image]: #embedded-image 'Definition of Embedded Image'
[image sources]: https://html.spec.whatwg.org/multipage/images.html#image-source
[visible pixels]: #visible 'Definition of visible'
[web page]: #web-page-html 'Definition of web page (HTML)'
[web page]: #web-page-html 'Definition of web page (HTML)'
Copy link
Member

Choose a reason for hiding this comment

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

As above. Please undo this. Don't want an autocomplete fix to be in the file history.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Sorry, not sure how that's happened.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

@WilcoFiers I managed to get rid of the change in embedded-image file but I'm not sure what is happening here. There is literally no change at all. Do you have any suggestions?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I managed to reverse the updating with origin commit which has caused an issue but there was too much fiddling around with it so decided it would be clearer/ easier to cancel the pr and start from the beginning.