Opening dropdown component on focused (keyboard) state for accesiblity

Hey there, I am currently looking to improve the accessibility of the websites that I create. I noticed that websites such as Stripe have made dropdown menus open when they are focused on using the keyboard in the navigation.

I believe this is fantastic for accessibility as the dropdown text itself is not a link, and the links are hidden within the dropdown menu.

You can see this in action by pressing on the page and hitting the tab key on your keyboard; notice how it automatically opens the dropdown menus and navigates to the first item in the dropdown list.

I was wondering if this is possible either through some custom code or interactions in some way? It is important to note this solution would need to work with either site-wide code or within a component to ensure it works across all website pages.

I created an example basic project (read-only link) with a navigation bar at the top with dropdown elements that I want to have open when they are focused using the keyboard.

Additional context about how the focused (keyboard) state works in Webflow and why it’s so important for accessibility.

Let me know if I need to provide any additional information.