ShareButton's aria-label is interfering with what I really want to say.

[yamanoku]

Nice to meet you! I just found out about this library today 👍🏼

The share button in this library has an aria-label, but I feel that this response doesn't explain enough about what the button is supposed to do.

---

For example, the Twitter share button is converted to the following in demo page.

<button aria-label="twitter" class="react-share__ShareButton Demo__some-network__share-button">
  <svg viewBox="0 0 64 64" width="32" height="32">
    <circle cx="32" cy="32 " r="31" fill="#00aced"></circle>
    <path d="M48,22.1c-1.2,0.5-2.4,0.9-3.8,1c1.4-0.8,2.4-2.1,2.9-3.6c-1.3,0.8-2.7,1.3-4.2,1.6 c41.7,19.8, 40,19,38.2,19c-3.6,0-6.6,2.9-6.6,6.6c0,0.5,0.1,1,0.2,1.5c-5.5-0.3-10.3-2.9-13.5-6.9c-0.6,1-0.9,2.1-0.9,3.3 c0,2.3,1.2,4.3,2.9,5.5c- 1.1,0-2.1-0.3-3-0.8c0,0,0,0.1,0,0.1c0,3.2,2.3,5.8,5.3,6.4c-0.6,0.1-1.1,0.2-1.7,0.2c-0.4,0-0.8,0-1.2-0.1 c0.8,2.6,3.3,4.5,6.1,4.6c-2 .2,1.8-5.1,2.8-8.2,2.8c-0.5,0-1.1,0-1.6-0.1c2.9,1.9,6.4,2.9,10.1,2.9c12.1,0,18.7-10,18.7-18.7 c0-0.3,0-0.6,0-0.8c46,24.5,47.1,23.4, 48,22.1z" fill="white"></path>
  </svg>
</button>

This seems to be the minimum way to ensure accessibility.

But what if you use it in the following way?

<TwitterShareButton title="Please share url !" url="https://example.com" class="Demo__some-network__share-button">
  Please share url !
</TwitterShareButton>.

This would translate to the following.

<button aria-label="twitter" class="Demo__some-network__share-button">
  Please share url !
</button>

What I'm trying to tell you is that the button description exists separately in the button's aria-label and in the internal text.

To make matters worse, the button only reads "twitter" when read out loud by assistive technologies (For example, a screen reader).

---

My suggestions for improvement on this issue are as follows

Remove aria-label from ShareButton.tsx.

Specifically, remove this part.

react-share/src/ShareButton.tsx

Line 221 in 2f8e906

aria-label={rest['aria-label'] || networkName}

This would be a destructive change in code, but I think it would be worse if accessibility checks such as Lighthouse and axe had something in aria-label that on the surface looks fine and goes unnoticed.

I think we should let the developers who use the library think about the button description.

Add notes on aria-label to README.

If it is difficult to make changes to the code, I think it would be a good idea to add a note in the README that aria-label is already set.
If the existing service name aria-label is not enough to explain, you may need to override it with aria-label.

[nygardk]

Fixed in v5