[Feature Request] v-data-table Keyboard Support/Navigation

[mgren21]

Problem to solve

It appears that keyboard navigation for v-data-tables is not implemented in Vuetify 2+. In Vuetify 1.5.x it was possible to navigate the v-data-table headers and select entries in the table using keyboard commands. I am not sure why these features have been removed.

Proposed solution

It would be ideal for the a11y features previously available in Vuetify 1.5.x to be added back so data tables can be easily navigated with keyboard commands.

[albertoaflores]

+1

[genyded]

This is paramount to us. We moved from Quasar to Vuetify because we needed multi-column sort in our tables. But now if we cannot have key navigation in them after our users are used to it, we'll have to seek yet another alternative. That's a pretty major feature to just wipe with no warning.

[mtermoul]

It seems that when you I have a v-data-table component with show-select property to enable row selection through checkboxes does not support keyboard mode navigation using the tab+space keys! This is a major accessibility issue. After digging deeper I come to find out that the reason the keyboard navigation is not working because the v-simple-checkbox does not handle the keyboard events. So if we fix the v-simple-checkbox keyboard event handling then the v-data-table issues will be fixed. Do you guys agree?

[genyded]

In our case, we didn't have checkbox enabled/used, so it seems like key navigation should work in that scenario and only be disabled if checkbox is being used. Additionally key navigation is typically used in 'cell' editing (not row editing) and in that case row selection would not be needed.

In our case we do not care about checkbox, only key navigation, but if both can work that would be ideal.

[mtermoul]

I think regardless if you are using the show-select or not, v-data-table should support keyboard navigation to be able to claim that vuetify components have accessibility features built-in. However that's not the case for the v-data-table component. So this really remains an open issue and needs to be addressed.

[schwoortz]

@mtermoul Thanks for responding to this issue. We are dealing with this accessibility-issue, too. While keyboard accessibility for checkboxes is really the most important I would like to add these 2 findings:

1. sort table -> the mouse-clickable TH area is also not accessible via keyboard
2. pagination -> if one paginates, the focus moves away from the arrow way to the beginning of the HTML document. It would make sense to keep the focus right on that button in order to easily step forward / backward multiple times (without tabbing all the way back to that button)

Do you or does anyone know a manual fix for the checkboxes-issue? Or when an update with this issue fixed might be available?

[mtermoul]

@schwoortz At the moment there is no fix from Vuetify team yet, however there are a couple workarounds to help you remedy these issues. Here is the list of workarounds that I have used:

• To fix the the selection checkbox on the v-data-table --> TR -- TD -- v-simple-checkbox you can replace the v-simple-checkbox with v-checkbox and once you do that the v-checkbox will automatically be able to receive the keyboard focus and respond to the keyboard keys Tab, Spacebar, Enter.... In order to do this you need to customize the item.data-table-select slot as the following:

<v-data-table ...>
   <template v-slot:item.data-table-select="{ item, isSelected }">
        <v-checkbox
            :value="isSelected"
             hide-details
             class="mt-0"
             @change="onItemSelect({ item, value: !isSelected })"
         >
        </v-checkbox>
   </template>
</v-data-table>

• To fix the select all checkbox on the v-data-table header, you need to replace the v-simple-checkbox with the full v-checkbox on the v-data-table --> thead --> TR --> TH by using the header.data-table-select slot. This is a code example on how to do that:

<v-data-table ...>
   <template v-slot:header.data-table-select="{ value, indeterminate }">
        <v-checkbox
            :value="value"
            :indeterminate="props.indeterminate"
             hide-details
             class="mt-0"
             @change="onSelectAllChange"
         >
        </v-checkbox>
   </template>
</v-data-table>

• To fix the table column headers to sort, the idea is the same. You can customize that through the header slot by looping through all the headers. Or the header.<name> slot to customize a specific column header. So you need to replace the column header with v-btn or a link or some component that naturally receives the keyboard focus. I would use something like this:

  <v-data-table ...>
  <template v-slot:header="{ headers }">
      <v-btn
          v-for="(item, index) in headers"
          :key="index"
          text
          small
          color="primary"
          @click="onColumnHeaderClick"
       >
      </v-btn>
  </template>
  </v-data-table>

• To solve the pagination links next, previous issue, use the same idea. Replace the build-in pagination components with othe components like v-btn pr links... which supports keyboard interaction. You can customize the pagination section of the v-data-table by using the footer slot.

<v-data-table ...>
   <template v-slot:footer="{ pagination }">
       ... render your own pagination components here
   </template>
</v-data-table>

Please check out the v-data-table documentation about the slots that it has, and let me know if you have used other ways to address the accessibility issues.

[schwoortz]

@mtermoul Thank you very much for your in depth response and these well explained workarounds. I showed them to our team and they are keen to check it all out. I will get back to you with results as soon as we have any. Thanks again!

[vickyrare]

Have this been fixed in Vuetify 2.4?

[cdefy]

Doesn't seem to be, I just tried to navigate a v-data-table with show-select by keyboard and I can't get to the checkbox :(

[joswald76]

Is there an update on this?

I wonder how the documentation can list Vuetify as 508 compliant, when this bug is still open: https://next.vuetifyjs.com/en/introduction/why-vuetify/#why-vuetify3f

[advaittoraskar007]

The lack of this feature is completely breaking our keyboard accessibility since most our UI is based on tables. Any updates on the issue will be really helpful.

[schwoortz]

The team I worked with on a project fixed it with some custom code based on the answer @mtermoul provided (see above). I can try to get back to them and ask for more details. I believe, the issue hasn't yet been fixed in the vuetify core, unfortunately.

[flpehr0]

Hi everyone --- This should not be a feature request. This is a bug. Accessibility and section 508 compliance issues are baseline functionality and if a keyboard user cannot access a clickable feature then that feature is broken! Please open a bug ticket.

[caseybishop]

Does someone have a working example of the workarounds mentioned?

[mauricio-andrade]

Hi everyone. I'm doing tests about accessibility, and I think that the semantic is the most important thing. Then if you have a table using < th > and < tr >, it's ok. I'm using NVDA to test, and I can access a table using CTRL+ALT+ (Right, Left, Up, Down). Then when I'm using a v-data-table, I can access the < th >, and using < enter > I can change the sort in a column. If I'm using show-select, I can access the checkbox too, navigating in the table, and click < enter > to select. I don't know if I'm correct or not, but I think that you don't need that all parts of your table needs to use tab. Thanks in advance.

[Christian-Sibo-ONRR]

Here's a solution that doesn't require overriding the header slots. That solution wasn't tenable for me because we were already doing a lot of work on the headers and didn't want to repeat code everywhere. I haven't tested this with selectable rows or grouped headers.

This method simply makes the ths focusable and binds the enter key to their normal click handler. Everything else is handled by the browser (eg. focus styling for the span).

<v-data-table
    ...
    :headers="myHeaders"
/>

<script>
    // ...

    methods: {
        columnKeyUp(event) {
            if(event.key !== 'Enter') return

            event.target.click()
        },
    },

    watch: {
        myHeaders: {
            handler() {
                const table = // however you reference your table. eg. this.$refs.table.$el

                if (!table) return

                const sortableColumns = table.querySelectorAll('th.sortable > span:not(.v-icon)')

                sortableColumns.forEach(col => {
                    col.setAttribute('tabindex', '0')

                    col.addEventListener('keyup', this.columnKeyUp)
                })
            },
            immediate: true,
            deep: true,
        },
    },
</script>

[jssuttles]

I don't really like it, but this is what I've had to do for this. On keypress click the ref. Add tabindex.

 <template #header.data-table-select="{ on , props }">
  <v-simple-checkbox
    aria-label="Select all"
    ref="headerCheckbox"
    v-bind="props"
    v-on="on"
    @keypress.enter="$refs.headerCheckbox.click()"
    @keypress.space="$refs.headerCheckbox.click()"
    tabindex="0"
  />
</template>
<template #item.data-table-select="{ item, isSelected, select, index }">
  <v-simple-checkbox
    aria-label="`Select ${item.full_name}`"
    :ref="`tableCheckbox-${index}`"
    :value="isSelected"
    @input="select($event)"
    @keypress.enter="$refs[`tableCheckbox-${index}`].click()"
    @keypress.space="$refs[`tableCheckbox-${index}`].click()"
    tabindex="0"
  />
</template>

[VIXI0]

i really need this feature

[VIXI0]

I have done a component extending v-data-table that is usable with a keyboard, change the page with left and right keys and reacted to keypress in a row allowing the developer to create quick action, when i got time I'm gonna publish the component to npm and yarn.

sadly im not sure if this will work on vuetify 3