Navbar accessibility for keyboard users

[Olaleye-Blessing]

Current Behavior Keyboard users can't access the dropdown menu on the navbar. They can only be accessed when they are hover.

Desired Behavior They should have have access to those drop down menus.

---

Screenshots / Mockups

The dropdown menu is only available to mouse users.

Alternatives

---

Contributor Resources

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.

• See contributing instructions
• See Layer5 site designs in this Figma project. Fill-in the Layer5 Community Member Form and join the Layer5 Community Slack for access.

[leecalcote]

Confirmed. This is an accessibility issue. Do you have a proposed solution, @Olaleye-Blessing? tabindex?

[Olaleye-Blessing]

I'm not really sure if this is going to work since the hover state is achieved through Javascript.

Checking ScrollspyMenu that displays the content, I think we can call wrapDisplay that displays the submenu when either the nav link is focused or any or its sublink.

A possible solution could look like this:

Have a parent ref for line 42.

const ulRef = useRef(null);

check if any inner sibling is focused add onFocus to parent ul: line 42.

function onFocus() { const ul = ulRef.current; const isChildFocused= ul.contains(document.activeElement); // checks if any child is focused if(isChildFocused) wrapDisplay(); }

wrapNone removes the submenu

add onBlur to the last submenu item so as to call wrapNone

function onBlurred() { wrapNone() }

I'll like to make a pull request.

[Olaleye-Blessing]

I tried the above solution which I proposed but it's not working. There's just a flash of the dropdown menus when the first menu is focused. Someone else can work on it pending the time I figure it out.

[Palaksharma23]

@Olaleye-Blessing @leecalcote I would love to work on this issue, can I take this up :)

[leecalcote]

Sounds great, @Palaksharma23

[adithyaakrishna]

@Palaksharma23 Any updates on this?

[Palaksharma23]

I got a little busy @adithyaakrishna, I will do it now!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[github-actions[bot]]

Checking in... it has been awhile since we've heard from you on this issue. Are you still working on it? Please let us know and please don't hesitate to contact a MeshMate or any other community member for assistance.

---

        Be sure to join the community, if you haven't yet and please leave a :star: star on the project :smile:

[Nikhil-Ladha]

We can live with the accessibility, no need for this much granularity.