aria-allowed-attr error on element (after installing jquery.datatables)

aria-allowed-attr error on element (after installing jquery.datatables)

papaDanpapaDan Posts: 7Questions: 1Answers: 0

I just received the following error on a <th> element on my site:

"aria-allowed-attr" Ensures ARIA attributes are allowed for an element's role - error on a <th> element.

I received this error after installing jquery.datatables via PM Console. I did an inspect on the <th> element:

<th class="sorting_asc" tabindex="0" aria-controls="customers" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Customer: activate to sort column descending" style="width: 306px;">Customer</th>

I'm not sure how to remove this error. Can anyone assist, please? Thanks in advance!

Answers

  • colincolin Posts: 15,237Questions: 1Answers: 2,598
    edited November 2020

    That error isn't from DataTables - I just searched the code for it. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

  • papaDanpapaDan Posts: 7Questions: 1Answers: 0

    Thank you for the prompt reply. I am not sure how to present a test case, seeing as the bootstrap and jquery bundles are pretty extensive, in addition to all the code I have in VS 2019 solution. I will say, however, that the issue went away when I uninstalled the jquery.datatables package. Not a good solution, of course, as I would like to utilize this package. If the error shown was on the <th> element, and I showed the element markup after datatables were in action - wouldn't I have to assume that one of the ARIA roles on the <th> element was not allowed? I'd investigate that, however I don't know enough about ARIA at this point.

  • papaDanpapaDan Posts: 7Questions: 1Answers: 0

    I can show the HTML markup on the entire table, if that might help?

  • colincolin Posts: 15,237Questions: 1Answers: 2,598

    Are you able to link to your page so we can take a look? The module that generated the error would also be displayed in the browser's console - can you screenshot that, please, if unable to link to your page,

    Colin

  • papaDanpapaDan Posts: 7Questions: 1Answers: 0

    I'm unable to link as I am in a local test environment - or better stated, perhaps I don't know how to do so.
    There is no error that generates in the Console. I do see now, however, that I've got a color-contrast error again as well. But no line # for this one, so not sure where to fix it, and not sure if it has anything to do with the aria-allowed-attr error. I've included a snapshot of VS with the errors when I attempt to execute the project.

  • papaDanpapaDan Posts: 7Questions: 1Answers: 0

    In case you can't see the other image??

  • papaDanpapaDan Posts: 7Questions: 1Answers: 0

    Either way, the image still seems fuzzy. I hope you are able to see it!

  • colincolin Posts: 15,237Questions: 1Answers: 2,598

    Yep, that looks like those errors are coming from something called Vidly - I'm guessing this. I'm not sure how DataTables could affect it, but it might be worth contacting their support.

    Colin

  • papaDanpapaDan Posts: 7Questions: 1Answers: 0

    Dear Sir: Vidly is the "name" of the Microsoft Visual Studio MVC ASP.Net project that I created. It is a mock website app I am working on in tutorials. Unfortunately, the tutorial is 2013 and I am working in the latest 2019 version. I installed datatables latest version, and have received the error as a result. It is directly on a table header element that is utilizing DataTables. A similar, yet unrelated error I get is the color-contrast warning (error) - and both of these errors are painfully difficult to google, forum-search and/or figure out! However, I will keep trying. The summary of the issue is that Datatables place ARIA attributes on the table elements that are NOT there when I DON'T use Datatables. If I find a way to "remove" these ARIA elements after the fact, I will probably resolve the issue, however, I am not at that level yet. I was hoping that this was a "common" error to be resolved by folks with knowledge or either VS Studio (Microsoft - good luck with trying to get support) and/or Datatables. I do, however, appreciate your help thus far. Thank you very much - Daniel

  • colincolin Posts: 15,237Questions: 1Answers: 2,598

    The summary of the issue is that Datatables place ARIA attributes on the table elements that are NOT there when I DON'T use Datatables.

    When you say you "don't use DataTables" - do you mean you initialised a table and then destroyed it? If so, yep, that would be of interest.

    If you mean you've got the library loaded, but you aren't initialising any tables, then that wouldn't be a DataTables issue, since DataTables only affects the DOM when tables are initialised. It's passive, it doesn't do anything until instructed.

    If that doesn't help, it would be worth posting on StackOverflow - there's some smart cookies over there.

    Colin

This discussion has been closed.