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?

Could you provide a code sample of your button component that jest-axe is reporting the issue on? — Steven Lambert, May 05 '22 at 16:26

score 0 · Answer 1 · answered Nov 01 '22 at 13:44

0

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

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

answered Nov 01 '22 at 13:44

Gezzasa

1,443
8
17

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?

1 Answers1