Skip to content

fix(VDatatable): Add aria-labels for select and sort control elements #21543

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 9 commits into
base: master
Choose a base branch
from

Conversation

mueller-jens
Copy link
Contributor

Description

fixes #21526

added aria-labels to select and sort controls of the datatable

Markup:

<template>
  <v-data-table
    v-model="selected"
    :items="items"
    item-value="name"
    show-select
  ></v-data-table>
</template>

<script>
  export default {
    data () {
      return {
        selected: [],
        items: [
          {
            name: '🍎 Apple',
            location: 'Washington',
            height: '0.1',
            base: '0.07',
            volume: '0.0001',
          },
          {
            name: '🍌 Banana',
            location: 'Ecuador',
            height: '0.2',
            base: '0.05',
            volume: '0.0002',
          },
          {
            name: '🍇 Grapes',
            location: 'Italy',
            height: '0.02',
            base: '0.02',
            volume: '0.00001',
          },
          {
            name: '🍉 Watermelon',
            location: 'China',
            height: '0.4',
            base: '0.3',
            volume: '0.03',
          },
          {
            name: '🍍 Pineapple',
            location: 'Thailand',
            height: '0.3',
            base: '0.2',
            volume: '0.005',
          },
          {
            name: '🍒 Cherries',
            location: 'Turkey',
            height: '0.02',
            base: '0.02',
            volume: '0.00001',
          },
          {
            name: '🥭 Mango',
            location: 'India',
            height: '0.15',
            base: '0.1',
            volume: '0.0005',
          },
          {
            name: '🍓 Strawberry',
            location: 'USA',
            height: '0.03',
            base: '0.03',
            volume: '0.00002',
          },
          {
            name: '🍑 Peach',
            location: 'China',
            height: '0.09',
            base: '0.08',
            volume: '0.0004',
          },
          {
            name: '🥝 Kiwi',
            location: 'New Zealand',
            height: '0.05',
            base: '0.05',
            volume: '0.0001',
          },
        ],
      }
    },
  }
</script>

@mueller-jens mueller-jens changed the title Add aria-labels for select and sort control elements fix(VDatatable): Add aria-labels for select and sort control elements Jun 8, 2025
@mueller-jens mueller-jens marked this pull request as draft June 8, 2025 15:59
Add keys to all languages

Fix build

Update VCheckboxBtn.tsx

Fix lint

Fix build

Fix build
@mueller-jens mueller-jens force-pushed the feature/aria-label-datatable branch from 6a2ae6e to 2982a37 Compare June 8, 2025 18:22
@mueller-jens mueller-jens marked this pull request as ready for review June 8, 2025 18:27
@mueller-jens mueller-jens marked this pull request as draft June 12, 2025 15:40
@mueller-jens mueller-jens marked this pull request as ready for review June 13, 2025 19:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug Report][3.8.7] V-Data-Table with 'show-select' needs aria label for form controls
1 participant