Languages menu in Orange navbar burger menu : design + accessibility

[isabellechanclou]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

Design issue:
In the DSM + in Boosted docs and examples, specifications for adding a language menu in a supra bar positioned above the Orange navbar component is documented for desktop screens. Now, coming to the corresponding mobile layout, it's not that clear:

• In the Orange navbar "Responsive behavior" section, we can see that the languages menu from the supra bar lands in the burger menu, all languages in a same line.

  

• In the Orange navbar, we can find dropdown menus (for choosing a version of Boosted, for choosing dark or light mode). In the burger menu, they still are displayed as dropdowns.

  

So, we could wonder if in small screen how the language menu should be display in the burger menu between these two possibilities:
1-

2-

• Moreover, confusion is added by the different ways encountered on different Orange websites for displaying languages. Quite often they are displayed as a dropdown or a select component in the Orange navbar (and not in the supra bar) for desktop, and for small screens, it can stay the same as the desktop display or be i then burger menu, all languages on a same line.

=> So, the rule to apply for the display of languages in desktop and in small screen would benefit to be more precised, indicated and illustrating what is/are the allowed variant(s) in the DSM and in Boosted.

Accessibility issue:

• In the burger menu, with the languages displayed in the same line, the selected language is indicated only by its color (orange instead of white), which is not enough regarding accessibility. There should be an alternative indicator for user who don't perceive colors properly. Proposal of correction : adding an orange line below the selected language:

  

Reduced test cases

N.A.

What operating system(s) are you seeing the problem on?

Windows, macOS

What browser(s) are you seeing the problem on?

Chrome, Firefox

What version of Boosted are you using?

latest v5.3.x