From 38f33bbd83e17c262c2ee1f06617d304f533c1d9 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 7 May 2026 20:54:26 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20accessibility?=
 =?UTF-8?q?=20attributes=20and=20focus=20rings=20to=20Navbar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added `aria-expanded` and `aria-haspopup` to the Forum dropdown button.
- Added `aria-expanded` and `aria-controls` to the mobile menu toggle button.
- Added explicitly associated `id="mobile-menu"` to the mobile menu container.
- Added explicit keyboard focus rings (`focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-500`) to interactive, icon-only buttons (theme toggles, mobile menu).
- Documented findings in `.jules/palette.md`.

Co-authored-by: belpythons <187399139+belpythons@users.noreply.github.com>
---
 .jules/palette.md                |  3 +++
 src/components/layout/Navbar.jsx | 15 ++++++++++-----
 2 files changed, 13 insertions(+), 5 deletions(-)
 create mode 100644 .jules/palette.md

diff --git a/.jules/palette.md b/.jules/palette.md
new file mode 100644
index 0000000..3deb21c
--- /dev/null
+++ b/.jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-05-23 - Interactive Disclosure Widgets & Icon-only Focus Rings
+**Learning:** Global navigation elements, mobile menus, and interactive dropdowns often lack `aria-expanded` attributes, making it difficult for screen readers to understand their state. Furthermore, icon-only buttons frequently miss explicit focus rings, hampering keyboard navigation.
+**Action:** Always include `aria-expanded` for interactive disclosure widgets to communicate state to screen readers. For interactive icon-only elements, ensure they include explicit focus rings like `focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-500` to comply with keyboard accessibility standards.
\ No newline at end of file
diff --git a/src/components/layout/Navbar.jsx b/src/components/layout/Navbar.jsx
index de3fea5..4426c25 100644
--- a/src/components/layout/Navbar.jsx
+++ b/src/components/layout/Navbar.jsx
@@ -95,7 +95,9 @@ const Navbar = () => {
             <div className="relative" ref={dropdownRef}>
               <button
                 onClick={toggleDropdown}
-                className={`flex items-center space-x-1 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 ${location.pathname.startsWith('/forum')
+                aria-expanded={isDropdownOpen}
+                aria-haspopup="true"
+                className={`flex items-center space-x-1 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-500 ${location.pathname.startsWith('/forum')
                     ? 'text-accent-500 bg-accent-50 dark:bg-navy-800'
                     : 'text-gray-700 dark:text-slate-300 hover:text-accent-500 hover:bg-gray-50 dark:hover:bg-navy-800'
                   }`}
@@ -139,7 +141,7 @@ const Navbar = () => {
             {/* Theme Toggle Button */}
             <button
               onClick={toggleTheme}
-              className="p-2 rounded-lg text-gray-600 dark:text-slate-300 hover:bg-gray-100 dark:hover:bg-navy-800 transition-all duration-300"
+              className="p-2 rounded-lg text-gray-600 dark:text-slate-300 hover:bg-gray-100 dark:hover:bg-navy-800 transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-500"
               aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
             >
               <FontAwesomeIcon
@@ -161,7 +163,7 @@ const Navbar = () => {
             {/* Theme Toggle - Mobile */}
             <button
               onClick={toggleTheme}
-              className="p-2 rounded-lg text-gray-600 dark:text-slate-300 hover:bg-gray-100 dark:hover:bg-navy-800 transition-colors duration-200"
+              className="p-2 rounded-lg text-gray-600 dark:text-slate-300 hover:bg-gray-100 dark:hover:bg-navy-800 transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-500"
               aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
             >
               <FontAwesomeIcon
@@ -172,7 +174,10 @@ const Navbar = () => {
 
             <button
               onClick={toggleMobile}
-              className="text-gray-700 dark:text-slate-300 hover:text-accent-500 p-2"
+              aria-expanded={isOpen}
+              aria-controls="mobile-menu"
+              aria-label={isOpen ? "Close mobile menu" : "Open mobile menu"}
+              className="text-gray-700 dark:text-slate-300 hover:text-accent-500 p-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-500"
             >
               <FontAwesomeIcon icon={isOpen ? faTimes : faBars} className="text-xl" />
             </button>
@@ -180,7 +185,7 @@ const Navbar = () => {
         </div>
 
         {/* Mobile Navigation */}
-        <div className={`md:hidden transition-all duration-300 ease-in-out ${isOpen ? 'max-h-screen opacity-100' : 'max-h-0 opacity-0 overflow-hidden'}`}>
+        <div id="mobile-menu" className={`md:hidden transition-all duration-300 ease-in-out ${isOpen ? 'max-h-screen opacity-100' : 'max-h-0 opacity-0 overflow-hidden'}`}>
           <div className="px-2 pt-2 pb-3 space-y-1 bg-white dark:bg-navy-900 border-t border-gray-200 dark:border-navy-700">
             {navLinks.map((link) => (
               <Link