Skip to content

[selectors] Adding a :heading() selector for headingoffset? #10296

Open
@keithamus

Description

@keithamus

whatwg/html#5033 proposed to add a new attribute (now called headingoffset) which can offset a containers exposing heading level by a given amount, for example <div headingoffset=1><h1></h1></div> renders a heading with a level 2 (1+1 = 2) in the accessibility tree.

This begs the question if it's possible to somehow correctly style elements according to their computed offset. Given headingoffset is accumulative (it does a flat tree walk) it can be quite difficult to appropriately select for such combinations.

So, here I am, proposing a pseudo selector to allow for selecting the computed heading level. I propose :heading(n) as a selector for heading elements exposes as level n. An <h1> (with no headingoffset parents) would then be selectable as either :heading(1) or h1, but for example <div headingoffset=1><div headingoffset=2><h1></h1></div></div> would be selectable as :heading(4) (1+2+1 = 4).

I want to stress that I am of the opinion that aria-level or role=heading should not impact :heading(); they are readily selectable today and I don't think aria should have that dramatic an impact on other selectors.

I think it would be really helpful for us to consider adjusting the UA stylesheets such that the existing for styles like h1{} are extended to h1, :heading(1){}. I know this looks scarily like the old document outline but as headingoffset is both explicit and opt in, I'm confident this doesn't introduce the same issus as document outlines.

Thoughts?

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    Status

    Thursday Morning

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions