why do table headers have user-select: none? (accessibility)

[magiruuvelvet]

just asking as user. i don't use this library. i came across this issue in the wild.

why do you set user-select: none in HTML table headers? this is bad practice imo and I see no valid reason to disable text selection in tables at all. text in table headers is something a user might want to highlight and copy. at least I do.

i can fix this with a user style injected into the page, but I'd like to understand the reason behind this decision. thanks.

vuetify/packages/vuetify/src/components/VTable/VTable.sass

Lines 132 to 137 in e23a3c1

	> th
	height: var(--v-table-header-height)
	font-weight: $table-header-font-weight
	font-size: $table-header-font-size
	user-select: none
	text-align: start

[DigitalA7]

I don't think there is an accessibility rationale behind it. It looks like history carried along.

The rule first appears in April 2017 (cea10f7), in the data table header styles, right next to the sortable header styles: clicking a sortable header to change the sort order would otherwise select its text. It went into v2's VSimpleTable, and then into v3's VTable when the component was ported in 2021 (#14177, 7950edd). There it applies to every <th>, including plain tables whose headers aren't clickable at all.

Until that changes, a rule with the same selector restores selection:

.v-table > .v-table__wrapper > table > thead > tr > th {
  user-select: text;
}

Vuetify 4 ships its component styles in cascade layers, so an unlayered rule like this one wins regardless of order. I checked it in Chromium with the published 4.2.4 stylesheet: the header computes user-select: none by default and text with the rule.

If you'd like this changed upstream, an issue proposing to keep user-select: none only on sortable headers (.v-data-table__th--sortable) would let the maintainers weigh in. I couldn't find an existing one.