Improve navbar accessibility and labels

[tripledoublev]

This improves navbar accessibility and clarity without intentionally changing the overall shell layout.

What changed

• components/Navbar.tsx: replaces the mobile site-menu trigger with a real <button> and adds aria-controls, aria-expanded, and an open/close label
• components/Navbar.tsx: replaces the mobile profile-menu trigger with a real <button> and adds the same accessibility attributes
• components/Navbar.tsx: marks the mobile close icons as decorative with alt="" and aria-hidden="true"
• components/Navbar.tsx: increases desktop dropdown trigger contrast from muted text to full white
• components/NavbarComponents.tsx: shortens top-level desktop nav labels from “Browse Bills / Browse Hearings / Browse Testimony / Browse Ballot Questions” to “Bills / Hearings / Testimony / Ballot Questions”
• public/locales/en/common.json: adds the new shorter label strings plus explicit open/close menu labels for assistive tech
• styles/globals.css: adds a visible keyboard focus style for the mobile nav trigger buttons

What to look for in the browser

• Open the app locally (for my review this was http://localhost:3003)
• On desktop, confirm the top-level nav labels are shorter and easier to scan
• Confirm the desktop nav text has stronger contrast against the blue navbar
• Switch to a mobile viewport
• Use Tab to focus the left menu trigger and the right profile trigger
• Confirm each trigger shows a visible white focus ring
• Activate each trigger and confirm the menu opens and closes normally

Good pages to test

• /
• any page with the desktop navbar visible at full width
• the same page in a mobile viewport

What should stay the same

• The navbar layout should feel visually the same overall
• The mobile menu and profile menu should still open and close in the same places
• The logo and auth actions should not shift position

Deeper verification

• Inspect the mobile trigger buttons and confirm they are actual <button> elements
• Confirm each mobile trigger has aria-controls and aria-expanded
• Confirm the open/close button labels are announced correctly by accessibility tools
• Confirm the close icon images are decorative only and not announced as meaningful content

Summary

• This PR is successful if the navbar keeps the same overall structure, while the mobile menu/profile triggers become real keyboard-accessible buttons with clear focus states and the desktop top-level labels become shorter and more readable.

[tripledoublev]

[tripledoublev]

While testing this in the browser, we found a keyboard accessibility bug in the desktop navbar dropdowns.

The dropdown rows were composed as NavDropdown.Item wrapping NavLink, which created nested interactive elements. In practice that produced two tab stops and two focus states for a single visible option, so keyboard users had to tab twice through items like Support MAPLE.

Fixed in 98105413