RAC: Menu component focus-visible behavior (inconsistent?)

[amitdahan]

In our project we try to normalize :focus-visible styles with an explicit (over browsers' default outline) style, and when using RAC we ofc use [data-focus-visible] instead.

We normalize it this way:

:focus-visible:where([data-rac]) {
  outline: none;
}

:focus-visible:where(:not([data-rac])),
[data-focus-visible] {
  outline: red solid 2px;
}

This mostly works well and lets us not have to define custom .component[data-focus-visible] styles for each of our components, and only customize when we need to tweak the default style.

Also, we don't have to outline: none in every possibly focusable DOM node while developing new components to counteract the default/our own :focus-visible styles (and fight specificity races).

While doing this, we noticed some inconsistency with using <Menu>:

When triggering the menu via mouse:

In this case, the <div role="menu"> DOM node gets :focus-visible (not entirely sure why actually?), and nothing else has [data-focus-visible] (probably expected? since we interacted via mouse?).

And since <div role="menu> doesn't have the data-rac attribute - it uses our default :focus-visible (or the browser's) style.

When triggering the menu via keyboard:

In this case, the first <div role="menuitem"> gets both :focus-visible and [data-focus-visible], while also including the data-rac attribute, so it is properly styled.

Repro

https://codesandbox.io/p/sandbox/pensive-germain-q68z48?file=%2Fsrc%2FApp.js%3A24%2C19

Questions

1. Can we rely on [data-rac] as we did for having default [data-focus-visible] styles applied? Since Menu component doesn't have those, but I think a few other components like Section also do not have it.
2. Why does triggering the menu via mouse even apply :focus-visible on the <Menu>? Is this one of those inconsistent browser behaviors? Or a possible RAC bug?
3. Is there a better/more reliable way we can apply a good default that would apply global [data-focus-visible] styles, but also cancel out :focus-visible styles on RAC components?

[snowystinger]

data-rac comes from our use of renderProps, but I think an argument could be made for it also being at the top level of any component, in which case Menu is just missing it.

[amitdahan]

Would you accept a PR that does that?

[snowystinger]

sure 👍🏻 thanks!