CODEWITHSUNDEEP
react-bootstrap
thousight
thousight

Reputation: 1154

React-Bootstrap add aria-label to SafeAnchor

React-ally warns me that I need to add an aria-label to SafeAnchor, which is a child of NavItem in React-Bootstrap and is the element that triggers the warning. I only called NavItem in my code, but is there a way that I can add the aria-label to SafeAnchor so that I can get rid of this warning? Thanks.

Upvotes: 0

Views: 1474

Answers (1)

Tieme
Tieme

Reputation: 65379

Checkout the source of NavItem https://github.com/react-bootstrap/react-bootstrap/blob/master/src/NavItem.js#L65

Here's the relevant part:

...
return (
  <li
    role="presentation"
    className={classNames(className, { active, disabled })}
    style={style}
  >
    <SafeAnchor
      {...props}
      disabled={disabled}
      onClick={createChainedFunction(onClick, this.handleClick)}
    />
  </li>
);
...

As you can see it's directly passing it's props to SafeAnchor. This allows you to pass the the aria-label right in. 

<NavItem
  // your other props.. 
  arial-label="Nav link to ..."
/>

I haven't tested this but it should work. Just tested and it works!

Upvotes: 1

Related Questions