fix non-auto fixable biome errors)

apps/app/src/client/components/Common/ImageCropModal.tsx

@@ -184,7 +184,11 @@ const ImageCropModal: FC<Props> = (props: Props) => {
                 circularCrop={isCircular}
               />
             ) : (
-              <img style={{ maxWidth: imageRef?.width }} src={imageRef?.src} />
+              <img
+                style={{ maxWidth: imageRef?.width }}
+                src={imageRef?.src}
+                alt="Cropped preview"
+              />
             )}
           </ModalBody>
           <ModalFooter>

apps/app/src/client/components/Icons/RecentlyCreatedIcon.tsx

@@ -7,6 +7,7 @@ export const RecentlyCreatedIcon = (): JSX.Element => (
     height="20"
     viewBox="0 0 20 20"
   >
+    <title>Recently created</title>
     <g transform="translate(-921.906 192.966)">
       <rect
         width="20"

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

@@ -35,6 +35,30 @@ const ShareLink = dynamic(
   { ssr: false },
 );
 
+const PageHistoryIcon = (): JSX.Element => (
+  <span className="material-symbols-outlined">history</span>
+);
+const PageAttachmentIcon = (): JSX.Element => (
+  <span className="material-symbols-outlined">attachment</span>
+);
+const ShareLinkIcon = (): JSX.Element => (
+  <span className="material-symbols-outlined">share</span>
+);
+
+const PageHistoryContent = (): JSX.Element => {
+  const { close } = usePageAccessoriesModalActions();
+
+  return <PageHistory onClose={close} />;
+};
+
+const PageAttachmentContent = (): JSX.Element => {
+  return <PageAttachment />;
+};
+
+const ShareLinkContent = (): JSX.Element => {
+  return <ShareLink />;
+};
+
 interface PageAccessoriesModalSubstanceProps {
   isWindowExpanded: boolean;
   setIsWindowExpanded: (expanded: boolean) => void;
@@ -59,27 +83,19 @@ const PageAccessoriesModalSubstance = ({
   const navTabMapping = useMemo(() => {
     return {
       [PageAccessoriesModalContents.PageHistory]: {
-        Icon: () => <span className="material-symbols-outlined">history</span>,
-        Content: () => {
-          return <PageHistory onClose={close} />;
-        },
+        Icon: PageHistoryIcon,
+        Content: PageHistoryContent,
         i18n: t('History'),
         isLinkEnabled: () => !isGuestUser && !isSharedUser,
       },
       [PageAccessoriesModalContents.Attachment]: {
-        Icon: () => (
-          <span className="material-symbols-outlined">attachment</span>
-        ),
-        Content: () => {
-          return <PageAttachment />;
-        },
+        Icon: PageAttachmentIcon,
+        Content: PageAttachmentContent,
         i18n: t('attachment_data'),
       },
       [PageAccessoriesModalContents.ShareLink]: {
-        Icon: () => <span className="material-symbols-outlined">share</span>,
-        Content: () => {
-          return <ShareLink />;
-        },
+        Icon: ShareLinkIcon,
+        Content: ShareLinkContent,
         i18n: t('share_links.share_link_management'),
         isLinkEnabled: () =>
           !isGuestUser &&
@@ -88,14 +104,7 @@ const PageAccessoriesModalSubstance = ({
           !isLinkSharingDisabled,
       },
     };
-  }, [
-    t,
-    close,
-    isGuestUser,
-    isReadOnlyUser,
-    isSharedUser,
-    isLinkSharingDisabled,
-  ]);
+  }, [t, isGuestUser, isReadOnlyUser, isSharedUser, isLinkSharingDisabled]);
 
   // Memoize expand/contract handlers
   const expandWindow = useCallback(

apps/app/src/client/components/PageAccessoriesModal/ShareLink/ShareLinkForm.tsx

@@ -108,7 +108,7 @@ export const ShareLinkForm: FC<Props> = (props: Props) => {
   }, [onCloseForm]);
 
   const handleIssueShareLink = useCallback(async () => {
-    let expiredAt;
+    let expiredAt: Date | null;
 
     try {
       expiredAt = generateExpired();

apps/app/src/client/components/PageComment/SwitchingButtonGroup.tsx

@@ -42,7 +42,7 @@ export const SwitchingButtonGroup = (props: Props): JSX.Element => {
   const { showPreview, onSelected } = props;
 
   return (
-    <div className={`btn-group ${moduleClass}`} role="group">
+    <fieldset className={`btn-group ${moduleClass}`} aria-label="Comment view">
       <SwitchingButton
         active={showPreview}
         className="ps-2 pe-3"
@@ -59,6 +59,6 @@ export const SwitchingButtonGroup = (props: Props): JSX.Element => {
         <span className="material-symbols-outlined me-1">edit_square</span>
         <span className="d-none d-sm-inline">{t('page_comment.write')}</span>
       </SwitchingButton>
-    </div>
+    </fieldset>
   );
 };

apps/app/src/client/components/PageControls/BookmarkButtons.tsx

@@ -59,9 +59,8 @@ export const BookmarkButtons: FC<Props> = (props: Props) => {
   }
 
   return (
-    <div
+    <fieldset
       className={`btn-group btn-group-bookmark ${styles['btn-group-bookmark']}`}
-      role="group"
       aria-label="Bookmark buttons"
     >
       <BookmarkFolderMenu
@@ -124,6 +123,6 @@ export const BookmarkButtons: FC<Props> = (props: Props) => {
           )}
         </PopoverBody>
       </Popover>
-    </div>
+    </fieldset>
   );
 };

apps/app/src/client/components/PageControls/LikeButtons.tsx

@@ -37,9 +37,8 @@ const LikeButtons: FC<LikeButtonsProps> = (props: LikeButtonsProps) => {
   }, [isLiked]);
 
   return (
-    <div
+    <fieldset
       className={`btn-group btn-group-like ${styles['btn-group-like']}`}
-      role="group"
       aria-label="Like buttons"
     >
       <button
@@ -90,7 +89,7 @@ const LikeButtons: FC<LikeButtonsProps> = (props: LikeButtonsProps) => {
           </div>
         </PopoverBody>
       </Popover>
-    </div>
+    </fieldset>
   );
 };
 

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

@@ -3,6 +3,7 @@ import React, {
   memo,
   useCallback,
   useEffect,
+  useId,
   useMemo,
   useRef,
 } from 'react';
@@ -90,6 +91,7 @@ const WideViewMenuItem = (props: WideViewMenuItemProps): JSX.Element => {
   const { t } = useTranslation();
 
   const { onClick, expandContentWidth } = props;
+  const wideViewId = useId();
 
   return (
     <DropdownItem
@@ -101,10 +103,13 @@ const WideViewMenuItem = (props: WideViewMenuItemProps): JSX.Element => {
         <input
           className="form-check-input pe-none"
           type="checkbox"
+          id={wideViewId}
           checked={expandContentWidth}
           onChange={() => {}}
         />
-        <label className="form-check-label pe-none">{t('wide_view')}</label>
+        <label className="form-check-label pe-none" htmlFor={wideViewId}>
+          {t('wide_view')}
+        </label>
       </div>
     </DropdownItem>
   );