u/sinkatasine

I've spent the last year fixing accessibility issues in a large production web app, and one anti-pattern kept showing up everywhere:

Clickable containers.

Examples:

• <div> pretending to be a button
• clickable <tr> elements for row expansion
• giant clickable cards
• custom controls patched with role="button" and tabindex="0"

The pattern usually starts as a UX shortcut and ends with:

• keyboard navigation problems
• screen reader issues
• event propagation bugs
• lots of accessibility boilerplate

One example I see frequently is the clickable table row:

<tr (click)="toggleRow(row.id)">

At that point the row is trying to be both a data structure and an interactive control.

My conclusion after fixing a lot of these issues: accessibility problems are often design problems before they're implementation problems.

How does your team handle expandable tables and clickable cards?