Tabs highlight in mobile

[bembelimen]

On mobile view the tabs morph very nice to a stacked view. I found one issue: When you open a tab by clicking it, it becoms a highlight with the :after pseudo-tag:

But when you click again to close it, the highlight stays (as the aria-expanded="true" is not removed)

CC @dgrammatiko for the knowledge CC @chmst for accessibility

[dgrammatiko]

But when you click again to close it, the highlight stays (as the aria-expanded="true" is not removed)

This is tricky, the state is reflected/synced to the aria-selected so removing it means we can't reopen the pane. Also minimizing the pane and then resizing to reveal the tabs we have to select a tab (again from aria-selected). In short, the accordion buttons probably should use a class for the selected state or a combo that checks if the next element is hidden (I prefer this as it's only css changes)

This works for all except the first one :(

joomla-tab-element:not([active]) ~ button[aria-expanded="true"]::after {
  all: inherit;
}