Add aria-labels to interactive elements for WCAG 2.1 compliance

frontend/src/components/AnchorTitle.tsx

@@ -50,6 +50,7 @@ const AnchorTitle: React.FC<AnchorTitleProps> = ({ title }) => {
           href={href}
           className="inherit-color ml-2 opacity-0 transition-opacity duration-200 group-hover:opacity-100"
           onClick={handleClick}
+          aria-label={`Link to ${title} section`}
         >
           <FontAwesomeIcon icon={faLink} className="custom-icon h-7 w-5" />
         </a>

frontend/src/components/Card.tsx

@@ -117,6 +117,7 @@ const Card = ({
                   target="_blank"
                   rel="noopener noreferrer"
                   className="transition-colors"
+                  aria-label={item.title || 'Social media link'}
                 >
                   <FontAwesomeIcon
                     icon={getSocialIcon(item.url)}

frontend/src/components/ModuleList.tsx

@@ -25,6 +25,7 @@ const ModuleList: React.FC<ModuleListProps> = ({ modules }) => {
               className="rounded-lg border border-gray-400 px-3 py-1 text-sm transition-all duration-200 ease-in-out hover:scale-105 hover:bg-gray-200 dark:border-gray-300 dark:hover:bg-gray-700"
               title={module.length > 50 ? module : undefined}
               type="button"
+              aria-label={`Module: ${module}`}
             >
               {displayText}
             </button>

frontend/src/components/Pagination.tsx

@@ -65,6 +65,7 @@ const Pagination: React.FC<PaginationProps> = ({
           className="flex h-10 min-w-10 items-center justify-center rounded-md border-1 border-gray-200 bg-white px-3 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
           onPress={() => onPageChange(Math.max(1, currentPage - 1))}
           disabled={currentPage === 1}
+          aria-label="Go to previous page"
         >
           Prev
         </Button>
@@ -82,6 +83,7 @@ const Pagination: React.FC<PaginationProps> = ({
               <Button
                 type="button"
                 aria-current={currentPage === number ? 'page' : undefined}
+                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'
@@ -99,6 +101,7 @@ const Pagination: React.FC<PaginationProps> = ({
           className="flex h-10 min-w-10 items-center justify-center rounded-md border-1 border-gray-200 bg-white px-3 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
           onPress={() => onPageChange(Math.min(totalPages, currentPage + 1))}
           disabled={currentPage === totalPages}
+          aria-label="Go to next page"
         >
           Next
         </Button>

frontend/src/components/ProgramActions.tsx

@@ -72,6 +72,9 @@ const ProgramActions: React.FC<ProgramActionsProps> = ({ status, setStatus }) =>
         type="button"
         onClick={() => setDropdownOpen((prev) => !prev)}
         className="rounded px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700"
+        aria-label="Program actions menu"
+        aria-expanded={dropdownOpen}
+        aria-haspopup="true"
       >
         <FontAwesomeIcon icon={faEllipsisV} />
       </button>

frontend/src/components/Release.tsx

@@ -78,6 +78,7 @@ const Release: React.FC<ReleaseProps> = ({
                 if (!org || !repo) return
                 router.push(`/organizations/${org}/repositories/${repo}`)
               }}
+              aria-label={`View repository ${release.repositoryName}`}
             >
               <TruncatedText text={release.repositoryName} />
             </button>

frontend/src/components/Search.tsx

@@ -88,6 +88,7 @@ const SearchBar: React.FC<SearchProps> = ({
               <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} />
               </button>

frontend/src/components/SortBy.tsx

@@ -63,6 +63,9 @@ const SortBy = ({
           <button
             onClick={() => onOrderChange(selectedOrder === 'asc' ? 'desc' : 'asc')}
             className="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-gray-300 bg-gray-100 p-0 shadow-sm transition-all duration-200 hover:bg-gray-200 hover:shadow-md focus:ring-2 focus:ring-gray-300 focus:ring-offset-1 focus:outline-none dark:border-gray-600 dark:bg-[#323232] dark:hover:bg-[#404040] dark:focus:ring-gray-500"
+            aria-label={
+              selectedOrder === 'asc' ? 'Sort in ascending order' : 'Sort in descending order'
+            }
           >
             {selectedOrder === 'asc' ? (
               <FontAwesomeIcon

frontend/src/components/ToggleableList.tsx

@@ -41,6 +41,8 @@ const ToggleableList = ({
             key={item}
             className="rounded-lg border border-gray-400 px-3 py-1 text-sm hover:bg-gray-200 dark:border-gray-300 dark:hover:bg-gray-700"
             onClick={() => !isDisabled && handleButtonClick({ item })}
+            aria-label={`Search for projects with ${item}`}
+            disabled={isDisabled}
           >
             {item}
           </button>