From 9b5de372757a0f54b6ae108aa693ad445e12be22 Mon Sep 17 00:00:00 2001
From: Chase Naples <Cnaples79@gmail.com>
Date: Sat, 14 Feb 2026 17:10:31 -0500
Subject: [PATCH 1/3] fix: improve focus outlines

---
 frontend/src/components/Footer.tsx | 12 +++++++-----
 frontend/src/components/Header.tsx | 14 +++++++++++---
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
index e656122bbf..facbdc171a 100644
--- a/frontend/src/components/Footer.tsx
+++ b/frontend/src/components/Footer.tsx
@@ -27,7 +27,7 @@ export default function Footer() {
               <Button
                 disableAnimation
                 onPress={() => toggleSection(section.title)}
-                className="flex w-full items-center justify-between bg-transparent pl-0 text-left text-lg font-semibold focus:ring-slate-400 focus:outline-hidden lg:cursor-default"
+                className="flex w-full items-center justify-between bg-transparent pl-0 text-left text-lg font-semibold rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 lg:cursor-default"
                 aria-expanded={openSection === section.title}
                 aria-controls={`footer-section-${section.title}`}
               >
@@ -42,8 +42,10 @@ export default function Footer() {
               </Button>
               <div
                 id={`footer-section-${section.title}`}
-                className={`flex flex-col gap-2 overflow-hidden text-sm transition-all duration-300 ease-in-out lg:max-h-full ${
-                  openSection === section.title ? 'max-h-96' : 'max-h-0 lg:max-h-full'
+                className={`flex flex-col gap-2 text-sm transition-all duration-300 ease-in-out ${
+                  openSection === section.title
+                    ? 'max-h-96'
+                    : 'max-h-0 overflow-hidden lg:max-h-full lg:overflow-visible'
                 }`}
               >
                 {section.links.map((link) => (
@@ -52,7 +54,7 @@ export default function Footer() {
                       <span className="text-slate-600 dark:text-slate-400">{link.text}</span>
                     ) : (
                       <Link
-                        className="text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-100"
+                        className="rounded-md text-slate-600 hover:text-slate-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 dark:text-slate-400 dark:hover:text-slate-100"
                         href={link.href || '/'}
                         rel="noopener noreferrer"
                         target="_blank"
@@ -78,7 +80,7 @@ export default function Footer() {
                 target="_blank"
                 rel="noopener noreferrer"
                 aria-label={`OWASP Nest ${social.label}`}
-                className="text-slate-600 transition-colors duration-200 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-100"
+                className="rounded-full p-2 text-slate-600 transition-colors duration-200 hover:text-slate-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 dark:text-slate-400 dark:hover:text-slate-100"
               >
                 <SocialIcon className="h-4 w-4" />
               </Link>
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index f01500362f..1daf8348c8 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -58,7 +58,11 @@ export default function Header({ isGitHubAuthEnabled }: { readonly isGitHubAuthE
     <header className="bg-owasp-blue fixed inset-x-0 top-0 z-50 w-full shadow-md dark:bg-slate-800">
       <div className="flex h-16 w-full items-center px-4 max-lg:justify-between" id="navbar-sticky">
         {/* Logo */}
-        <Link href="/" onClick={() => setMobileMenuOpen(false)}>
+        <Link
+          href="/"
+          onClick={() => setMobileMenuOpen(false)}
+          className="group rounded-lg focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
+        >
           <div className="flex h-full items-center">
             <div className="flex h-16 w-16 items-center justify-center py-2">
               <Image
@@ -133,7 +137,7 @@ export default function Header({ isGitHubAuthEnabled }: { readonly isGitHubAuthE
           <div className="lg:hidden">
             <Button
               onPress={toggleMobileMenu}
-              className="flex h-11 w-11 items-center justify-center bg-transparent text-slate-300 hover:bg-transparent hover:text-slate-100 focus:outline-hidden"
+              className="flex h-11 w-11 items-center justify-center rounded-lg bg-transparent text-slate-300 hover:bg-transparent hover:text-slate-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
             >
               <span className="sr-only">Open main menu</span>
               {mobileMenuOpen ? <FaTimes className="h-6 w-6" /> : <FaBars className="h-6 w-6" />}
@@ -150,7 +154,11 @@ export default function Header({ isGitHubAuthEnabled }: { readonly isGitHubAuthE
         <div className="flex h-full flex-col justify-between gap-1 px-2 pt-2 pb-3">
           {/* Logo */}
           <div className="flex flex-col justify-center gap-5">
-            <Link href="/" onClick={() => setMobileMenuOpen(false)}>
+            <Link
+              href="/"
+              onClick={() => setMobileMenuOpen(false)}
+              className="group rounded-lg focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
+            >
               <div className="flex h-full items-center">
                 <div className="flex h-16 w-16 items-center justify-center py-2">
                   <Image

From d1299e04ce15db939dcc9661ee4413bc226ba5e6 Mon Sep 17 00:00:00 2001
From: Chase Naples <Cnaples79@gmail.com>
Date: Sat, 14 Feb 2026 17:32:30 -0500
Subject: [PATCH 2/3] a11y: improve focus indicator consistency

- Add focus-visible styles to version link in Footer for consistency
- Remove unused 'group' class from Header logo links
- Ensures all interactive elements have consistent keyboard navigation indicators
---
 frontend/src/components/Footer.tsx | 2 +-
 frontend/src/components/Header.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
index facbdc171a..4f67141b52 100644
--- a/frontend/src/components/Footer.tsx
+++ b/frontend/src/components/Footer.tsx
@@ -96,7 +96,7 @@ export default function Footer() {
             {RELEASE_VERSION && (
               <p className="text-sm text-slate-600 dark:text-slate-400">
                 <Link
-                  className="text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-100"
+                  className="rounded-md text-slate-600 hover:text-slate-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 dark:text-slate-400 dark:hover:text-slate-100"
                   href={
                     ENVIRONMENT === 'production'
                       ? `https://github.com/OWASP/Nest/releases/tag/${RELEASE_VERSION}`
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index 1daf8348c8..cfbf5b7e33 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -61,7 +61,7 @@ export default function Header({ isGitHubAuthEnabled }: { readonly isGitHubAuthE
         <Link
           href="/"
           onClick={() => setMobileMenuOpen(false)}
-          className="group rounded-lg focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
+          className="rounded-lg focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
         >
           <div className="flex h-full items-center">
             <div className="flex h-16 w-16 items-center justify-center py-2">
@@ -157,7 +157,7 @@ export default function Header({ isGitHubAuthEnabled }: { readonly isGitHubAuthE
             <Link
               href="/"
               onClick={() => setMobileMenuOpen(false)}
-              className="group rounded-lg focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
+              className="rounded-lg focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
             >
               <div className="flex h-full items-center">
                 <div className="flex h-16 w-16 items-center justify-center py-2">

From e32688a04a3d8f943476ba72985d11f5ff885390 Mon Sep 17 00:00:00 2001
From: Arkadii Yakovets <arkadii.yakovets@owasp.org>
Date: Sat, 14 Feb 2026 17:39:38 -0800
Subject: [PATCH 3/3] Update code

---
 frontend/src/components/Footer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
index 4f67141b52..1ef3ce7c70 100644
--- a/frontend/src/components/Footer.tsx
+++ b/frontend/src/components/Footer.tsx
@@ -27,7 +27,7 @@ export default function Footer() {
               <Button
                 disableAnimation
                 onPress={() => toggleSection(section.title)}
-                className="flex w-full items-center justify-between bg-transparent pl-0 text-left text-lg font-semibold rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 lg:cursor-default"
+                className="flex w-full items-center justify-between rounded-md bg-transparent pl-0 text-left text-lg font-semibold focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 lg:cursor-default"
                 aria-expanded={openSection === section.title}
                 aria-controls={`footer-section-${section.title}`}
               >