From 1124d55cec4e9482f7e4a39bfc0cad45dd60db94 Mon Sep 17 00:00:00 2001
From: Abhishek Sonje <code.abhishek03@gmail.com>
Date: Thu, 11 Dec 2025 12:02:16 +0000
Subject: [PATCH 1/2] feat(a11y): add ARIA labels to improve accessibility

---
 frontend/src/components/MetricsPDFButton.tsx | 13 ++++++++++---
 frontend/src/components/NavDropDown.tsx      |  6 +++++-
 frontend/src/components/Pagination.tsx       | 11 +++++------
 frontend/src/components/ScrollToTop.tsx      |  6 ++++--
 frontend/src/components/Search.tsx           | 10 +++++++---
 5 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/MetricsPDFButton.tsx b/frontend/src/components/MetricsPDFButton.tsx
index 1a1db63d0d..dc8a44453f 100644
--- a/frontend/src/components/MetricsPDFButton.tsx
+++ b/frontend/src/components/MetricsPDFButton.tsx
@@ -19,11 +19,18 @@ const MetricsPDFButton: FC<{
       closeDelay={100}
       showArrow
     >
+      <button
+        type="button"
+        onClick={async () => await fetchMetricsPDF(path, fileName)}
+        className="ml-2 cursor-pointer text-gray-500 transition-colors duration-200 hover:text-gray-700"
+        aria-label="Download metrics as PDF"
+      >
       <FontAwesomeIcon
         icon={faFileArrowDown}
-        className="ml-2 h-7 w-7 cursor-pointer text-gray-500 transition-colors duration-200 hover:text-gray-700"
-        onClick={async () => await fetchMetricsPDF(path, fileName)}
-      />
+        className="h-7 w-7"
+        aria-hidden="true"
+        />
+      </button>
     </Tooltip>
   )
 }
diff --git a/frontend/src/components/NavDropDown.tsx b/frontend/src/components/NavDropDown.tsx
index a4aadab30a..449029b4fa 100644
--- a/frontend/src/components/NavDropDown.tsx
+++ b/frontend/src/components/NavDropDown.tsx
@@ -42,8 +42,9 @@ export default function NavDropdown({ link, pathname }: NavDropDownProps) {
       <button
         className="flex cursor-pointer items-center gap-2 whitespace-nowrap"
         onClick={() => setIsOpen((prev) => !prev)}
+        aria-label={`${link.text} menu`}
         aria-expanded={isOpen}
-        aria-haspopup="true"
+        aria-haspopup="menu"
         aria-controls={dropdownId}
         onKeyDown={(e) => {
           if (e.key === 'Enter' || e.key === ' ') {
@@ -65,6 +66,7 @@ export default function NavDropdown({ link, pathname }: NavDropDownProps) {
       </button>
       {isOpen && (
         <div
+          role="menu"
           id={dropdownId}
           className="absolute top-full left-0 z-10 mt-1 w-48 overflow-hidden rounded-md bg-white shadow-lg dark:bg-slate-800"
         >
@@ -72,6 +74,8 @@ export default function NavDropdown({ link, pathname }: NavDropDownProps) {
             <Link
               key={`${submenu.href}-${idx}`}
               href={submenu.href || '/'}
+              role="menuitem"
+              aria-current={pathname === submenu.href ? 'page' : undefined}
               className={cn(
                 'block w-full px-4 py-2 text-left text-sm transition-colors',
                 pathname === submenu.href
diff --git a/frontend/src/components/Pagination.tsx b/frontend/src/components/Pagination.tsx
index 14a92203fc..7dea157f2a 100644
--- a/frontend/src/components/Pagination.tsx
+++ b/frontend/src/components/Pagination.tsx
@@ -58,7 +58,7 @@ const Pagination: React.FC<PaginationProps> = ({
   if (!isLoaded || totalPages <= 1) return null
 
   return (
-    <div className="mt-8 flex flex-col items-center justify-center gap-3">
+    <nav className="mt-8 flex flex-col items-center justify-center gap-3" aria-label='Pagination'>
       <div className="flex flex-wrap items-center justify-center gap-2">
         <Button
           type="button"
@@ -74,16 +74,15 @@ const Pagination: React.FC<PaginationProps> = ({
             {number === '...' ? (
               <span
                 className="flex h-10 w-10 items-center justify-center text-gray-600 dark:text-gray-400"
-                role="presentation"
-                aria-label="More pages"
+                aria-hidden="true"
               >
-                <FontAwesomeIcon icon={faEllipsisH} className="h-5 w-5"></FontAwesomeIcon>
+                <FontAwesomeIcon icon={faEllipsisH} className="h-5 w-5" aria-hidden="true"/>
               </span>
             ) : (
               <Button
                 type="button"
                 aria-current={currentPage === number ? 'page' : undefined}
-                aria-label={`Go to page ${number}`}
+             aria-label={`${currentPage === number ? 'Current page, ' : ''}Page ${number}`}
                 className={`flex h-10 min-w-10 items-center justify-center rounded-md px-3 text-sm font-medium ${
                   currentPage === number
                     ? 'bg-[#83a6cc] text-white dark:bg-white dark:text-black'
@@ -106,7 +105,7 @@ const Pagination: React.FC<PaginationProps> = ({
           Next
         </Button>
       </div>
-    </div>
+    </nav>
   )
 }
 
diff --git a/frontend/src/components/ScrollToTop.tsx b/frontend/src/components/ScrollToTop.tsx
index 3d8f845f3d..3680a97e30 100644
--- a/frontend/src/components/ScrollToTop.tsx
+++ b/frontend/src/components/ScrollToTop.tsx
@@ -35,10 +35,12 @@ export default function ScrollToTop() {
     <button
       type="button"
       onClick={scrollToTop}
-      aria-label="Scroll to top"
+      aria-label="Scroll to top of page"
+      aria-hidden={!isVisible}
+      tabIndex={isVisible ? 0 : -1}
       className={`bg-owasp-blue/70 hover:bg-owasp-blue dark:bg-owasp-blue/30 hover:dark:bg-owasp-blue/50 fixed right-4 bottom-4 z-50 flex h-11 w-11 items-center justify-center rounded-full text-white shadow-lg transition-all duration-400 hover:scale-105 active:scale-100 dark:text-slate-300 ${isVisible ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0'} `}
     >
-      <FontAwesomeIcon icon={faArrowUp} className="text-xl" />
+      <FontAwesomeIcon icon={faArrowUp} className="text-xl" aria-hidden='true' />
     </button>
   )
 }
diff --git a/frontend/src/components/Search.tsx b/frontend/src/components/Search.tsx
index d081c5d337..2e52420ad0 100644
--- a/frontend/src/components/Search.tsx
+++ b/frontend/src/components/Search.tsx
@@ -68,17 +68,20 @@ const SearchBar: React.FC<SearchProps> = ({
   }
 
   return (
-    <div className="w-full max-w-md p-4">
+    <div className="w-full max-w-md p-4" role="search">
       <div className="relative">
         {!isLoaded ? (
           <>
             <FontAwesomeIcon
               icon={faSearch}
               className="pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400"
+              aria-hidden="true"
             />
             <input
               ref={inputRef}
-              type="text"
+              type="search"
+              aria-label="search"
+              aria-describedby={searchQuery ? "search-clear-button" : undefined}
               value={searchQuery}
               onChange={handleSearchChange}
               placeholder={placeholder}
@@ -86,12 +89,13 @@ const SearchBar: React.FC<SearchProps> = ({
             />
             {searchQuery && (
               <button
+                id="search-clear-button"
                 type="button"
                 className="absolute top-1/2 right-2 -translate-y-1/2 rounded-full p-1 hover:bg-gray-100 focus:ring-2 focus:ring-gray-300 focus:outline-hidden"
                 onClick={handleClearSearch}
                 aria-label="Clear search"
               >
-                <FontAwesomeIcon icon={faTimes} />
+                <FontAwesomeIcon icon={faTimes} aria-hidden="true"/>
               </button>
             )}
           </>

From 467b50066ed40699bbde2014bff89250dee80c0e Mon Sep 17 00:00:00 2001
From: Abhishek Sonje <code.abhishek03@gmail.com>
Date: Thu, 11 Dec 2025 15:06:18 +0000
Subject: [PATCH 2/2] feat: Add ARIA labels to improve accessibility

---
 frontend/src/components/MetricsPDFButton.tsx | 6 +-----
 frontend/src/components/NavDropDown.tsx      | 3 +--
 frontend/src/components/Pagination.tsx       | 8 ++++----
 frontend/src/components/ScrollToTop.tsx      | 2 +-
 frontend/src/components/Search.tsx           | 6 +++---
 5 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/MetricsPDFButton.tsx b/frontend/src/components/MetricsPDFButton.tsx
index dc8a44453f..4fd53d1c63 100644
--- a/frontend/src/components/MetricsPDFButton.tsx
+++ b/frontend/src/components/MetricsPDFButton.tsx
@@ -25,11 +25,7 @@ const MetricsPDFButton: FC<{
         className="ml-2 cursor-pointer text-gray-500 transition-colors duration-200 hover:text-gray-700"
         aria-label="Download metrics as PDF"
       >
-      <FontAwesomeIcon
-        icon={faFileArrowDown}
-        className="h-7 w-7"
-        aria-hidden="true"
-        />
+        <FontAwesomeIcon icon={faFileArrowDown} className="h-7 w-7" aria-hidden="true" />
       </button>
     </Tooltip>
   )
diff --git a/frontend/src/components/NavDropDown.tsx b/frontend/src/components/NavDropDown.tsx
index 449029b4fa..796e29102c 100644
--- a/frontend/src/components/NavDropDown.tsx
+++ b/frontend/src/components/NavDropDown.tsx
@@ -44,7 +44,7 @@ export default function NavDropdown({ link, pathname }: NavDropDownProps) {
         onClick={() => setIsOpen((prev) => !prev)}
         aria-label={`${link.text} menu`}
         aria-expanded={isOpen}
-        aria-haspopup="menu"
+        aria-haspopup="true"
         aria-controls={dropdownId}
         onKeyDown={(e) => {
           if (e.key === 'Enter' || e.key === ' ') {
@@ -74,7 +74,6 @@ export default function NavDropdown({ link, pathname }: NavDropDownProps) {
             <Link
               key={`${submenu.href}-${idx}`}
               href={submenu.href || '/'}
-              role="menuitem"
               aria-current={pathname === submenu.href ? 'page' : undefined}
               className={cn(
                 'block w-full px-4 py-2 text-left text-sm transition-colors',
diff --git a/frontend/src/components/Pagination.tsx b/frontend/src/components/Pagination.tsx
index 7dea157f2a..ca4b6c590b 100644
--- a/frontend/src/components/Pagination.tsx
+++ b/frontend/src/components/Pagination.tsx
@@ -58,7 +58,7 @@ const Pagination: React.FC<PaginationProps> = ({
   if (!isLoaded || totalPages <= 1) return null
 
   return (
-    <nav className="mt-8 flex flex-col items-center justify-center gap-3" aria-label='Pagination'>
+    <nav className="mt-8 flex flex-col items-center justify-center gap-3" aria-label="Pagination">
       <div className="flex flex-wrap items-center justify-center gap-2">
         <Button
           type="button"
@@ -74,15 +74,15 @@ const Pagination: React.FC<PaginationProps> = ({
             {number === '...' ? (
               <span
                 className="flex h-10 w-10 items-center justify-center text-gray-600 dark:text-gray-400"
-                aria-hidden="true"
+                aria-label="More pages"
               >
-                <FontAwesomeIcon icon={faEllipsisH} className="h-5 w-5" aria-hidden="true"/>
+                <FontAwesomeIcon icon={faEllipsisH} className="h-5 w-5" aria-hidden="true" />
               </span>
             ) : (
               <Button
                 type="button"
                 aria-current={currentPage === number ? 'page' : undefined}
-             aria-label={`${currentPage === number ? 'Current page, ' : ''}Page ${number}`}
+                aria-label={`Go to page ${number}`}
                 className={`flex h-10 min-w-10 items-center justify-center rounded-md px-3 text-sm font-medium ${
                   currentPage === number
                     ? 'bg-[#83a6cc] text-white dark:bg-white dark:text-black'
diff --git a/frontend/src/components/ScrollToTop.tsx b/frontend/src/components/ScrollToTop.tsx
index 3680a97e30..9c946984a0 100644
--- a/frontend/src/components/ScrollToTop.tsx
+++ b/frontend/src/components/ScrollToTop.tsx
@@ -40,7 +40,7 @@ export default function ScrollToTop() {
       tabIndex={isVisible ? 0 : -1}
       className={`bg-owasp-blue/70 hover:bg-owasp-blue dark:bg-owasp-blue/30 hover:dark:bg-owasp-blue/50 fixed right-4 bottom-4 z-50 flex h-11 w-11 items-center justify-center rounded-full text-white shadow-lg transition-all duration-400 hover:scale-105 active:scale-100 dark:text-slate-300 ${isVisible ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0'} `}
     >
-      <FontAwesomeIcon icon={faArrowUp} className="text-xl" aria-hidden='true' />
+      <FontAwesomeIcon icon={faArrowUp} className="text-xl" aria-hidden="true" />
     </button>
   )
 }
diff --git a/frontend/src/components/Search.tsx b/frontend/src/components/Search.tsx
index 2e52420ad0..07725ca141 100644
--- a/frontend/src/components/Search.tsx
+++ b/frontend/src/components/Search.tsx
@@ -79,9 +79,9 @@ const SearchBar: React.FC<SearchProps> = ({
             />
             <input
               ref={inputRef}
-              type="search"
+              type="text"
               aria-label="search"
-              aria-describedby={searchQuery ? "search-clear-button" : undefined}
+              aria-describedby={searchQuery ? 'search-clear-button' : undefined}
               value={searchQuery}
               onChange={handleSearchChange}
               placeholder={placeholder}
@@ -95,7 +95,7 @@ const SearchBar: React.FC<SearchProps> = ({
                 onClick={handleClearSearch}
                 aria-label="Clear search"
               >
-                <FontAwesomeIcon icon={faTimes} aria-hidden="true"/>
+                <FontAwesomeIcon icon={faTimes} aria-hidden="true" />
               </button>
             )}
           </>