Documentation style: both position absolute and fixed

[kimgysen]

Why is there both position absolute and fixed here?

[data-state="tabbordion"] {
    clip: rect(0 0 0 0);
    height: 1px;
    position: absolute;
    position: fixed;
    width: 1px;
    z-index: -1;
}

[Merri]

It is a rule I probably should've re-thought about years ago, but the background is that the original HTML + CSS structure of these tabs worked even as far back as Internet Explorer 6, which did not have support for position: fixed;. And when I ported to React some five years ago I simply kept the rule.

There is a slight difference between these two style rules when it comes to native browser functionality: with position: absolute; it is possible that browser scrolls automatically to the location of the visually hidden checkbox. With position: fixed the element is always in viewport and no automatic scrolling will occur, but this might not be desirable for accessibility reasons. So position: absolute might actually be the better rule to use.

With modern conventions the name for this style would either be .visually-hidden or .sr-only (screen reader only). This is one of the things I'm addressing with v2, leaving that as an implementation detail for the user - and they can choose what final HTML structure use, with pros and cons listed for each structure that is possible with tabs.