Accordion item label keyboard focus not visualized on FF and Safari

[Paulo Nunes]

Hi @zetareticoli, first of all nice work!

The accordion item label focus outline, using keyboard navigation, is not displaying properly on Firefox and Safari.
I'm using latest versions on MacOS, but i´m sure the issue persists on Windows too.
The problem seems to be the overflow: hidden here:

[data-accordion-item] {
  width: 100%;
  overflow: hidden;
}

Removing overflow: hidden fixes this issue. I'm not sure why you are using overflow here.
Can you confirm this?
Thanks.

[Francesco Improta]

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?

[Paulo Nunes]

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

[Paulo Nunes]

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

[Francesco Improta]

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