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

[Ovgodd]

Hello @cyberbaloo,

I'm reviewing old issues to clean them up :D.
I believe some of them have already been resolved in one or more PRs.

For this Issue :

Lang attribute → I submitted an improvement proposal in the BlockNote library, which has been merged here: BlockNote.js #1937 and this is now live on our side.

(FR for fr etc)

Decorative icon → This has been handled in our project in PR #1404
, but it hasn’t been released yet.

Dropdown menu and focus → Already addressed in PR #1244.

top right icon :

[krisztin]

Sorry to butt in but:

Re: lang attribute

It would be better to:

1. Remove the aria-label from each language button
2. Add lang attribute to the <span> with the language option

<button role="menuitem">
  <span lang="fr">
  Français
  </span>
</button>

Explanation

• Aria labels don't really interact with the lang attribute so they will not be announced in the right language by a screen reader
• An aria-label overwrites all other content within an element i.e. if you have a button with an aria-label and text inside it, only the aria-label will be announced by screen readers
• If an aria-label doesn't match the visible label then voice control software will not work properly. As in, the visible label is "French" and the aria-label is Français then a user with voice control, who is going to be trying to interact with the visible label of French and hence say "select French" will not be able to do so as the control's actual name is Français
• From a maintainability standpoint it's best if you only have to change a value at one point if/when changes need to be made there's also less chance for an error.