html - How to fix "name property of a focusable element must not be null"

Question

Im using UI accessibility insights to test my react app on windows. I get a lot of "name property of a focusable element must not be null" and a lot of "focusable sibling elements must not have the same name and localizedcontroltype" errors. I have no clue how to fix these errors, and i can't find anything decent in google. To solve the first one i tries adding the name ot id or aria-label attr to the buttons, but nothing changed. Any idea on how to get around this?

example of button that's failing the test:

 <button
   className={css.button}
   onClick={() => setIsTipOpen(!isTipOpen)}
 >
  <Icon type='Girl'/>
</button>

Answer 1

Screen readers need to be able to announce something to their users. The problem with an icon in a button is there is no way to programatically determine the button text.

One way to fix this is to add an aria-label to the button element.

Another way to do this is visually hidden text. This is text that is not visible but still accessible for screen readers.

In the below example you will see there is no visible text (as it should be an icon inside) but a screen reader user would hear "button, A girl", just make sure the button text makes sense as an action (so I assume this button would be "gender female" or something).

Visually hidden text is preferable as for people who use text only browsers the text within the button is still displayed (as CSS is ignored in a text only browser) and support is 100% all the way back to IE6 (whereas aria-label support is not 100%).

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

.your-button-classes{
   width: 100%;
   height: 50px;
   background-color: #333;
   
}

<button
   class="your-button-classes"
   onClick="someAction"
 >
  <Icon type='Girl'/>
  <span class="visually-hidden">A girl</span>
</button>