-
Notifications
You must be signed in to change notification settings - Fork 76
Handle content-visibility
and hidden="until-found"
#1903
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
base: develop
Are you sure you want to change the base?
Changes from all commits
e1850c8
4175046
262192a
4ea79c8
c5cc68a
d88140e
12e5445
65d769f
de44ec9
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -170,12 +170,28 @@ This `role` attribute is only [ASCII whitespace][]. | |
|
||
#### Inapplicable Example 5 | ||
|
||
This `role` attribute is specified on an element which is [programmatically hidden][]. | ||
This `role` attributes is specified on an element which is [programmatically hidden][]. | ||
|
||
```html | ||
<div aria-hidden="true" role="banner">Some Content</div> | ||
``` | ||
|
||
#### Inapplicable Example 6 | ||
|
||
This `role` attributes is specified on an element which is [programmatically hidden][]. | ||
|
||
```html | ||
<div hidden role="banner">Some Content</div> | ||
``` | ||
|
||
#### Inapplicable Example 7 | ||
|
||
This `role` attributes is specified on an element which is [programmatically hidden][]. | ||
|
||
```html | ||
<div hidden="until-found" role="banner">Some Content</div> | ||
``` | ||
Comment on lines
+179
to
+193
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think I'd prefer these test cases in different rules. This rule is has been somewhat contested. How about adding the |
||
|
||
[ascii whitespace]: https://infra.spec.whatwg.org/#ascii-whitespace 'Definition of ASCII whitespace' | ||
[html or svg element]: #namespaced-element | ||
[implicit role]: #implicit-role 'Definition of Implicit Role' | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -8,15 +8,29 @@ input_aspects: | |
- DOM tree | ||
--- | ||
|
||
An HTML element is _programmatically hidden_ if either it has a [computed][] CSS property `visibility` whose value is not `visible`; or at least one of the following is true for any of its [inclusive ancestors][] in the [flat tree][]: | ||
An HTML element is _programmatically hidden_ if any of the following is true: | ||
Jym77 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
- has a [computed][] CSS property `display` of `none`; or | ||
- has an `aria-hidden` attribute set to `true` | ||
- the element has a [computed][] CSS property `visibility` whose value is not `visible`; or | ||
- at least one [ancestor][] of the element has a [computed][] CSS property `content-visibility` of `hidden`; or | ||
- at least one [inclusive ancestors][] of the element has a [computed][] CSS property `display` of `none`; or | ||
- at least one [inclusive ancestors][] of the element has an `aria-hidden` attribute set to `true` | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Not new to the PR, we could open a separate issue, but this is incorrect I think. If you use aria-owns to grab a node that has an ancestor with aria-hidden, that node itself isn't hidden. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yes, that's also the conclusion that was reach in this ARIA PR. I'm recording that in #1991 . |
||
|
||
**Note**: Contrary to the other conditions, the `visibility` CSS property may be reverted by descendants. | ||
[Ancestors][ancestor] and [inclusive ancestors][] are considered in the [flat tree][] for this definition. | ||
|
||
**Note**: The [HTML standard suggests](https://html.spec.whatwg.org/multipage/rendering.html#hidden-elements) setting the CSS `display` property to `none` for elements with the `hidden` attribute. While not required by HTML, all modern browsers follow this suggestion. Because of this the `hidden` attribute is not used in this definition. In browsers that use this suggestion, overriding the CSS `display` property can reveal elements with the `hidden` attribute. | ||
#### Assumptions | ||
|
||
This definition assumes that `content-visibility: auto` is treated the same way as `content-visibility: visible` for accessibility purposes (notably for inclusion in the accessibility tree). | ||
|
||
#### Background | ||
|
||
Contrary to the other conditions, the `visibility` CSS property may be reverted by descendants. | ||
|
||
The [HTML standard suggests](https://html.spec.whatwg.org/multipage/rendering.html#hiddenCSS) setting the CSS `display` property to `none` for elements with the `hidden` attribute set to the `hidden` state; and the CSS `content-visibility` property to `hidden` for elements with the `hidden` attribute set to `until-found`. While not required by HTML, all modern browsers follow this suggestion. Because of this the `hidden` attribute is not used in this definition. In browsers that use this suggestion, overriding the CSS `display` or `content-visibility` properties can reveal elements with the `hidden` attribute. | ||
|
||
Using `content-visibility: auto` is meant to allow the user agent to delay styling and painting the content until it is needed, thus saving an CPU usage (for example, when showing a very long list of items such as a news feed). However, the content must still be considered for search in page, tab order, … which make it needed. This mostly implies that the content must also be exposed to assistive technologies as normal. But in turn, if the content is only styled and laid out for assistive technologies, it means that the rendering time depends whether the user uses some; which open a "time attack" channel for malicious authors to detect user with disabilities… For this reason the draft specification has a caveat about [accessibility implications][] allowing the user agent to **not** expose such content in some case. The assumption states that the definition should not be used when such a case triggers. | ||
|
||
[accessibility implications]: https://w3c.github.io/csswg-drafts/css-contain-2/#cv-a11y | ||
[ancestor]: https://dom.spec.whatwg.org/#concept-tree-ancestor 'DOM Definition of Ancestor' | ||
[computed]: https://www.w3.org/TR/css-cascade/#computed-value 'CSS definition of computed value' | ||
[flat tree]: https://drafts.csswg.org/css-scoping/#flat-tree 'Definition of flat tree' | ||
[inclusive ancestors]: https://dom.spec.whatwg.org/#concept-tree-inclusive-ancestor 'DOM Definition of Inclusive Ancestor' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Until this is better supported I don't think we should add this. This example fails in Firefox and Safari. I think its better to use hidden=until-found here. If you wanted to pass in Chromium you'd still need to support content-visibility, but the example wouldn't be a failure in browsers that don't support it yet. What's also neat specifically about using it in this rule is that there's nothing to be found here, so this couldn't become a visible image through some user action.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
hidden="until-fonud"
also seems to have poor support: MDN browser compatibility.I guess it's best to just park this until there is better support…