Request: Add indicator line - data table row component

[marion-bruells]

Summary

In Watson Knowledge catalog we allow users to click a row to display meta data in context of the UI in a side panel. Users need an easy way to get information during their workflows, without losing context or navigating away from their current screens. Therefore we have to indicate the row in a table that was selected. The suer needs to have some visual hint for the currently displayed item.

Here examples:

This would require an indicator line as addition to the current data table row component (dev +design):

blue indicator line 2 px on the far right of the row (#0F62FE, Blue 60)

See also: https://ibm.box.com/s/eyfek094u0r1tihcr42qt8xvzfmqd37b

Justification

https://ibm.box.com/s/j4n4kru1wzuuw1g0jj0zcdj9hnn51yq4
This relatively small feature differentiates us from our competitors, and is a clear need coming out directly from user research. It is a pain point that was found and solved in our tools in the past. I the past this was solved by large tooltips. The difference now is that times change, tooltips do not provide the accessibility we want or the real estate for all use cases so we reworked it into an already familiar solution.To make sure people know which item is selected on the page an indicator is required for the specific row item in a table.

Specific timeline issues / requests

Release May Cloud Pak for Data, Watson Knowledge Catalog

[joshblack]

Hi there! Just wanted to take a second to apologize for the long delay, we are in the process of updating how we triage issues so that these kinds of delays won't happen in the future.

Taking a look at the request, there were a couple of questions that had come up:

• How does a user know that a row is interactive?
• What does it look like to a screen reader user when they interact with this selectable row?
• What does it look like to a keyboard user when they interact with this selectable row?

For reference, we're currently struggling with a good reference implementation for accessible row selection in data tables and so a number of our questions come up from that use case.

[marion-bruells]

Hi @joshblack

Specs in light theme:

Specs in dark theme:

for accessibility we were thinking of using the focus state on row for this.

Here is the full documentation where we describe the behaviour of clickable rows in C&CS PAL. Let me know if you have any questions or feedback on that.
https://pages.github.ibm.com/cdai-design/pal/patterns/data-table/clickable-row-items

[joshblack]

Hi @marion-bruells! 👋

This is awesome, thanks so much for sharing! I think a lot of the questions for row selection, in particular when it triggers a panel to appear on the page, are around what the interactions would look like for keyboard and screen reader users.

Box is a good example of this where you can interact with the row with a mouse click and have the file/folder details appear to the side, but for a keyboard or screen reader this information is either not available to be disclosed or difficult to navigate to.

In the example below, I was attempting to get the side panel to appear with a keyboard but was unable to determine what I needed to do as a user to get it to trigger. The other question would be if I could get it to trigger how would I be able to navigate to it using the keyboard. By default, implementations may require the user to tab through the entire table before being able to get to that section of content.

Screen.Recording.2021-06-09.at.11.26.54.mov

Similarly, it seems like it may not follow the data grid pattern from WAI-ARIA which has several keyboard commands or behavior that make tables easier to navigate:

• There is only one tab stop in a table
• Users navigate the table cells using arrow keys
• Home will move to the beginning of a row
• End will move to the end of a row
• Ctrl+Home will move to the first column, first row
• Ctrl+End will move to the last column, last row

---

When looking at the linked page, I noticed an accessibility section at the end of the page (which is awesome) and I'd love to learn more about what the team thinks about these kinds of situations with the functionality being proposed 👀 Some of this was totally handled by the table, but for other parts I wasn't quite sure how the functionality being proposed would work 👍

[marion-bruells]

Thanks @joshblack you bring up good points and I will bring this back to our team to dig into it.
Some additional function we added to the table row is that users can also access the panel preview by this - so this should at least follow Carbon and allow some kind of access – not ideal and enough though:

[jnm2377]

Hi @marion-bruells 👋🏽 Has your team had a chance to discuss some of the a11y concerns around this?

[joshblack]

Going to close this out due to inactivity, feel free to comment and I can re-open!

[marion-bruells]

@joshblack Sorry for not getting back to you on this earlier. I somehow totally missed this issue.
We agreed on keeping the click on row in C&CS PAL to trigger a panel with additional information to an item on the page. In order to achieve accessibility we also add an action (View details) as action on the single row (single icon or overflow menu).

So users have additional the option to either use the icon/action in the overflow menu or click on the row to trigger the panel. In the past it often lead to issues that users were pulled out of their context and brought to a different page by clicking the row in a table. Therefore we only recommend to click the name / link to navigate into a new page and follow the behaviour from box, google, etc.

[marion-bruells]

@joshblack I think this issue is related to this request. #9577 Can you take a look again and let me know if you want to discuss anything further on this issue or have any follow up questions?

[thyhmdo]

We decided not to pursue this. The PAL team can customize and put this pattern in your data table because it doesn't make sense to add the row style without adding the whole pattern.