fix non-autofixable biome errors

apps/app/src/client/components/CompleteUserRegistrationForm.tsx

@@ -121,11 +121,7 @@ export const CompleteUserRegistrationForm: React.FC<Props> = (props: Props) => {
               </p>
             )}
 
-            <form
-              role="form"
-              onSubmit={handleSubmitRegistration}
-              id="registration-form"
-            >
+            <form onSubmit={handleSubmitRegistration} id="registration-form">
               <input type="hidden" name="token" value={token} />
 
               <div className="input-group">

apps/app/src/client/components/DataTransferForm.tsx

@@ -48,7 +48,7 @@ const DataTransferForm = (): JSX.Element => {
         <p className="mb-1">{t('g2g_data_transfer.once_transfer_key_used')}</p>
         <p
           className="mb-0"
-          // eslint-disable-next-line react/no-danger
+          // biome-ignore lint/security/noDangerouslySetInnerHtml: translation contains HTML link
           dangerouslySetInnerHTML={{
             __html: t('g2g_data_transfer.transfer_to_growi_cloud', {
               documentationUrl,

apps/app/src/client/components/IdenticalPathPage.tsx

@@ -46,7 +46,7 @@ const IdenticalPathAlert: FC<IdenticalPathAlertProps> = (
         })}
         <br />
         <span
-          // eslint-disable-next-line react/no-danger
+          // biome-ignore lint/security/noDangerouslySetInnerHtml: translation contains HTML link
           dangerouslySetInnerHTML={{
             __html: t('See_more_detail_on_new_schema', {
               title: t('GROWI.5.0_new_schema'),

apps/app/src/client/components/InstallerForm.tsx

@@ -117,7 +117,7 @@ const InstallerForm = memo((props: Props): JSX.Element => {
           <div className="col-12">
             <div className="alert alert-danger text-center">
               {registerErrors.map((err) => (
-                <span>
+                <span key={err.message}>
                   {tWithOpt(err.message, err.args)}
                   <br />
                 </span>
@@ -126,12 +126,7 @@ const InstallerForm = memo((props: Props): JSX.Element => {
           </div>
         )}
 
-        <form
-          role="form"
-          id="register-form"
-          className="ps-1"
-          onSubmit={submitHandler}
-        >
+        <form id="register-form" className="ps-1" onSubmit={submitHandler}>
           <div className="dropdown mb-3">
             <div className="input-group dropdown-with-icon">
               <span className="p-2 text-white opacity-75">
@@ -149,9 +144,9 @@ const InstallerForm = memo((props: Props): JSX.Element => {
                 <span className="float-start">{t('meta.display_name')}</span>
               </button>
               <input type="hidden" name="registerForm[app:globalLang]" />
-              <div className="dropdown-menu" aria-labelledby="dropdownLanguage">
+              <div className="dropdown-menu">
                 {i18nConfig.locales.map((locale) => {
-                  let fixedT;
+                  let fixedT: ((key: string) => string) | undefined;
                   if (i18n != null) {
                     fixedT = i18n.getFixedT(locale);
                     i18n.loadLanguages(i18nConfig.locales);

apps/app/src/client/components/InvitedForm.tsx

@@ -67,7 +67,7 @@ export const InvitedForm = (props: InvitedFormProps): JSX.Element => {
           <p className="alert alert-danger">
             {loginErrors.map((err) => {
               return (
-                <span>
+                <span key={err.message}>
                   {t(err.message)}
                   <br />
                 </span>
@@ -92,11 +92,7 @@ export const InvitedForm = (props: InvitedFormProps): JSX.Element => {
   return (
     <div className="nologin-dialog px-3 pb-3 mx-auto" id="nologin-dialog">
       {formNotification()}
-      <form
-        role="form"
-        onSubmit={handleSubmit(submitHandler)}
-        id="invited-form"
-      >
+      <form onSubmit={handleSubmit(submitHandler)} id="invited-form">
         {/* Email Form */}
         <div className="input-group">
           <span className="input-group-text">

apps/app/src/client/components/NotFoundPage.tsx

@@ -9,25 +9,36 @@ type NotFoundPageProps = {
   path: string;
 };
 
+const PageListIcon = () => (
+  <span className="material-symbols-outlined">subject</span>
+);
+const TimelineIcon = () => (
+  <span className="material-symbols-outlined">timeline</span>
+);
+
 const NotFoundPage = (props: NotFoundPageProps): JSX.Element => {
   const { t } = useTranslation();
 
   const { path } = props;
 
+  const PageListContent = useMemo(() => {
+    return () => <DescendantsPageList path={path} />;
+  }, [path]);
+
   const navTabMapping = useMemo(() => {
     return {
       pagelist: {
-        Icon: () => <span className="material-symbols-outlined">subject</span>,
-        Content: () => <DescendantsPageList path={path} />,
+        Icon: PageListIcon,
+        Content: PageListContent,
         i18n: t('page_list'),
       },
       timeLine: {
-        Icon: () => <span className="material-symbols-outlined">timeline</span>,
+        Icon: TimelineIcon,
         Content: PageTimeline,
         i18n: t('Timeline View'),
       },
     };
-  }, [path, t]);
+  }, [PageListContent, t]);
 
   return (
     <div className="d-edit-none">

apps/app/src/client/components/PasswordResetExecutionForm.tsx

@@ -54,7 +54,7 @@ const PasswordResetExecutionForm: FC = () => {
   };
 
   return (
-    <form role="form" onSubmit={changePassword}>
+    <form onSubmit={changePassword}>
       <div>
         <div className="input-group">
           <input

apps/app/src/client/components/PrivateLegacyPagesMigrationModal.tsx

@@ -112,7 +112,7 @@ const PrivateLegacyPagesMigrationModalSubstance = ({
       </ModalHeader>
       <ModalBody>
         <div className="grw-scrollable-modal-body pb-1">
-          <label>{t('private_legacy_pages.modal.converting_pages')}:</label>
+          <div>{t('private_legacy_pages.modal.converting_pages')}:</div>
           <br />
           {/* Todo: change the way to show path on modal when too many pages are selected */}
           {/* https://redmine.weseek.co.jp/issues/82787 */}

apps/app/src/client/components/SearchTypeahead.tsx

@@ -93,19 +93,19 @@ const SearchTypeahead: ForwardRefRenderFunction<IFocusable, Props> = (
 
   const typeaheadRef = useRef<TypeaheadRef>(null);
 
-  const focusToTypeahead = () => {
+  const focusToTypeahead = useCallback(() => {
     const instance = typeaheadRef.current;
     if (instance != null) {
       instance.focus();
     }
-  };
+  }, []);
 
-  const clearTypeahead = () => {
+  const clearTypeahead = useCallback(() => {
     const instance = typeaheadRef.current;
     if (instance != null) {
       instance.clear();
     }
-  };
+  }, []);
 
   // publish focus()
   useImperativeHandle(ref, () => ({
@@ -126,7 +126,7 @@ const SearchTypeahead: ForwardRefRenderFunction<IFocusable, Props> = (
         onSearch('');
       }
     },
-    [onSearch],
+    [onSearch, clearTypeahead, focusToTypeahead],
   );
 
   const searchHandler = useCallback(

apps/app/src/client/components/StickyStretchableScroller.tsx

@@ -86,6 +86,7 @@ export const StickyStretchableScroller = (
     [resetScrollbar],
   );
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: ignore
   useEffect(() => {
     resetScrollbarDebounced();
   }, [isSticky, resetScrollbarDebounced]);

apps/app/src/client/components/TagCloudBox.tsx

@@ -32,14 +32,14 @@ const TagCloudBox: FC<Props> = memo((props: Props & typeof defaultProps) => {
         : tag.name;
 
     return (
-      <a
+      <button
         key={tag.name}
         type="button"
         className="grw-tag badge me-2"
         onClick={() => setSearchKeyword(`tag:${tag.name}`)}
       >
         {tagNameFormat}
-      </a>
+      </button>
     );
   });
 

apps/app/src/client/components/TrashPageList.tsx

@@ -104,6 +104,10 @@ const DescendantsPageListForTrash = (): JSX.Element => {
   );
 };
 
+const PageListIcon = () => (
+  <span className="material-symbols-outlined">subject</span>
+);
+
 export const TrashPageList = (): JSX.Element => {
   const { t } = useTranslation();
   const emptyTrashButton = useEmptyTrashButton();
@@ -111,7 +115,7 @@ export const TrashPageList = (): JSX.Element => {
   const navTabMapping = useMemo(() => {
     return {
       pagelist: {
-        Icon: () => <span className="material-symbols-outlined">subject</span>,
+        Icon: PageListIcon,
         Content: DescendantsPageListForTrash,
         i18n: t('page_list'),
       },