Icons secondary navigation (top / right of the screen)

[cyberbaloo]

Problematic behavior Some icons are decorative and must be hidden from assistive technologies and some do not have a defined focus.

Expected behavior/code Examples : <button type="button" class="sc-1b99f126-1 kjduna --docs--drop-button" data-rac="" id="react-aria4712909330-:r4e:"><div aria-controls="menu" class="sc-95e747a0-0 cvmtrD"><div class="sc-95e747a0-0 bfzAED"><span class="sc-95e747a0-0 sc-aebf9ca2-0 dTRQex cTXYEw --docs--language-picker-text" aria-label="Langue"><span class="sc-95e747a0-0 sc-aebf9ca2-0 ivgwQe ghSZlg --docs--icon-bg material-icons">translate</span>Français</span></div><span class="sc-95e747a0-0 sc-aebf9ca2-0 wuQWg ibUMXe --docs--icon-bg material-icons">arrow_drop_down</span></div></button>

Possible Solution Hide icons with an aria-hidden="true"

Add a lang="en" attribute to the term "English" and a lang="de" attribute to Deutsch This attribute allows screen readers to correctly pronounce the terms. The language dropdown menu should only be keyboard accessible once, not twice.

The focus disappears when on the next button.

The dropdown menu behavior is not rendered as a dropdown menu as seen on screen. Remove the aria-labelledby