epicmaxco / vuestic-ui

Free and Open Source UI Library for Vue 3 🤘
https://vuestic.dev
MIT License
3.31k stars 321 forks source link

Expanded row invalid markup #4241

Closed mr-sanders closed 1 week ago

mr-sanders commented 2 weeks ago

Vuestic-ui version: 1.9.8

Description

When a row is expanded, the <td> tag is not enclosed within a <tr> tag. This disrupts basic accessibility in VoiceOver, making the cell content invisible to screen readers.

Current Behavior

The <td> tag is unwrapped in the table's <tbody>.

Expected Behavior

The <td> tag should be enclosed within a <tr> tag.

Reproduction Steps

  1. Open https://ui.vuestic.dev/ui-elements/data-table#expandable-rows.
  2. Expand any row.
  3. Check the markup of the expanded row in Developer Tools.