fix: add missing type attributes on buttons

frontend/__tests__/unit/components/LoginPageContent.test.tsx

@@ -404,8 +404,8 @@ describe('LoginPageContent', () => {
 
       const button = screen.getByRole('button', { name: /sign in with github/i })
       expect(button).toBeInTheDocument()
-      // Button doesn't have explicit type attribute, defaults to submit for form buttons
-      expect(button).not.toHaveAttribute('type')
+      // Button has explicit type="button" to prevent form submission behavior
+      expect(button).toHaveAttribute('type', 'button')
     })
 
     it('provides meaningful text for screen readers in all states', () => {

frontend/src/app/page.tsx

@@ -170,6 +170,7 @@ export default function Home() {
                 <div className="rounded-lg bg-gray-200 p-4 dark:bg-gray-700">
                   <div className="mb-2 flex items-center justify-between">
                     <button
+                      type="button"
                       className="cursor-pointer text-left text-lg font-semibold text-blue-400 hover:underline"
                       onClick={() => setModalOpenIndex(index)}
                     >

frontend/src/app/projects/dashboard/metrics/page.tsx

@@ -106,6 +106,7 @@ const SortableColumnHeader: FC<{
   return (
     <div className={`flex items-center gap-1 ${alignmentClass}`}>
       <button
+        type="button"
         onClick={handleClick}
         className={`flex items-center gap-1 font-semibold transition-colors hover:text-blue-600 ${textAlignClass}`}
         title={`Sort by ${label}`}

frontend/src/components/LoginPageContent.tsx

@@ -71,6 +71,7 @@ const LoginPageContent: FC<LoginPageContentProps> = ({ isGitHubAuthEnabled }) =>
         </p>
 
         <button
+          type="button"
           onClick={() => signIn('github', { callbackUrl: '/' })}
           className="flex w-full items-center justify-center gap-2 rounded-lg bg-black px-4 py-2 font-medium text-white transition-colors hover:bg-gray-900/90"
         >

frontend/src/components/MenteeIssues.tsx

@@ -117,6 +117,7 @@ const MenteeIssues: React.FC<MenteeIssuesProps> = ({ openIssues, closedIssues, m
       {/* Tab Navigation */}
       <div className="mb-4 flex border-b border-gray-200">
         <button
+          type="button"
           onClick={() => setActiveTab('open')}
           className={`border-b-2 px-4 py-2 text-sm font-medium transition-colors ${
             activeTab === 'open'
@@ -128,6 +129,7 @@ const MenteeIssues: React.FC<MenteeIssuesProps> = ({ openIssues, closedIssues, m
           Open Issues ({openIssues.length})
         </button>
         <button
+          type="button"
           onClick={() => setActiveTab('closed')}
           className={`border-b-2 px-4 py-2 text-sm font-medium transition-colors ${
             activeTab === 'closed'

frontend/src/components/Milestones.tsx

@@ -56,6 +56,7 @@ const Milestones: React.FC<ProjectMilestonesProps> = ({
             <div className="flex flex-1 items-center overflow-hidden">
               <FontAwesomeIcon icon={faFolderOpen} className="mr-2 h-5 w-4" />
               <button
+                type="button"
                 className="cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap text-gray-600 hover:underline dark:text-gray-400"
                 onClick={() =>
                   router.push(

frontend/src/components/MultiSearch.tsx

@@ -274,6 +274,7 @@ const MultiSearchBar: React.FC<MultiSearchBarProps> = ({
                       }`}
                     >
                       <button
+                        type="button"
                         onClick={() => handleSuggestionClick(hit, suggestion.indexName)}
                         className="flex w-full cursor-pointer items-center overflow-hidden border-none bg-transparent p-0 text-left"
                       >

frontend/src/components/NavDropDown.tsx

@@ -40,6 +40,7 @@ export default function NavDropdown({ link, pathname }: NavDropDownProps) {
       )}
     >
       <button
+        type="button"
         className="flex items-center gap-2 whitespace-nowrap"
         onClick={() => setIsOpen((prev) => !prev)}
         aria-expanded={isOpen}

frontend/src/components/RecentIssues.tsx

@@ -36,6 +36,7 @@ const RecentIssues: React.FC<RecentIssuesProps> = ({ data, showAvatar = true })
             <div className="flex flex-1 items-center overflow-hidden">
               <FontAwesomeIcon icon={faFolderOpen} className="mr-2 h-5 w-4" />
               <button
+                type="button"
                 className="cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap text-gray-600 hover:underline dark:text-gray-400"
                 onClick={() =>
                   router.push(

frontend/src/components/RecentPullRequests.tsx

@@ -37,6 +37,7 @@ const RecentPullRequests: React.FC<RecentPullRequestsProps> = ({ data, showAvata
             <div className="mr-4 flex flex-1 items-center overflow-hidden">
               <FontAwesomeIcon icon={faFolderOpen} className="mr-2 h-5 w-4" />
               <button
+                type="button"
                 className="cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap text-gray-600 hover:underline dark:text-gray-400"
                 onClick={() =>
                   router.push(

frontend/src/components/Release.tsx

@@ -74,6 +74,7 @@ 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
+              type="button"
               className="cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap text-gray-600 hover:underline dark:text-gray-400"
               disabled={!release.organizationName || !release.repositoryName}
               onClick={() => {

frontend/src/components/RepositoryCard.tsx

@@ -41,6 +41,7 @@ const RepositoryItem = ({ details }: { details: RepositoryCardProps }) => {
     <div className="flex h-46 w-full flex-col gap-3 rounded-lg border-1 border-gray-200 p-4 shadow-xs ease-in-out hover:shadow-md dark:border-gray-700 dark:bg-gray-800">
       <div className="flex items-start justify-between gap-2">
         <button
+          type="button"
           onClick={handleClick}
           className="min-w-0 flex-1 cursor-pointer text-start font-semibold text-blue-400 hover:underline"
         >

frontend/src/components/ScrollToTop.tsx

@@ -33,6 +33,7 @@ export default function ScrollToTop() {
 
   return (
     <button
+      type="button"
       onClick={scrollToTop}
       aria-label="Scroll to top"
       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'} `}

frontend/src/components/Search.tsx

@@ -86,6 +86,7 @@ const SearchBar: React.FC<SearchProps> = ({
             />
             {searchQuery && (
               <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"

frontend/src/components/SortBy.tsx

@@ -61,6 +61,7 @@ const SortBy = ({
           closeDelay={100}
         >
           <button
+            type="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={

frontend/src/components/ToggleableList.tsx

@@ -38,6 +38,7 @@ const ToggleableList = ({
       <div className="flex flex-wrap gap-2">
         {(showAll ? items : items.slice(0, limit)).map((item) => (
           <button
+            type="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"
             onClick={() => !isDisabled && handleButtonClick({ item })}

frontend/src/components/UserMenu.tsx

@@ -46,6 +46,7 @@ export default function UserMenu({
   if (status === 'unauthenticated') {
     return (
       <button
+        type="button"
         onClick={() => signIn('github', { callbackUrl: '/', prompt: 'login' })}
         className="group relative flex h-10 cursor-pointer items-center justify-center gap-2 rounded-md bg-[#87a1bc] p-4 text-sm font-medium text-black hover:ring-1 hover:ring-[#b0c7de] dark:bg-slate-900 dark:text-white dark:hover:bg-slate-900/90 dark:hover:ring-[#46576b]"
       >
@@ -66,6 +67,7 @@ export default function UserMenu({
   return (
     <div ref={dropdownRef} className="relative flex items-center justify-center">
       <button
+        type="button"
         onClick={() => setIsOpen((prev) => !prev)}
         aria-expanded={isOpen}
         aria-haspopup="true"
@@ -109,7 +111,12 @@ export default function UserMenu({
             </Link>
           )}
 
-          <button onClick={handleLogout} disabled={isLoggingOut} className={userMenuItemClasses}>
+          <button
+            type="button"
+            onClick={handleLogout}
+            disabled={isLoggingOut}
+            className={userMenuItemClasses}
+          >
             {isLoggingOut ? 'Signing out...' : 'Sign out'}
           </button>
         </div>