search

vue-a11y / eslint-plugin-vuejs-accessibility

An eslint plugin for checking Vue.js files for accessibility
https://vue-a11y.github.io/eslint-plugin-vuejs-accessibility/
MIT License
254 stars 27 forks source link

[Bug] anchor-has-content fires when an anchor contains a child div using v-html #191

Closed richardtallent closed 2 years ago

richardtallent commented 3 years ago

We're using the v-html attribute to give an anchor its readable contents, but the plugin is only looking for anchors to contain a child element that has inner text.

When an anchor uses v-html or any of its child elements do, that should count as readable content. (Sure, the v-html might return a blank value, but so can a template {{ variable }}).

chuckmah commented 2 years ago

I experienced the same

kddnewton commented 2 years ago

Can one of you attach the source file that's not working? This test line: https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/blob/main/src/rules/__tests__/anchor-has-content.test.ts#L9 I believe covers what you're talking about, so I need a snippet that violates to reproduce.

richardtallent commented 2 years ago

The problem arises when the v-html is part of a child node rather than the anchor itself. Here's a minimal test case:

<a href="http://google.com">
    <span v-html="googleLabel" />
</a>

For my real-world use case, my anchor tag has both an icon and a label, the label div has the v-html attribute..

kddnewton commented 2 years ago

Ahh!! I see. I will get this fixed, thanks for the repro!