Table row pattern

[ceyerkes]

Hellooo,

Wanted to double-check the accessibility of a pattern that Tonik duplicated from Segment.

Within the Delivery Overview page table, you can click into a row item to see more info:

(User clicks discard reason, back button appears in card with more info in table)

I'm fairly certain this should've been a data table (?) instead but wanted to run this by you in case there's more context i'm missing. If this is an acceptable pattern in a table, i think the discard reason should be a link-style button within the table to indicate that it's interactable? Even in that case, i'm thinking that the back button in the card isn't a thing we should do, and maybe it should initiate a drawer or modal instead?

thaaaanks,
colleen

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Hello Colleen,

Great question! Based on the Paste documentation, if there are no interactive cells, a Table should be used instead of a Data Grid. However, if the customer needs to examine each object in more detail, each object should be linked to its Object details page.

In terms of accessibility, it's important to provide clear actions while still reducing visual repetition. For example, if a button is associated with a row item, we can add visually hidden text to the button to provide additional clarification for screen reader users.

As for the back button in the card, it's not explicitly mentioned in the documentation. However, the delete pattern guidelines suggest that actions should be initiated by a Button and that medium and high severity actions should be displayed using an Alert Dialog.

In terms of the discard reason being a link-style button, the accessibility section suggests using an anchor if the action will take the user to a new page, and in all other cases, use a button.

Here's an example of how you might import the necessary components for these patterns:

import {​ Button } from "@twilio-paste/core/button";
import { AlertDialog } from "@twilio-paste/core/alert-dialog";
import { Input } from "@twilio-paste/core/input";
import { Label } from "@twilio-paste/core/label";
import { HelpText } from "@twilio-paste/core/help-text;
import { Toast } from "@twilio-paste/core/toast";

I hope this helps! Let me know if you have any other questions.

Best,
Paste Design System Representative

---

Here are some similar discussions:

• Announcement pattern (updated: 2023-04-17T20:31:44Z, similarity score: 0.87)
• Provisionally Approved accessibility and component questions - Answer (updated: 2023-07-21T14:38:41Z, similarity score: 0.87)
• Bulk Action - Table component usage - Answer (updated: 2022-06-22T22:17:04Z, similarity score: 0.86)

[serifluous]

I'm fairly certain this should've been a data table (?) instead but wanted to run this by you in case there's more context i'm missing. If this is an acceptable pattern in a table, i think the discard reason should be a link-style button within the table to indicate that it's interactable?

Yep, it should be a Data Grid with a visible button.

Even in that case, i'm thinking that the back button in the card isn't a thing we should do, and maybe it should initiate a drawer or modal instead?

Yeah, it's definitely not something we've seen a lot of. In isolation, this card feels like it's overcomplicating the interaction, when a Side Modal or wide Modal might work just as well.

I can see why it was designed that way, though, so it's consistent with the layout of the cards for the other steps. But it's worth exploring different interactions here (maybe showing another Card on screen, etc.) if you want to balance consistency with making the interaction more predictable and not jumping users back-and-forth between information.