search

quasarframework / quasar

Quasar Framework - Build high-performance VueJS user interfaces in record time
https://quasar.dev
MIT License
25.28k stars 3.43k forks source link

Missing Labels for QTable Pagination Buttons #17148

Open gmeben opened 2 weeks ago

gmeben commented 2 weeks ago

What happened?

The pagination buttons that appear at the bottom of QTables do not have label attributes. This violates WCAG Success Criterion 4.1.2: Name, Role, Value (Level A).

Screenshot of axe DevTools for Chrome on a CodePen with a basic QTable. Two 'Buttons must have discernible text' issues are detected. One of the two pagination buttons is highlighted for this issue.

What did you expect to happen?

Pagination buttons should have a detectable label attribute of some kind like aria-label or title.

Reproduction URL

https://codepen.io/quadbaup/full/mdgoQWQ

How to reproduce?

  1. Visit the provided link to CodePen in Firefox 125
  2. Authenticate on CodePen
  3. Fork the linked CodePen
  4. In the forked CodePen, change the view to "Debug" mode
  5. Open Web Developer Tools
  6. Open the Accessibility tab
  7. Set the "Check for issues" dropdown to All Issues
  8. Note the button Role issues:

Text Labels and Names Error Interactive elements must be labeled. Learn more

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar)

Platforms/Browsers

Firefox

Quasar info output

No response

Relevant log output

No response

Additional context

No response