Question about Disclosures and command-click to open in new tab

[jweintraub]

Hi team, I am looking for some guidance. We've had some requests from users in the new Console to be able to open products listed in the left nav in a new tab quickly either by

1. right-click -> open in new tab or
2. cmd-click -> open in new tab

They want to be able to do this from the top level of the product which is a disclosure (see screenshot). In other words, they want to be able to cmd-click on the disclosure and have a new tab open on the first page inside that disclosure. Is there any reason you can think of why that might be problematic? Either in terms of accessibility or usability?

thanks

[andioneto]

Hey @jweintraub 👋 Great question. Let me run this by the team and we will get back to you.

[jweintraub]

Just checking in - if there aren't any negative implications, I'd like to implement as soon as possible to make it easier on our users.

[andioneto]

@jweintraub Thank you for your patience while we finalize our response!

This is possible and can be done accessibly, but it must be created with the disclosure primitive. Below is an outline of our suggested approach for the best experience. 👇

The DisclosureHeader is a heading element that wraps a button. We can't wrap the DisclosureHeader with an anchor because that would create a DOM tree where two actionable/focusable elements are nested, which is inaccessible. Check out our disclosure accessibility documentation to learn more about this constraint.

Thankfully we can use the disclosure primitive to render the DisclosureHeading as an anchor with an aria role “button.”

If we take this approach we must be sure to include a list item anchor that matches the href attribute of the button. If we do this, we are able to both create the desired experience for mouse users, and create an accessible tree.

This constraint is required because we need to allow our users to:

1. Open the disclosure
2. Right click to access the href destination in a new tab
3. Use keyboard only interactions to visit each of the sub tree anchors and open/close the anchor

Without including the duplicated anchor between the disclosure heading and the list items, we provide no way for keyboard-only users to access the destination.

👀 Check out this code sandbox to see a very minimal example of this implementation.

💡 Note: We’d like to point out that because we are breaking the expected behavior of a disclosure for this single instance this is not an ideal solution. That said, it can still be done to create a minimally accessible experience.

We encourage you and your team to join us in office hours if you decide to build this experience so we can ensure the best possible end user experience.

Thank you again for reaching out and we look forward to working with you 🚀

[jweintraub]

Thanks so much for the detailed response!