vuetifyjs/vuetify

[Feature Request] Table Select Checkboxes dont have labels by default

Open

#9956 opened on Dec 12, 2019

View on GitHub
 (0 comments) (2 reactions) (0 assignees)TypeScript (40,995 stars) (7,139 forks)batch import
C: VDataTableT: enhancementgood first issue

Description

Problem to solve

When having a select checkbox for the tables the following happens by default

  • checkboxes get created (they have a label attached to it but no aria-label or aria-labelledby)
  • header checkbox doesnt have a label

Proposed solution

  • add to the header of the table select a label and aria-label prop that can be editable
  • at times the checkbox might not need to have the label displayed so aria-label should be the one that does the trick from an accessibility point of view

Contributor guide

Tech stack
vuetypescript
Domain
frontendaccessibility
Issue type
accessibility
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
under 1 hour
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Vue.jsVuetify table componentARIA attributes
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
75
Research direction
Investigate the Vuetify table component (likely in VDataTable or VSimpleTable) to find where header checkboxes are rendered. Look for existing `label` and `aria label` props on other components for pattern. Add similar props to the header checkbox, ensuring the `aria label` is used when no visible label is present.