Badge notification redundant announcement

[niekderksen]

In the Badge → notification component a screenreader will read all the elements seperately, resulting in redundant announcements.

For example: "3 unread messages" (from the aria-label on <button>) and "3" (from the <span>).

---

I'd restructure this component:

<button class="notifications">  
  <svg aria-hidden="true">...</svg>
  <span>3</span>
  <span class="sr-only">unread messages</span>
</button>

This way:

• the svg is still hidden
• "3" is visible
• "unread messages" is visually hidden (.sr-only)

The <span> on "3" allows for styling attributes.

[markteekman]

Thanks @niekderksen! 😊