Custom components for Insights Queue Stats

[Fazle-Jahangir]

The specific questions I have are...

• To what extend can I customise the checkbox component to combine it with other controls such as drag and drop?

• What are the most appropriate icons for the proposed features (click to move, drag and drop)

• (See other questions in the sign-up sheet)

Background: Following up on Discussion #2332. We are planning to add a feature in Insights queue stats wheres users can rearrange columns/metrics to their preferred order.
Stage of design: Exploration
Links to mockups or prototype: https://www.figma.com/file/PJGIvUJHywtCiIGSfdnLwA/Queue-Stats?node-id=264%3A55522

[shleewhite]

Thanks for coming to office hours last week @Fazle-Jahangir!

To summarize what we talked about, you have 2 options:

• Keep the markup the same: an unordered list of items. Each list item has a checkbox, the name of the column, and an icon button that people can drag and drop.
• Use a listbox options: this would follow the aria listbox pattern (you can see an example of one here: https://www.w3.org/TR/wai-aria-practices-1.2/examples/listbox/listbox-rearrangeable.html)

Ultimately, I think the easiest way forward right now (because there isn't a Paste listbox component yet), is to go with option 1. There are a few things you need to do in order to make this UI accessible.

• You need to add a keyboard equivalent. So when the user presses space, it starts 'dragging'. Then as the user presses up and down arrow keys it moves the item within the list, they press space again to end dragging.
• You need to communicate the list to screen reader users. Add a <ScreenReaderOnly> inside of a div with aria-live="assertive". When the user starts the dragging, it should say the user is now dragging, the name of the item, and its current position in the list. As the item moves, it should have text that says the new position within the list

Check out this blog post for some great information about accessible drag and drop: https://medium.com/salesforce-ux/4-major-patterns-for-accessible-drag-and-drop-1d43f64ebf09 (specifically the content around sorting a list).