Quasar q-table WCAG

Question

So am working on an application which uses Quasar (CLI) and have built a datatable with q-table. Now I want to make the table more accessible, and wanted to add an aria-label attribute to the column sorting icon, but haven't found a way.

A picture for reference:

it is about this icon.

I've tried a few things but haven't found any solution. I'd rather not rewrite this component either since it already has quite a big codebase.

Thank you in advance!

Answer 1

Since Quasar doesn't provide a way to set an aria-label for the sort icon, you can use the document interface to directly manipulate the DOM on mount and set the aria-labels manually.

mounted() {
  const sortIcons = document.getElementsByClassName('q-table__sort-icon')
  Array.from(sortIcons).forEach(
    sortIcon => (sortIcon.ariaLabel = 'my custom label')
  )
}

A more "Vue-like" solution would require an update to the Quasar library which you could request as a new feature on their github.