Vuetify: [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!