Accordion item label keyboard focus not visualized on FF and Safari about cssui HOT 4 CLOSED

Would try this and let you know. If works, I'll include it in the next hotfix release. 🙌

from cssui.

Hi @syndicatefx, thanks! I really appreciated 🙂

I tested your solution, but it seems that removing the overflow: hidden makes the :focus outline span across multiple [data-accordion-item] - tested on Safari 15.1 (see attached screen)

Did you get the same result?

from cssui.

Hey, nope not happening on my side, but i am using Safari 15.3

from cssui.

A workaround to avoiding those bizarre behaviors in Safari would be using outline-style: solid, and remove overflow: hiddenfor good.
Something like this:

  /* Accordion Item's Label Focus State */
  [data-accordion-item] > input:focus + label  {
    outline: 2px solid #101010;
    outline: 2px solid Highlight;
    outline: 2px solid -webkit-focus-ring-color;
  }

Thus keeping keyboard :focus styles visible on Firefox and Safari

from cssui.