Dropdown styles for language and year switcher

[sudheendrachari]

Fixes: #986
Intent: Redesign of year and language switcher

Major Changes:

• Introduce two new macros 'styled_lang_dropdown' and 'styled_year_dropdown'
• Existing DOM structure is retained and logic to generate those have been moved into
  'native_year_dropdown' and 'native_lang_dropdown'
• Existing select-and-option structure will be used for mobile view where native dropdown picker of the
  OS will be used

UI/UX details:

• The button which triggers dropdown will look attached to the dropdown that comes up
• Dropdown list will be aligned to the left edge of button if the entire dropdown content can fit into the
  viewport
• Else, Right edge of Dropdown list will be aligned to the right edge of button
• Chevron in the button will animate to a check mark when the list is opened
• On hover of the items in dropdown menu, its background color and font color will change

Testing:

• Manually verified the behaviour of both the switchers
• Verified that options are keyboard focusable (Once menu is open the list items are Tab-able,
  clicking Tab on last option navigates out of the list to the next focusable element)
• Verified that options are reachable via screen reader also

Demo:
Mouse and Keyboard: https://drive.google.com/file/d/15-BA8r5e8QbaSi5MiuvZ4Q18L0wYzzlE/view
Voice-over: https://drive.google.com/file/d/17wkCvS7lISqwDVHXlBbsZXUDwHdL7LIx/view

[rviscomi]

Love this feature! I left some style suggestions in my review.

Also, please test the positioning logic on the footer buttons. Looks like there's some alignment issues:

[tunetheweb]

Very nicely done!

However appears broken on mobile:

Also I feel like Esc, up, down arrow keys and space should also be supported for interacting with the menu - like they are for native select.

[tunetheweb]

This is looking pretty good now. Just a few more changes required.

[tunetheweb]

This is looking really nice now.

A few things I've spotted (some of these might be in the "nit" category!):

More noticable in Chrome 86 (thanks to the focus-visible change), Firefox and Safari is that the border is split - the button is yellow, but the button drop down is white which breaks the illusion of it being one menu item. Is it possible to make it all yellow when button is in focus?

On a similar note there's a small, one-pixel gap between the borders. Is it possible to close this gap?

The keyboard focus ring is a bit hidden when first menu item is focused due to z-index changes:

Also not loving use of z-index to be honest but can understand why you have done it. Not sure if there is a a better way that would solve above and avoid using z-index?

[tunetheweb]

Maybe we should just accept the white border in the bottom instead of trying to fake this? That would avoid needing to use z-index and so also solve the focus-ring problem, and maybe the yellow/white border difference is less noticeable and so acceptable?

Another thing I've noticed is that pressing up on the top item cycles right to the bottom. This kind of makes sense but acts weird on Year switcher where there is only one item. Should we include the button (i.e. the current selection) as an option in the arrow key cycle up and down?

[sudheendrachari]

The one pixel gap, is because of the way we wanted it to look like a single polygon and do not want white border between button and menu list, and hence the cover up with gray bottom border for button (and z-index is required because list is absolute positioned)
@rviscomi What are your thoughts on this pixel gap and also about Barry's idea about changing border color to all white
@bazzadp I am little unsure if we should include button itself in list where focus is trapped and that is my initial reason to not include that arrow down keydown handler to open from button because even though visually we want them to look like single polygon, a11y wise it might be confusing to jump out of the list and jump into it again. Basically i wanted to trap focus only in the list

[tunetheweb]

@bazzadp I am little unsure if we should include button itself in list where focus is trapped and that is my initial reason to not include that arrow down keydown handler to open from button because even though visually we want them to look like single polygon, a11y wise it might be confusing to jump out of the list and jump into it again. Basically i wanted to trap focus only in the list

Yeah can see that rational. Ultimately we need to decide if we want this to look and act like a single list or not. At the moment we have a kind of halfway-house. And remember A11Y is not just about blind people - sighted keyboard users could easily be confused if it looks like one list but then doesn't act like one. Personally I think add the white line to clearly differentiate between the menu and the button and solves most of these problems. It's still a small problem for the year selector since it only has one value at the moment - it will be clearer in future when there are more values and maybe we just take the hit until then. Or perhaps add a "Help Contribute" link like the "Help Translate".

[tunetheweb]

Noticed we've got some duplicate ids with this, so suggested a couple of changes to solve this. May want to rename mobile to mobile-header too for consistency.

Could you also merge the latest main branch into this branch as there are a couple of changes since this branch was started that will lint the generated HTML which would have caught this?

[tunetheweb]

Oh and one more thing I noticed is in the footer when the menu opens upwards instead of downwards the bottom border is white instead of yellow:

Sorry for discovering these one by one - it's quite a bit change all in all!

[sudheendrachari]

Thanks @bazzadp for helping with the rebase issue for this branch
Have addressed duplicate id issue and added yellow border when list is open

[tunetheweb]

LGTM! Great job and thanks for being so patient through all the feedback!

[rviscomi]

This is so well done, thank you @sudheendrachari! 🏆

I just have two small keyboard usability comments about the footer.