Skip to content

[CRUD] Fix accessibility of rows in Crud component #4825

@rkristelijn

Description

@rkristelijn

What's the problem?

Dear Toolpad team,

First of all thanks on this amazing work with MUI. It makes working with MUI so much simpler. I just discovered the Crud component and I'm amazed at the simplicity to set it up.

Right from the bat I see that the rowclick is used to navigate from the list-view to the detail-view. I want to share some concerns here;

  1. This blocks any inline edit that you may want to do in the list-view because the click navigates away
  2. This is very hard to make accessible, the keyboard navigation doesn't work and the screenreader is unable to make out there is a way to navigate from the rowclick to the detail view
  3. Multiselect is unusable as the first click navigates away

What are the requirements?

Instead i would like to suggest to make on of the columns of type hyperlink, to create a so-called drilldown. This is easy for screen readers to make out there is a link to the detail view, multiselect is enabled, and you can have drilldowns to other components as well if you want

What are our options?

No response

Proposed solution

Imagine you have two 'business components': Contact and Account. A Contact can belong to only one account.

The Contact Crud:

Id Contact Name Account
drilldown to contact 1 just some text drilldown to account 23
drilldown to contact 2 just some text drilldown to account 345

The Account Crud:

Id Account Name Primary Contact
drilldown to account 1 just some text drilldown to contact 456
drilldown to account 2 just some text drilldown to contact 1

Resources and benchmarks

No response

Metadata

Metadata

Labels

RFCRequest For Comments.scope: toolpad-coreAbbreviated to "core"waiting for 👍Waiting for upvotes. Open for community feedback and needs more interest to be worked on.

Projects

Status

Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions