Accordion: no focus feedback on the expanded element

[Omar Muscatello]

When the user clicks on the tab header of the accordion, there's no focus feedback.

This happens because the focus is captured from the hidden checkbox which stores the state of the tab (expanded/collapsed).

[Francesco Improta]

We could use the siblings selector ~ to add a focus state to <label>.

Actually we use this:

[data-accordion-item] > input:checked + label  {
  --accordion-title-color: var(--cssui-gray-darkest);
  --accordion-title-background: var(--cssui-gray-lighter);
}

Are you thinking to style the :focus on the label?

[Omar Muscatello]

Thank you for the suggestion. I ended up using the same approach already applied to the tabs component. Thinking better about that, the focus feedback should be displayed only if the user is navigating using the tab key (again, the same approach used in the tabs component).

[Francesco Improta]

@omaxel Could I close this issue for the upcoming release?

[Omar Muscatello]

Yes sure, this issue is now solved by PR #25.