Clicking on checkbox labels on dynamic filter component causes the parent container to briefly get focus

[edwardhorsford]

Description

My service is using the filter a list pattern.

If a user clicks on a label for a checkbox, a border is drawn around the filter component whilst their mouse is down.

Steps to Reproduce

1. Open the filter a list pattern
2. Using a mouse, click on the label for a checkbox (not the checkbox itself)
3. Observe a border appear around the wider filter.

Expected behaviour:

No border should appear

Actual behaviour:

Border appears.

Reproduces how often:
Always

Additional Information

After a little debugging, the issue seems to be because the filter is given tabindex=-1 so that it can be focused when it's opened as a popover on the mobile view. This stackoverflow issue covers a similar scenario.

Essentially, when a user clicks on the label, focus moves away from wherever it was, and up to the next focusable thing - which in this case is the component container. When the mouse is released, the checkbox itself receives focus.

One solution is to make the labels focusable, and to remove their focus styles - this would 'appear' to work - though feels a bit hacky.

On my service I think I may disable focus styles entirely on the filter component - at least on the desktop view. Users can't tab in to the component, so showing visible focus doesn't seem to be essential.

[edwardhorsford]

I came up with a fix - we add a second focusable element inside of the filter, and suppress the styles on it. When checkbox labels are clicked, the second element is what gets focus - but it's transparent to the user. See my pr.