[Feature Request] Accessibility - Allow Setting Table Caption

[robertzak]

Problem to solve

For accessibility all tables should have a caption.

This looks to be a feature from 2.0 that was removed in 3.0: https://v2.vuetifyjs.com/en/api/v-data-table/#props-caption

I don't see a way to set the caption in V3. It appears someone else requested this last year, but it was closed by the bot: #19562 and no explanation given as to why (maybe just automation since it was marked Stale?)

I'm submitting again in the hopes that it was simply missed while vuetify was unfunded, and could be considered again to improve the framework's accessibility support.

Proposed solution

Add a new slot to the Table components that allows you to set the table caption. This slot should be added just after the <table> tag.

<table>
  <caption>{{ caption }}</caption>
</table>

Captions can be customized via css.

caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 10px;
  font-weight: bold;
}

I'm not sure what your normal process is for customizing a vuetify component. Are those additional properties? sass-variables? or just setting the class on each table (or would it be on the slot itself)? CSS is not my strong suit, I mostly just use vuetify's styling out of the box with whatever options you expose.

IE

<v-data-table> 
  <template v-slot:caption >
    <div class="my-caption-style">
      My Caption
    </div>
  </template>
</v-data-table>

vs:

<v-data-table
  caption="My Caption"
  caption-side="top"
> 
</v-data-table>