Skip to content

Accessibility violations for useClickableTableRow #12248

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Parkreiner opened this issue Feb 21, 2024 · 2 comments
Closed

Accessibility violations for useClickableTableRow #12248

Parkreiner opened this issue Feb 21, 2024 · 2 comments
Labels
s3 Bugs that confuse, annoy, or are purely cosmetic site Area: frontend dashboard stale This issue is like stale bread.

Comments

@Parkreiner
Copy link
Member

Spurred by PR #12218

Over the past weekend, I tried making tests for useClickable and useClickableTableRow. useClickable is done, but after doing some digging, it looks like useClickableTableRow might be the wrong abstraction, because even though it's trying to help with accessibility, it's causing more violations than there would be without it:

/**
 * @file 2024-02-19 - MES - Sadly, even though this hook aims to make elements
 * more accessible, it's doing the opposite right now. Per axe audits, the
 * current implementation will create a bunch of critical-level accessibility
 * violations:
 *
 * 1. Nesting interactive elements (e.g., workspace table rows having checkboxes
 *    inside them)
 * 2. Overriding the native element's role (in this case, turning a native table
 *    row into a button, which means that screen readers lose the ability to
 *    announce the row's data as part of a larger table)
 *
 * It might not make sense to test this hook until the underlying design
 * problems are fixed.
 */

Point (1) was detected via axe, but point (2) can't be detected with automated audits, because the auditing tool has no way to detect what our intent for the code was. But if something looks like a table, it feels like users should be able to interact with it like a table.

Here's a screenshot of the audit report for the main workspaces page – each individual table row is a violation, but fixing things at the source should clear them out in one go.
Screenshot 2024-02-21 at 10 53 23 AM

One possible solution that comes to mind is making it so that the table row keeps its base semantics, but it has onClick callbacks meant to receive and intercept events from its children. If we do decide to keep the hook, it will also need tests added.

@Parkreiner Parkreiner added site Area: frontend dashboard s3 Bugs that confuse, annoy, or are purely cosmetic labels Feb 21, 2024
@cdr-bot cdr-bot bot added the bug label Feb 21, 2024
@BrunoQuaresma
Copy link
Collaborator

IMO, we should not make table rows clickable but add links to elements inside of it.

@BrunoQuaresma
Copy link
Collaborator

@Parkreiner I think this would be a s4....wdyt?

@github-actions github-actions bot added the stale This issue is like stale bread. label Aug 28, 2024
@github-actions github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale Sep 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
s3 Bugs that confuse, annoy, or are purely cosmetic site Area: frontend dashboard stale This issue is like stale bread.
Projects
None yet
Development

No branches or pull requests

2 participants