[Header] No-js behaviour for locale selectors

[ludoboludo]

PR Summary:

Adding the locale selector for the no-js behaviour in the header

Why are these changes introduced?

Fixes #2262

What approach did you take?

In the original PR, the no script behaviour was there at first so I re added it with some extra styling tweaks.

Other considerations

Visual impact on existing themes

Visual impact only on the no JS environment which is a very niche use case.

Testing steps/scenarios

• Make sure the locale selectors are enabled in the header
• then disable JS in for your browser tab/window and make sure the local selectors are still coming up and working as expected. (To disable JS in chrome, you can right click on the page then Inspect, click on the settings wheel in the inspect tool, scroll all the way to the bottom and find the Debugger > Disable JavaScript

Demo links

• Store
• Editor

Checklist

• Added PR summary for release notes
• Requested review from UX (Only for changes that are affecting the experience or perceivable visual details)
• Created a ticket for the help.shopify.com documentation team about updates to theme settings. (Internal-only task)
• Followed theme code principles
• Linted with Theme Check
• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility

[stufreen]

LGTM. It really makes the header big, but it works!

[stufreen]

Why h2 and not a label?

[ludoboludo]

Reusing the approach from the footer and also what's in the JS approach. I believe the reason why is because it helps navigate to it more easily when using a screen reader and using the VoiceOver rotor which shows you all the page's headings.

[stufreen]

Non blocking but just curious: do you know why no-js-hidden was on the inner div before?

[ludoboludo]

I'm not sure tbh. If I left it the way it was, I'd get some unwanted space around the selectors. It's like that in the footer, so I think it was mostly copied over.
I can't really think of a reason why it wouldn't be on the parent 🤔

[eugenekasimov]

The arrow buttons inside of the selector container are not clickable. Although UX in general isn't great without JS this small issue might be worth to fix. 🤔
Here is a video.

[ludoboludo]

Yeah I've noticed this too @eugenekasimov. I think it's ok as is. It's the same behaviour we've had for the locale selectors in the footer. 🤷

[melissaperreault]

Thanks Ludo!

Not a blocker

• I did find the selectors pretty wide but I guess this is due to the longest option in the list. The only thing I noticed is that the focus is shorter compared to the component's width (Visual reference)