Fix for focus appearing on mousedown of checkbox labels

[edwardhorsford]

Context

Quick for this issue. Because the filter has tabindex="-1", it briefly gets focus each mousedown on a checkbox label.

My fix involves having a second focusable element inside the one we already have. That element has focus styles suppressed. When a user clicks on a checkbox label, it receives focus, but nothing visually changes. When they release their cursor, the checkboxes are focused as normal.

As that second element has tabindex="-1" users can't normally tab in to it. As our main filter has normal focus styles, it looks correct when the popover is opened.

Before

After

Note I've raised an issue upstream with the MOJ design system about the issue.

Other changes

I fixed the incorrect focus styling on the filter component.

[adamsilver]

Nice one - but the focus styles are needed for small screens.

Can you make sure the focus style works there and maybe only include the tabindex on that.

Bear in mind that the MOJ JS component can be configured to toggle the filter on big screens regardless. So the inclusion of the tabindex should be based on this too and not just screen size (matchmedia).

[edwardhorsford]

@adamsilver updated with my revised solution - the wider component can now show correct focus styles - but you won't get a weird flash when users click the checkbox.

[duncanjbrown]

LGTM — one comment re comments!

[duncanjbrown]

No need for this comment here or in the CSS — GitHub's merge commit will include the PR reference & we'll be able to get back to it from the diff. Possibly the rationale ought to go into the commit message.

[edwardhorsford]

@duncanjbrown normally I'd agree - but in this case I think what I'm doing is unexpected and it might be helpful to note this is intentionally weird.

[duncanjbrown]

As you like!