vue-a11y/eslint-plugin-vuejs-accessibility

[heading-has-content] fails when Vue component is being used inside

cletter7 opened this issue · 7 comments

cletter7 commented

In our project we translate website into multiple languages and we use a special Vue component instead of a text node inside heading tags. Example:

<h1>
  <Trans tag="hello_world">
</h1>

which in English renders as:

<h1>
  Hello world!
</h1>

The plugin complains about it:

error Headings must have content and the content must be accessible by a screen reader vuejs-accessibility/heading-has-content

Is there a way to implement some exception for specifying which components are allowed to be used inside headings?

vhoyer commented

This indeed seems like an oversight from the lint rule 🤔

Could you open a PR for this? We could add an array of allowed components.

rchl commented

I'd like to sneak in what I think is a relevant issue:

In my case, I'm using v-t directive on the element with no explicit content. It has the same purpose - to set the element's text to the translated string. This also complains while it shouldn't.

  • 👍1
vhoyer commented

In that case we should check the v-html too

rchl commented

And v-text.
But while it would make sense to have v-html and v-text included by default, I guess other should be an option on the rule.

  • 👍1
vhoyer commented

That also crossed my mind, thanks for mentioning haha

kddnewton commented

I think it makes sense to have exceptions here though, I can bake that in

  • 👍3