"Dropdown" component - Fix issues with focus - Part 1

[didoo]

📌 Summary

This is a possible fix for part of the problems related to focus states in Dropdown::ListItem::Interactive (see #258).

There will be a second round of fix, in which we want to review all the focus management for the components that rely on the Disclosure component (with the intent to fix also the bug seen in https://github.com/hashicorp/cloud-ui/pull/2362#issuecomment-1097909966).

🛠️ Detailed description

In this PR I have:

• fixed the issues with the color of text + combination of active+focus states
  • in doing so, did a small refactoring to simplify even more the definition of the colors, and centralize the "logic" of the interactive states in a single place
• ported the changes from resolves issue with focus on dropdown #261 into this branch.
• removed integration test

🔗 Links

• codepen that can be used/forked to do some tests: https://codepen.io/didoo/pen/OJzeVjG?editors=1100

---

👀 How to review

👉 Review by files changed

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/1202198964307759

[changeset-bot]

🦋 Changeset detected

Latest commit: c2a8f70

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 4, 2022 at 9:56AM (UTC)
hds-flight-website	✅ Ready (Inspect)	Visit Preview	May 4, 2022 at 9:56AM (UTC)

[didoo]

@MelSumner can you have a look at this PR?
@heatherlarsen can you check this solves #258?
@alex-ju can you have a look too?

Thanks

[heatherlarsen]

@didoo This appears to resolve all of the issues I noted in #258.

I did see a new issue popup in Firefox (but not in Chrome) though. I was able to tab to the ToggleButton, open the menu, and then tab to the first list item using the keyboard, but I couldn't tab to any other items in the list. Focus remained on that first list item.

[MelSumner]

@heatherlarsen see this post for how to resolve that issue

[MelSumner]

This seems to resolve the concerns we were having previously. Tested on macOS with Chrome, Safari and Firefox and was able to confirm that we are seeing what we expect.

I am not entirely sure about the shouldSelfFocus change in addition to the CSS change (I was expecting one or the other but probably not both) but I am not concerned enough to object at this time.

[alex-ju]

Leaving a comment to check my understanding. With this PR we're trying to address the 3 issues flagged in #258 as follows:

• issue 1 is addressed in 13703d7 by disabling the self-focus on the disclosed content (the first focusable item, in our scenarios)
• issue 2 is addressed in a56d81f by updating the :focus:active styles while abstracting color and action definitions
• issue 3 is addressed in 42da19c by explicitly defining the text colour on :focus state to be the same with the text colour on :active state

Do we need a changelog entry for these fixes?

[didoo]

I did see a new issue popup in Firefox (but not in Chrome) though. I was able to tab to the ToggleButton, open the menu, and then tab to the first list item using the keyboard, but I couldn't tab to any other items in the list. Focus remained on that first list item.

I checked in my local env and it works for me (in Firefox). Maybe you have to enable the tabbing on all the "control" elements, as per @MelSumner suggested link ?

[didoo]

Do we need a changelog entry for these fixes?

Yes, just pushed one.

[heatherlarsen]

@MelSumner's suggested fix worked to resolve what I was seeing in Firefox. I'm seeing things as expected now. Thanks.