Make filter pills keyboard accessible

[Bargs]

Fixes #12639

It's now possible to tab to each filter's actions and interact with them via the keyboard.

In order to get the actions to show/hide on both mouse hover and action focus I had to create a new filter-pill component that could manage a bit of state to track whether the user was interacting with a given pill or not.

[aphelionz]

Looks good!

[timroes]

The actual focusing works fine. I just noticed, that we don't have any issue yet, that none of that buttons has any text/label/name, meaning you can now focus them, but a visual impaired user would still not be able to use them at all.

Should we fix that issue directly with this PR and add aria-labels to all of them?

[Bargs]

Great point @timroes, we might as well add those in this PR. Is aria-label the only thing we need to add or are there other attributes? These icons confuse regular users as well, I could add a title attribute, but I've read that's often discouraged.

[Bargs]

jenkins, test this

[Bargs]

jenkins, test this

[timroes]

I think to make the meaning more clear to seeing users, our current approach would be to add a hover tooltip to it (same as e.g. in the collapsed main navigation). You could give each of that tooltips a unique id attribute and put an aria-labelledby to the button, that references that id, so the content of the tooltip will automatically be used as a label for the button. I would also add aria-hidden="true" to the tooltip in that case, so you would prevent screen readers from also navigating over the tooltip, which might cause (depending on DOM order) strange behavior like: Negate filter, button -> next element -> Negate filter -> next element -> ...

[Bargs]

That sounds awesome, but maybe a bit more than I want to bite off in this PR 😅

I'll just add the aria-labels for now, and create a new issue for the tooltip enhancement.

[Bargs]

@timroes I added the aria-labels

[timroes]

LGTM