Fix issues in the Navbar components

xNS5 / rentalreviews

A simple web applicaiton for displaying reviews of local property management companies and apartment complexes

GNU General Public License v3.0

0 stars 0 forks source link

Fix issues in the Navbar components #46

Closed xNS5 closed 1 day ago

xNS5 commented 1 week ago

[x] Can't use tab/arrow keys to interact with dropdown items in desktop navbar
[x] Add aria attributes to mobile hamburger open/close buttons
[x] Review tabbing in mobile navbar component

xNS5 commented 1 week ago

For the desktop navbar, the dropdown menu is less of a navigation menu, which may be a good reason to switch back to the shadcn component.

xNS5 commented 6 days ago

Haha, well, I totally forgot why I avoided the shadcn component in the first place: there isn't a way to add a focus ring around the trigger element itself. I'll start researching other components in the meantime.

xNS5 commented 6 days ago

Added additional functionality to close the mobile navbar when clicking a main link, or when clicking a link in a dropdown element.

Next step is going to be to run an accessibility audit on the navbar itself.

[x] Ensure that all elements can be reached using arrows + tabs
[ ] Ensure that all elements have a focus ring

xNS5 commented 4 days ago

The new navbar component is messing up the tabindex order because it's being rendered at the bottom of the DOM. I'll need to hand-roll my own focus trap to ensure that it's navigable right off the bat.

https://github.com/nextui-org/nextui/issues/3757

xNS5 commented 2 days ago

The issue isn't that it's getting rendered at the bottom of the DOM, it's that it's rendered.at the bottom of the DOM and isn't trapping focus.

The lack of focus trapping is the primary issue -- not where the elements are being rendered.

In other news, I'm close to being done with the navbar, I think. The mobile and desktop navbars need some small tweaks, namely with tab behavior in the nav menu component and accordion component. With the desktop view, the menu uses arrow keys + tabs to navigate the child elements. With the Accordion, it just uses tabs. Ideally I'd like to use one or the other to unify the user experience.

xNS5 commented 1 day ago

Finished running over the navbar with the screen reader. There's a bit of weirdness with the mobile view accordion, but I think it's fine for now. The user can still use tabs to interact with it.

xNS5 commented 1 day ago

TODO:

[x] Fix mobile accordion text size. It's ever so slightly smaller than the rest of the text and it's annoying me.