reimplement locale menu with focus[-within] styles

[cfm]

I think there are better ways to do HTML only dropdowns now compared to this checkbox hack. Firstly, you can use tabindex (or a focusable element like anchor) and :focus/:focus-within styles to design a dropdown (Refs: https://css-tricks.com/solved-with-css-dropdown-menus/). But there is an even smarter way, that is using <details> and <summary tag that has the accordion behaviour already. And an accordion is just few CSS away from a dropdown (https://css-tricks.com/using-details-for-menus-and-dialogs-is-an-interesting-idea/)

Honestly though, semantically, I think the first option makes more sense, but some have been using the second way. I understand this might be beyond the scope of this PR, but I feel this hacky solution should be changed soon.

Originally posted by @SaptakS in #6041 (comment)

[eaon]

Unfortunately I missed looking into this when I worked on #6315, but I looked at it now and just thought I'd note that I'm not convinced that :focus-within provides us with the functionality we want. Maybe I was to quick in going over this/testing stuff, but at least in the references @SaptakS shared, :focus-within would force users to tab through all the language links before they get to the main content. The checkbox solution requires an active interaction before language links even become available.

<details> and <summary> would allow us to do that too, but I also feel they're semantically distinct enough to make me prefer the checkbox solution.
That being said, how screen readers treat <details> and <summary> and whether this is a common pattern out there already would have an impact on my view here.