Change focus management in disclosure utility component

[alex-ju]

📌 Summary

This PR is proposing an alternative approach to focus management in our disclosure utility component on the back of #280

🛠️ Detailed description

The main change is dropping the focus-trap mechanism and letting the focus flow through the component while preserving the rest of the requirements defined in the associated CRD. The solution is meant to avoid any change the API of the component.

I propose this change to fix the issues described in #280 (briefly: "fix focus-trap bug when the interactive opens a modal", and the "scrolling caused by focus returning to the previously active element"). It also addresses the WCAG 2.1 success criterion 2.1.2 No Keyboard Trap (Level A) by allowing the users to exit the disclosed content using the default keyboard shortcut (tab).

📸 Screenshots

Before	After

Note: the colors went way off on the above compressed gifs 😱

🔗 External links

Review of focus management in Disclosure (+ Dropdown/Breadcrumb) components
Fixes #267 and https://github.com/hashicorp/cloud-ui/pull/2362#issuecomment-1097778784

---

👀 How to review

👉 Review commit-by-commit

Reviewer's checklist:

• +1 Percy if applicable
• Confirm that PR has a changelog update via Changesets if needed

💬 Please consider using conventional comments when reviewing this PR.

---

• To see the specific tasks where the Asana app for GitHub is being used, see below:
  • https://app.asana.com/0/0/1202253786016960

[changeset-bot]

🦋 Changeset detected

Latest commit: ba40988

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@hashicorp/design-system-components	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
hds-components	✅ Ready (Inspect)	Visit Preview	May 18, 2022 at 9:02AM (UTC)
hds-flight-website	✅ Ready (Inspect)	Visit Preview	May 18, 2022 at 9:02AM (UTC)

[MelSumner]

Thank you for your PR! Can you please add some more details to the PR, explaining why you want to make this change, and what the intent is. Thank you!

[didoo]

@alex-ju I've found an issue with Safari that I suspect is a blocker: when the dropdown is activated/opened via keyboard (tab to the toggle, open the toggle via spacebar/enter) everything works as expected; but if the dropdown is opened via mouse click, then nor the click outside nor the "esc" key close the dropdown.

other things I notice, that may be helpful in narrowing down the problem:

• if you add a console.log inside the onFocusOut function, you will see that is logged in Chrome (when the toggle is clicked to open it) but not in Safari
• in Safari, if you open the toggle via mouse click, but then hit tab and focus on the first item, then the click outside and the esc both trigger the close

I did some tests, but I am not sure what would be the cause root, if something in the logic or a bug in Safari. I'll let you investigate.

This happens in Safari:

[alex-ju]

Thank you for your PR! Can you please add some more details to the PR, explaining why you want to make this change, and what the intent is. Thank you!

Sure, I should've been more clear on the why; I guess part of it was left in the comment on the issue. I have added a paragraph to the PR description trying to articulate the motivation behind the proposed change.

[alex-ju]

@alex-ju I've found an issue with Safari that I suspect is a blocker: when the dropdown is activated/opened via keyboard (tab to the toggle, open the toggle via spacebar/enter) everything works as expected; but if the dropdown is opened via mouse click, then nor the click outside nor the "esc" key close the dropdown.

other things I notice, that may be helpful in narrowing down the problem:

• if you add a console.log inside the onFocusOut function, you will see that is logged in Chrome (when the toggle is clicked to open it) but not in Safari
• in Safari, if you open the toggle via mouse click, but then hit tab and focus on the first item, then the click outside and the esc both trigger the close

I did some tests, but I am not sure what would be the cause root, if something in the logic or a bug in Safari. I'll let you investigate.

Ah, interesting, it seems to be a bug in webkit, but I'll investigate and add a patch in a separate commit.

[alex-ju]

@didoo I've added a patch for the inconsistency of WebKit not triggering focusin and focusout on button elements (among other types of elements) to address the issue you found and added your suggestions to the preview/documentation page.

[didoo]

All good for me 👍

[MelSumner]

Is this a proposal or a foregone conclusion? I think I missed that part of the conversation entirely. Any documents that you can point me to? I don't think we should change the component without appropriate justification.

[MelSumner]

Update: After looking through it, I really think we are losing some A11y-specific UX here, but it's also technically a WCAG-conformant solution. As such, I disagree with this change but cannot object to it.

[alex-ju]

Update: After looking through it, I really think we are losing some A11y-specific UX here, but it's also technically a WCAG-conformant solution. As such, I disagree with this change but cannot object to it.

Thank you for the review, Melanie. From an accessibility perspective, my concern with the current implementation is that assistive tech users are not being told that they've entered a region when they moved into the disclosed content and they're not being told that if they want to get out of the region they can use the escape key (some may figure it out, but it's not explicit), which may trap and frustrate some of them. That being said, we'll most probably need this focus-trap-based solution for the modal dialogue component.