[css-view-transition-1] `visibility: hidden` analogy is misleading, elements remain keyboard-focusable and accessible

[sb3nder]

Hi, The current css-view-transitions-1 draft at point 4.2. View Transition Painting Order, says:

When a Document’s active view transition’s phase is "animating", the boxes generated by any element in that Document with captured in a view transition and its element contents, except transition root pseudo-element’s inclusive descendants, are not painted (as if they had visibility: hidden) and do not respond to hit-testing (as if they had pointer-events: none).

Note: Elements participating in a transition need to skip painting in their DOM location because their image is painted in the corresponding ::view-transition-new() pseudo-element instead. Similarly, hit-testing is skipped because the element’s DOM location does not correspond to where its contents are rendered. However, there is no change in how these elements are accessed by assistive technologies or the accessibility tree.

The issue is that the use of visibility: hidden in the following sentence:

are not painted (as if they had visibility: hidden) and do not respond to hit-testing (as if they had pointer-events: none).

is problematic with this sentence:

there is no change in how these elements are accessed by assistive technologies or the accessibility tree.

because visibility: hidden don't just make the element invisible and not-interactive, it also remove it from the accessibility tree.

Also, visibility: hidden doesn’t reflect how Chrome and Firefox currently preserve element focusability and interactivity, while opacity: 0 combined with pointer-events: none matches their behavior.

---

Related issue:

• https://github.com/w3c/csswg-drafts/issues/9365
• https://github.com/w3c/csswg-drafts/issues/10930

---

Testing links:

• https://codepen.io/sb3nder/pen/QwjmmZy
• https://mdn.github.io/dom-examples/view-transitions/mpa/index.html
• https://mdn.github.io/dom-examples/view-transitions/spa

[sb3nder]

#	visible	accessibility tree	focusable	interactive	example
1	✅	✅	✅	✅	visibility: visible
2	✅	✅	❌	❌~	- (disabled)
3	✅	✅	✅	❌~	- (readonly)
4	✅	❌	✅	✅~	aria-hidden="true"
5	✅	❌	❌	❌	inert
6	❌	✅	✅	✅	opacity: 0
7	❌	❌	❌	❌	visibility: hidden , display: none

[fantasai]

This should go on the agenda by TPAC at the latest, I think.