react-tabbordion
react-tabbordion copied to clipboard
Documentation style: both position absolute and fixed
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;
}
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.