vue-a11y/eslint-plugin-vuejs-accessibility

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

Closed this issue · 4 comments

richardtallent commented

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

I experienced the same

kddnewton commented

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

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

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