Accessibility: Vue & Jest-Axe: Buttons must have discernible text. How can we add a button name/ aria-label if the child content comes through a slot?

Question

I have been trying to improve my project in terms of accessibility, so I decided to add some ESLint rules from vuejs-accessibility and install Jest-Axe.

When running accessibility tests on my button components Jest-Axe prompted me that Buttons must have discernible text and started looking into it and I am kinda stuck, as I am using <slot /> to pass content dynamically to my buttons, and this content can me in form of a rich-text or other text compoments that I currently have.

Is there a way that I can make the incoming content available for the screen readers? Would a nice solution be to just write "Press Button" as a hint?

Answer 1

If you're using jest-axe and Vue Test Utils you can add content to the slots yourself

mount(Button, {
  slots: {
    default: 'Main Content'
  }
})