[csswg-drafts] paradox issue when "tabindex" is used together with "display: none/contents" or "visibility: hidden"

Zhang-Junzhi has just created a new issue for https://github.com/w3c/csswg-drafts:

== paradox issue when "tabindex" is used together with "display: none/contents" or "visibility: hidden" ==
Generally speaking, an element that does't generate a box or generate an invisible box shouldn't participate in sequential focus navigation.

And I've tested Firefox and Chrome, and found no interoperability issue in this regard(Both of them work this way).

But in some cases a designer might want to focus such an element, I encountered this kind of issue.

I was writing a menu with menuitems in multiple levels, each menuitem is designed to be focusable by tab, and I wanted to show or hide a menuitem based on whether it's focused and its parent is hovered.

```
.level-1-menuitem
{
 display: none;
 ...
}

.level-1-menuitem:hover,
.level-1-menuitem:focus,
.level-1-menuitem:has(.level-2-menuitem:focus)
{
 display: block;
}
```

However, as mentioned above, this doesn't work, browsers(at least the two mainstream browsers) just ignore `tabindex` on any hidden menuitems.

I have no clue how to resolve this issue elegantly, and since `tabindex` is on the HTML side, I don't even know where is the more appropriate place to file this issue, so I decide to file the issue on both the two projects. Hope you won't mind it.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3015 using your GitHub account

Received on Monday, 13 August 2018 17:09:42 UTC