Files
payload/packages/next
Riley Pearce 2d2e7d50f0 fix(next): remove keyboard focus for closed nav items (#9558)
Fixes: #9610.

### What?

Currently some links inside the main nav are still focusable with a
keyboard when the main nav is closed.

### Why?

This leads to the active keyboard focus getting lost until it eventually
finds its way to the hamburger menu button. It can also lead to links
that are not currently visible being selected accidentally.

### How?

When the [inert
attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert)
is set to `true`, we can prevent focus on any child elements
automatically. We simply toggle the attribute on or off based on whether
the nav is open or closed.

The inert attribute has [great
compatibility](https://caniuse.com/mdn-html_global_attributes_inert)
with modern browsers these days, making it a solid choice to resolve
this issue.

### Recordings

#### Before

You can see down the bottom left of the screen that links available in
the main nav are still focusable even when the main nav is closed.


https://github.com/user-attachments/assets/e16d5336-7d2b-42f1-886b-cfa3ed82dbb1

#### After

You can see that focus is immediately moved to the hamburger menu when
the main nav is closed.


https://github.com/user-attachments/assets/8c81197a-53aa-4af1-8e5c-f6835ba955a5
2024-11-29 13:58:40 -07:00
..
2024-11-29 12:59:59 -05:00
2024-04-10 13:41:10 -04:00
2024-11-11 13:59:05 -05:00