Share Document Modal

[cyberbaloo]

Problematic behavior
Icons displayed with the material-icons class in the interface buttons should not be rendered by screen readers and links do not always have a label.

Expected behavior/code
Decorative icons must be hidden.
The affected elements are the icons in the document sharing modal: the user choice dropdown arrow, the additional options button, the padlock icon and the link copy icon.
When hiding the icon text, ensure that the link has a label.

Steps to Reproduce

1. Do this...
2. Then this...
3. And then the bug happens!

Possible Solution
Add an aria-hidden="true" attribute to elements containing the material-icons class text

Add a label to the link or button using the aria-label="xxxx" attribute

Examples :

<button class="c__button c__button--tertiary-text c__button--small  c__button--icon-only c__button--text" aria-label=”Fermer”><span class="c__button__icon"><span class="material-icons" aria-hidden=”true”>close</span></span></button>

<button type="button" tabindex="0" aria-label="Autorisations" class="sc-1b99f126-1 eXoYVO --docs--drop-button" data-rac="" id="react-aria8085352253-«r4j»" style="touch-action: pan-x pan-y pinch-zoom;" data-focused="true" data-focus-visible="true"><div aria-controls="menu" class="sc-95e747a0-0 gmlfuJ"><div class="sc-95e747a0-0 iimkVR"><div class="sc-95e747a0-0 hHUMoJ"><span class="sc-95e747a0-0 sc-aebf9ca2-0 iimkVR kWNZoH --docs--icon-bg material-icons" aria-hidden="true">lock</span><span class="sc-95e747a0-0 sc-aebf9ca2-0 iimkVR ixewys">Privé</span></div></div><span class="sc-95e747a0-0 sc-aebf9ca2-0 jTwxTt ioLvQc --docs--icon-bg material-icons" aria-hidden="true">arrow_drop_down</span></div></button>

<button class="c__button c__button--tertiary c__button--medium  c__button--with-icon--left"><span class="c__button__icon"><span class="material-icons" aria-hidden="true">add_link</span></span>Copier le lien</button>

<button type="button" tabindex="0" class="sc-1b99f126-1 eXoYVO --docs--drop-button" data-rac="" id="react-aria2206986208-«r4u»" style="touch-action: pan-x pan-y pinch-zoom;" aria-label="Paramètres"><div aria-controls="menu" class="sc-95e747a0-0 iimkVR"><span class="sc-95e747a0-0 sc-aebf9ca2-0 laVoNC ioLvQc --docs--icon-bg material-icons" data-testid="doc-share-member-more-actions" aria-hidden="true">more_horiz</span></div></button>

Additional context/Screenshots