q-table sorting arrow aria-label

[cedricfortuin]

Hi there,

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. Maybe you guys know about it! :D

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!

[awenger63]

Hi, @cedricfortuin

I can suggest a solution with new directive on q-table. I make this code for us, you can adapt or customize it for your usage

// https://github.com/quasarframework/quasar/discussions/16985
import { $t } from 'boot/i18n'

function handleUpdate (el) {
  const tables = el.getElementsByTagName('table')
  if (tables !== undefined) {
    const sortTh = tables[0].getElementsByClassName('sortable')
    sortTh.forEach(thEl => {
      const sortIcon = thEl.getElementsByClassName('q-table__sort-icon')[0]
      sortIcon.removeAttribute('aria-hidden')
      sortIcon.setAttribute('role', 'button')
      if (thEl.classList.contains('sorted')) {
        if (thEl.classList.contains('sort-desc')) {
          thEl.setAttribute('aria-sort', 'descending')
          sortIcon.setAttribute('aria-label', $t('aria.tableIconSortDesc'))
        } else {
          thEl.setAttribute('aria-sort', 'ascending')
          sortIcon.setAttribute('aria-label', $t('aria.tableIconSortAsc'))
        }
      } else {
        thEl.removeAttribute('aria-sort')
        sortIcon.setAttribute('aria-label', $t('aria.tableIconCanSort'))
      }
    })
  }
}
const tableAriaSort = {
  beforeMount (el) {
    handleUpdate(el)
  },
  updated (el) {
    handleUpdate(el)
  }
}

export default tableAriaSort

perhaps further improvements can be made

Regards