Skip to content

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

@sb3nder

Description

@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).

can't coexist 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:


Testing links:

Metadata

Metadata

Assignees

No one assigned

    Labels

    Agenda+Agenda+ TPACa11y-trackerGroup bringing to attention of a11y, or tracked by the a11y Group but not needing response.css-view-transitions-1View Transitions; Bugs only

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions