vue-a11y/vue-axe

False Positive on Table scope?

Closed this issue · 3 comments

I can take a page which has zero warnings and then generate a warning by pasting in this HTML:
<table> <tr> <th scope="col">Foo</th> </tr> <tr> <td>Bar</td> </tr> </table>

This results in the following warning: "critical: scope attribute should be used correctly"

AFAICT, there is nothing wrong with how I am using scope in that markup -- scope="col" is valid in a TH and that is what the rule is checking. Except for some reason it is returning false somewhere along the line. I did see this closed issue on axe-core dequelabs/axe-core#244 but that issue pertains to not using an HTML 5 doctype, which I am using.

There's nothing wrong with my doctype and there's nothing wrong with my use of scope, unless I'm missing something.

When I use the Axe Chrome plugin-in, it does not complain about this rule.

Sorry for the delay in responding.
I will try to reproduce your example and make the correction.

I have encountered the same issue. I am using HTML5, the scope attribute is only being used on th elements, every th element has a scope attribute, and the value of every scope is col.

Moreover, when I remove the scope attributes entirely the error is no longer generated. This contradicts the expected behaviour, which is that not including the attributes should trigger the error.

Error:
scope attribute should be used correctly https://dequeuniversity.com/rules/axe/3.0/scope-attr-valid?application=axeAPI

Source:

<thead>
  <tr>
    <th scope="col" width="12.5%">
      Requested Organ
    </th>
    <th scope="col" width="12.5%">
      Transplant Type
    </th>
    <th scope="col" width="12.5%">
      Clustered With
    </th>
    <th scope="col" width="12.5%">
      Medical Status
    </th>
    <th scope="col" width="12.5%">
      Primary Diagnosis
    </th>
    <th scope="col" width="12.5%">
      Secondary Diagnosis
    </th>
  </tr>
</thead>

@DrLongGhost @Lexanimus

v2 is out.

I believe that the updated version of axe-core solved the problem, you can see an example through our demo.

Thanks for contribution.