fix: add keyboard navigation support

frontend/src/app/dev/page.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import React from 'react'
+import ModuleList from 'components/ModuleList'
+
+export default function DevModuleListPage() {
+  const lessThan5 = ['Module 1', 'Module 2', 'Module 3']
+  const exactly5 = ['Module 1', 'Module 2', 'Module 3', 'Module 4', 'Module 5']
+  const manyModules = Array.from({ length: 8 }, (_, i) => `Module ${i + 1}`)
+  const sixModules = Array.from({ length: 6 }, (_, i) => `Module ${i + 1}`)
+  const longModule = [
+    'This is a very long module name that exceeds fifty characters and should be truncated',
+  ]
+  const emptyStrings = ['', 'Valid Module', '']
+
+  // show empty / undefined / null cases (cast to any to allow rendering in dev)
+  const undefinedModules = undefined as any
+  const nullModules = null as any
+  const emptyArray: string[] = []
+
+  return (
+    <main className="min-h-screen p-8 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
+      <h1 className="mb-4 text-2xl font-bold">Dev: ModuleList</h1>
+      <p className="mb-6 text-sm text-gray-600 dark:text-gray-400">
+        Use Tab + Enter/Space to test keyboard activation and focus rings. This page renders the
+        same scenarios covered by the unit tests.
+      </p>
+
+      <section className="mb-8">
+        <h2 className="mb-2 font-semibold">Less than 5 modules</h2>
+        <ModuleList modules={lessThan5} />
+      </section>
+
+      <section className="mb-8">
+        <h2 className="mb-2 font-semibold">Exactly 5 modules</h2>
+        <ModuleList modules={exactly5} />
+      </section>
+
+      <section className="mb-8">
+        <h2 className="mb-2 font-semibold">More than 5 modules (8 items)</h2>
+        <ModuleList modules={manyModules} />
+      </section>
+
+      <section className="mb-8">
+        <h2 className="mb-2 font-semibold">Edge case: exactly 6 modules</h2>
+        <ModuleList modules={sixModules} />
+      </section>
+
+      <section className="mb-8">
+        <h2 className="mb-2 font-semibold">Long module name (truncation)</h2>
+        <ModuleList modules={longModule} />
+      </section>
+
+      <section className="mb-8">
+        <h2 className="mb-2 font-semibold">Modules with empty strings</h2>
+        <ModuleList modules={emptyStrings} />
+      </section>
+
+      <section className="mb-8">
+        <h2 className="mb-2 font-semibold">Empty / undefined / null (should render nothing)</h2>
+        <div className="space-y-4">
+          <div>
+            <div className="mb-1 text-sm text-gray-500">Empty array</div>
+            <ModuleList modules={emptyArray} />
+          </div>
+          <div>
+            <div className="mb-1 text-sm text-gray-500">Undefined (dev cast)</div>
+            <ModuleList modules={undefinedModules} />
+          </div>
+          <div>
+            <div className="mb-1 text-sm text-gray-500">Null (dev cast)</div>
+            <ModuleList modules={nullModules} />
+          </div>
+        </div>
+      </section>
+    </main>
+  )
+}

frontend/src/components/ActionButton.tsx

@@ -6,11 +6,13 @@ import React, { ReactNode } from 'react'
 interface ActionButtonProps {
   url?: string
   onClick?: () => void
+  onKeyDown?: React.KeyboardEventHandler<HTMLAnchorElement | HTMLButtonElement>
   tooltipLabel?: string
   children: ReactNode
+  className?: string
 }
 
-const ActionButton: React.FC<ActionButtonProps> = ({ url, onClick, tooltipLabel, children }) => {
+const ActionButton: React.FC<ActionButtonProps> = ({ url, onClick, tooltipLabel, children, onKeyDown, className = '' }) => {
   const baseStyles =
     'flex items-center gap-2 px-2 py-2 rounded-md border border-[#1D7BD7] transition-all whitespace-nowrap justify-center bg-transparent text-[#1D7BD7] hover:bg-[#1D7BD7] hover:text-white dark:hover:text-white'
 
@@ -20,18 +22,19 @@ const ActionButton: React.FC<ActionButtonProps> = ({ url, onClick, tooltipLabel,
         href={url}
         target="_blank"
         rel="noopener noreferrer"
-        className={baseStyles}
+        className={`${baseStyles} ${className}`}
         data-tooltip-id="button-tooltip"
         data-tooltip-content={tooltipLabel}
         onClick={onClick}
+        onKeyDown={onKeyDown}
         aria-label={tooltipLabel}
       >
         {children}
       </Link>
     </TooltipWrapper>
   ) : (
     <TooltipWrapper tooltipLabel={tooltipLabel}>
-      <Button onPress={onClick} className={baseStyles} aria-label={tooltipLabel}>
+      <Button onPress={onClick} onKeyDown={onKeyDown} className={`${baseStyles} ${className}`} aria-label={tooltipLabel}>
         {children}
       </Button>
     </TooltipWrapper>

frontend/src/components/Card.tsx

@@ -144,7 +144,18 @@ const Card = ({
 
           {/* Action Button */}
           <div className="flex sm:justify-end">
-            <ActionButton tooltipLabel={tooltipLabel} url={button.url} onClick={button.onclick}>
+            <ActionButton 
+              tooltipLabel={tooltipLabel} 
+              url={button.url} 
+              onClick={button.onclick}
+              onKeyDown={(e: React.KeyboardEvent) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault()
+                  button.onclick?.()
+                }
+              }}
+              className="focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1"
+            >
               {button.icon}
               {button.label}
             </ActionButton>

frontend/src/components/ModuleList.tsx

@@ -22,7 +22,7 @@ const ModuleList: React.FC<ModuleListProps> = ({ modules }) => {
           return (
             <button
               key={`${module}-${index}`}
-              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"
+              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 focus-visible:ring-1"
               title={module.length > 50 ? module : undefined}
               type="button"
               aria-label={`Module: ${module}`}
@@ -37,7 +37,7 @@ const ModuleList: React.FC<ModuleListProps> = ({ modules }) => {
             disableAnimation
             aria-label={showAll ? 'Show fewer modules' : 'Show more modules'}
             onPress={() => setShowAll((prev) => !prev)}
-            className="mt-4 flex items-center bg-transparent text-blue-400 hover:underline"
+            className="mt-4 flex items-center bg-transparent text-blue-400 hover:underline focus:ring-1"
           >
             {showAll ? (
               <>

frontend/src/components/Release.tsx

@@ -74,7 +74,8 @@ const Release: React.FC<ReleaseProps> = ({
           <div className="flex flex-1 items-center overflow-hidden">
             <FontAwesomeIcon icon={faFolderOpen} className="mr-2 h-5 w-4" />
             <button
-              className="cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap text-gray-600 hover:underline dark:text-gray-400"
+              type="button"
+              className="cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap text-gray-600 hover:underline dark:text-gray-400 focus-visible:ring-2"
               disabled={!release.organizationName || !release.repositoryName}
               onClick={() => {
                 const org = release.organizationName || ''
@@ -83,6 +84,15 @@ const Release: React.FC<ReleaseProps> = ({
                 router.push(`/organizations/${org}/repositories/${repo}`)
               }}
               aria-label={`View repository ${release.repositoryName}`}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault()
+                  const org = release.organizationName || ''
+                  const repo = release.repositoryName || ''
+                  if (!org || !repo) return
+                  router.push(`/organizations/${org}/repositories/${repo}`)
+                }
+              }}
             >
               <TruncatedText text={release.repositoryName} />
             </button>

frontend/src/components/Search.tsx

@@ -76,8 +76,10 @@
               icon={faSearch}
               className="pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400"
             />
+            <label htmlFor="search-input" className="sr-only">Search</label>
             <input
               ref={inputRef}
+              id="search-input"
               type="text"
               value={searchQuery}
               onChange={handleSearchChange}
@@ -86,9 +88,11 @@
             />
             {searchQuery && (
               <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"
+                type="button"
+                aria-label="Clear search"
+                className="absolute top-1/2 right-2 -translate-y-1/2 rounded-full p-1 hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-300 focus-visible:ring-offset-1"
                 onClick={handleClearSearch}
                 aria-label="Clear search"
               >
                 <FontAwesomeIcon icon={faTimes} />
               </button>

frontend/src/components/ShowMoreButton.tsx

@@ -17,7 +17,9 @@ const ShowMoreButton = ({ onToggle }: { onToggle: () => void }) => {
         type="button"
         disableAnimation
         onPress={handleToggle}
-        className="flex items-center bg-transparent px-0 text-blue-400"
+        aria-expanded={isExpanded}
+        aria-label={isExpanded ? 'Show less items' : 'Show more items'}
+        className="flex items-center bg-transparent px-0 text-blue-400 focus:outline-none focus-visible:ring-1 focus-visible:ring-offset-1"
       >
         {isExpanded ? (
           <>

frontend/src/components/SortBy.tsx

@@ -24,7 +24,7 @@ const SortBy = ({
           classNames={{
             label: 'font-medium text-sm text-gray-700 dark:text-gray-300 w-auto select-none pe-0',
             trigger:
-              'bg-transparent data-[hover=true]:bg-transparent focus:outline-none focus:ring-0 border-none shadow-none text-nowrap w-32 min-h-8 h-8 text-sm font-medium text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 transition-all duration-0',
+              'bg-transparent data-[hover=true]:bg-transparent focus:outline-none focus-visible:ring-1 focus-visible:ring-1 focus-visible:ring-offset-1 border-none shadow-none text-nowrap w-32 min-h-8 h-8 text-sm font-medium text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 transition-all duration-0',
             value: 'text-gray-800 dark:text-gray-200 font-medium',
             selectorIcon: 'text-gray-500 dark:text-gray-400 transition-transform duration-200',
             popoverContent:
@@ -42,7 +42,7 @@ const SortBy = ({
             <SelectItem
               key={option.key}
               classNames={{
-                base: 'text-sm text-gray-700 dark:text-gray-300 hover:bg-transparent dark:hover:bg-transparent focus:bg-gray-100 dark:focus:bg-[#404040] focus:outline-none rounded-sm px-3 py-2 cursor-pointer transition-colors duration-150 data-[selected=true]:bg-blue-50 dark:data-[selected=true]:bg-blue-900/20 data-[selected=true]:text-blue-600 dark:data-[selected=true]:text-blue-400 data-[focus=true]:bg-gray-100 dark:data-[focus=true]:bg-[#404040]',
+                base:'text-sm text-gray-700 dark:text-gray-300 hover:bg-transparent dark:hover:bg-transparent focus:bg-gray-100 dark:focus:bg-[#404040] focus:outline-none rounded-sm px-3 py-2 cursor-pointer transition-colors duration-150 data-[selected=true]:bg-blue-50 dark:data-[selected=true]:bg-blue-900/20 data-[selected=true]:text-blue-600 dark:data-[selected=true]:text-blue-400 data-[focus=true]:bg-gray-100 dark:data-[focus=true]:bg-[#404040] focus:ring-1 focus-visible:ring-offset-1',
               }}
             >
               {option.label}
@@ -61,8 +61,15 @@ const SortBy = ({
           closeDelay={100}
         >
           <button
+            aria-pressed={selectedOrder === 'asc'}
             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"
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault()
+                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:outline-none focus-visible:ring-2 focus-visible:ring-gray-300 focus-visible:ring-offset-1 dark:border-gray-600 dark:bg-[#323232] dark:hover:bg-[#404040] dark:focus-visible:ring-gray-500"
             aria-label={
               selectedOrder === 'asc' ? 'Sort in ascending order' : 'Sort in descending order'
             }

frontend/src/components/ToggleableList.tsx

@@ -39,8 +39,15 @@ const ToggleableList = ({
         {(showAll ? items : items.slice(0, limit)).map((item) => (
           <button
             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"
+            type="button"
+            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 focus:outline-none focus-visible:ring-1 focus-visible:ring-offset-1 transition"
             onClick={() => !isDisabled && handleButtonClick({ item })}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault()
+                if (!isDisabled) handleButtonClick({ item })
+              }
+            }}
             aria-label={`Search for projects with ${item}`}
             disabled={isDisabled}
           >