carbon-design-system / ibm-products

A Carbon-powered React component library for IBM Products
https://ibm-products.carbondesignsystem.com
Apache License 2.0
92 stars 136 forks source link

[Feature Request]: DataGrid needs an accessible solution to overflowing values #5618

Open davidmenendez opened 2 months ago

davidmenendez commented 2 months ago

The problem

this issue is a follow up to #5351

currently when using columns with resize it's possible to end up with a value that gets hidden with ellipses. that solution is not accessible and as a result to recent accessibility fixes to datagrid where unnecessary title attributes were being used as tooltips for overflowing values there's currently no way to view those values without resizing the column.

i haven't been able to find anything specifically regarding this accessibility issue when it comes to resizable tables, but according to this article it's bad practice from an accessibility standpoint to hide values. so i think we have two options here

The solution

  1. set a minimum width to cells and add a horizontal scroll for values that extend beyond the cell
  2. using word-wrap: break-word to truncate the value and adjust the row height to accommodate the value
Screenshot 2024-06-27 at 9 02 06 AM

the screenshot above shows an example of how a table width responsive row height would react to the cell truncation

Design link

No response

Links to other materials

No response

Owner/main maintainer(s)

David Menendez

Second/backup maintainer(s)

Matt Gallo

Product/offering

No response

Business priority

High Priority = pressing release

Code of Conduct

davidmenendez commented 2 months ago

@marinamas

oliviaflory commented 1 month ago

Ref: https://github.com/carbon-design-system/carbon/issues/5131