fix non-autofixable biome errors

apps/app/src/client/components/Sidebar/Custom/CustomSidebarNotFound.tsx

@@ -24,10 +24,7 @@ export const SidebarNotFound = (): JSX.Element => {
         onClick={clickCreateButtonHandler}
       >
         <span className="material-symbols-outlined">edit_note</span>
-        {/* eslint-disable-next-line react/no-danger */}
-        <span
-          dangerouslySetInnerHTML={{ __html: t('Create Sidebar Page') }}
-        ></span>
+        <span>{t('Create Sidebar Page')}</span>
       </button>
     </div>
   );

apps/app/src/client/components/Sidebar/InAppNotification/InAppNotification.tsx

@@ -26,6 +26,7 @@ export const InAppNotification = (): JSX.Element => {
       </div>
 
       <InAppNotificationForms
+        isUnopendNotificationsVisible={isUnopendNotificationsVisible}
         onChangeUnopendNotificationsVisible={() => {
           setUnopendNotificationsVisible(!isUnopendNotificationsVisible);
         }}

apps/app/src/client/components/Sidebar/InAppNotification/InAppNotificationSubstance.tsx

@@ -6,12 +6,14 @@ import { InAppNotificationStatuses } from '~/interfaces/in-app-notification';
 import { useSWRxInAppNotifications } from '~/stores/in-app-notification';
 
 type InAppNotificationFormsProps = {
+  isUnopendNotificationsVisible: boolean;
   onChangeUnopendNotificationsVisible: () => void;
 };
 export const InAppNotificationForms = (
   props: InAppNotificationFormsProps,
 ): JSX.Element => {
-  const { onChangeUnopendNotificationsVisible } = props;
+  const { isUnopendNotificationsVisible, onChangeUnopendNotificationsVisible } =
+    props;
   const { t } = useTranslation('commons');
 
   return (
@@ -25,6 +27,8 @@ export const InAppNotificationForms = (
           className="form-check-input"
           type="checkbox"
           role="switch"
+          aria-checked={isUnopendNotificationsVisible}
+          checked={isUnopendNotificationsVisible}
           onChange={onChangeUnopendNotificationsVisible}
         />
       </div>

apps/app/src/client/components/Sidebar/PageCreateButton/CreateButton.tsx

@@ -19,10 +19,7 @@ export const CreateButton = (props: Props): JSX.Element => {
       className={`${moduleClass} btn btn-primary ${props.className ?? ''}`}
     >
       <Hexagon />
-      <span
-        className="icon material-symbols-outlined position-absolute"
-        aria-label="Create"
-      >
+      <span className="icon material-symbols-outlined position-absolute">
         edit
       </span>
     </button>

apps/app/src/client/components/Sidebar/PageCreateButton/Hexagon.tsx

@@ -12,6 +12,7 @@ export const Hexagon = React.memo(
       height="36px"
       className={props.className}
     >
+      <title>Hexagon</title>
       <g className="background" transform="translate(0 0)">
         <path
           d="M20.768,0l6.923,12L20.768,24H6.923L0,12,6.923,0Z"

apps/app/src/client/components/Sidebar/PageCreateButton/PageCreateButton.tsx

@@ -49,11 +49,12 @@ export const PageCreateButton = React.memo((): JSX.Element => {
   const toggle = () => setDropdownOpen(!dropdownOpen);
 
   return (
-    <div
-      className="d-flex flex-row mt-2"
+    <fieldset
+      className="d-flex flex-row mt-2 border-0 p-0 m-0"
       onMouseEnter={onMouseEnterHandler}
       onMouseLeave={onMouseLeaveHandler}
       data-testid="grw-page-create-button"
+      aria-label="Page create actions"
     >
       <div className="btn-group flex-grow-1">
         <CreateButton
@@ -85,6 +86,6 @@ export const PageCreateButton = React.memo((): JSX.Element => {
           />
         </Dropdown>
       )}
-    </div>
+    </fieldset>
   );
 });

apps/app/src/client/components/Sidebar/PageTree/PageTreeSubstance.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useCallback } from 'react';
+import React, { memo, useCallback, useId } from 'react';
 import { useTranslation } from 'next-i18next';
 
 import { ItemsTree } from '~/features/page-tree/components';
@@ -28,6 +28,7 @@ type HeaderProps = {
 export const PageTreeHeader = memo(
   ({ isWipPageShown, onWipPageShownChange }: HeaderProps) => {
     const { t } = useTranslation();
+    const wipSwitchId = useId();
 
     const { mutate: mutateRootPage } = useSWRxRootPage({ suspense: true });
     useSWRxV5MigrationStatus({ suspense: true });
@@ -58,18 +59,28 @@ export const PageTreeHeader = memo(
           </button>
 
           <ul className="dropdown-menu">
-            <li className="dropdown-item" onClick={onWipPageShownChange}>
-              <div className="form-check form-switch">
-                <input
-                  className="form-check-input pe-none"
-                  type="checkbox"
-                  checked={isWipPageShown}
-                  onChange={() => {}}
-                />
-                <label className="form-check-label pe-none">
-                  {t('sidebar_header.show_wip_page')}
-                </label>
-              </div>
+            <li>
+              <button
+                type="button"
+                className="dropdown-item"
+                onClick={onWipPageShownChange}
+              >
+                <div className="form-check form-switch">
+                  <input
+                    id={wipSwitchId}
+                    className="form-check-input pe-none"
+                    type="checkbox"
+                    checked={isWipPageShown}
+                    onChange={() => {}}
+                  />
+                  <label
+                    className="form-check-label pe-none"
+                    htmlFor={wipSwitchId}
+                  >
+                    {t('sidebar_header.show_wip_page')}
+                  </label>
+                </div>
+              </button>
             </li>
           </ul>
         </div>

apps/app/src/client/components/Sidebar/RecentChanges/RecentChangesSubstance.tsx

@@ -1,4 +1,4 @@
-import React, { type JSX, memo, useCallback, useEffect } from 'react';
+import React, { type JSX, memo, useCallback, useEffect, useId } from 'react';
 import { type IPageHasId, isPopulated } from '@growi/core';
 import { DevidedPagePath } from '@growi/core/dist/models';
 import { UserPicture } from '@growi/ui/dist/components';
@@ -72,14 +72,14 @@ const PageTags = memo((props: PageTagsProps): JSX.Element => {
           return <></>;
         }
         return (
-          <a
+          <button
             key={tag.name}
             type="button"
             className="grw-tag badge me-2"
             onClick={() => onClickTag?.(tag.name)}
           >
             {tag.name}
-          </a>
+          </button>
         );
       })}
     </>
@@ -92,7 +92,7 @@ const PageItem = memo(
     const dPagePath = new DevidedPagePath(page.path, false, true);
     const linkedPagePathFormer = new LinkedPagePath(dPagePath.former);
     const linkedPagePathLatter = new LinkedPagePath(dPagePath.latter);
-    const FormerLink = () => (
+    const formerLink = (
       <div
         className={`${formerLinkClass} ${isSmall ? 'text-truncate small' : ''}`}
       >
@@ -100,7 +100,7 @@ const PageItem = memo(
       </div>
     );
 
-    let locked;
+    let locked: JSX.Element | null = null;
     if (page.grant !== 1) {
       locked = (
         <span className="material-symbols-outlined ms-2 fs-6">lock</span>
@@ -122,9 +122,7 @@ const PageItem = memo(
 
           <div className="flex-grow-1 ms-2">
             <div className={`row ${isSmall ? 'gy-0' : 'gy-1'}`}>
-              <div className="col-12">
-                {!dPagePath.isRoot && <FormerLink />}
-              </div>
+              <div className="col-12">{!dPagePath.isRoot && formerLink}</div>
 
               <h6
                 className={`col-12 d-flex align-items-center ${isSmall ? 'mb-0 text-truncate' : 'mb-0'}`}
@@ -177,6 +175,8 @@ export const RecentChangesHeader = ({
   onWipPageShownChange,
 }: HeaderProps): JSX.Element => {
   const { t } = useTranslation();
+  const resizeInputId = useId();
+  const wipInputId = useId();
 
   const { mutate } = useSWRINFxRecentlyUpdated(isWipPageShown, {
     suspense: true,
@@ -215,35 +215,55 @@ export const RecentChangesHeader = ({
         </button>
 
         <ul className="dropdown-menu">
-          <li className="dropdown-item" onClick={changeSizeHandler}>
-            <div
-              className={`${styles['grw-recent-changes-resize-button']} form-check form-switch mb-0`}
+          <li>
+            <button
+              type="button"
+              className="dropdown-item"
+              onClick={changeSizeHandler}
             >
-              <input
-                id="recentChangesResize"
-                className="form-check-input pe-none"
-                type="checkbox"
-                checked={isSmall}
-                onChange={() => {}}
-              />
-              <label className="form-check-label pe-none" aria-disabled="true">
-                {t('sidebar_header.compact_view')}
-              </label>
-            </div>
+              <div
+                className={`${styles['grw-recent-changes-resize-button']} form-check form-switch mb-0`}
+              >
+                <input
+                  id={resizeInputId}
+                  className="form-check-input pe-none"
+                  type="checkbox"
+                  checked={isSmall}
+                  onChange={() => {}}
+                />
+                <label
+                  className="form-check-label pe-none"
+                  htmlFor={resizeInputId}
+                  aria-disabled="true"
+                >
+                  {t('sidebar_header.compact_view')}
+                </label>
+              </div>
+            </button>
           </li>
 
-          <li className="dropdown-item" onClick={onWipPageShownChange}>
-            <div className="form-check form-switch mb-0">
-              <input
-                id="wipPageVisibility"
-                className="form-check-input"
-                type="checkbox"
-                checked={isWipPageShown}
-              />
-              <label className="form-check-label pe-none">
-                {t('sidebar_header.show_wip_page')}
-              </label>
-            </div>
+          <li>
+            <button
+              type="button"
+              className="dropdown-item"
+              onClick={onWipPageShownChange}
+            >
+              <div className="form-check form-switch mb-0">
+                <input
+                  id={wipInputId}
+                  className="form-check-input"
+                  type="checkbox"
+                  checked={isWipPageShown}
+                  onChange={() => {}}
+                />
+                <label
+                  className="form-check-label pe-none"
+                  htmlFor={wipInputId}
+                >
+                  {t('sidebar_header.show_wip_page')}
+                </label>
+              </div>
+            </button>
           </li>
         </ul>
       </div>

apps/app/src/client/components/Sidebar/ResizableArea/ResizableArea.tsx

@@ -85,8 +85,10 @@ export const ResizableArea = memo((props: ResizableAreaProps): JSX.Element => {
       <div className={styles['grw-navigation-draggable']}>
         {!disabled && (
           <>
-            <div
+            <button
+              type="button"
               className="grw-navigation-draggable-hitarea"
+              aria-label="Resize sidebar"
               onMouseDown={dragableAreaMouseDownHandler}
             />
             <div className="grw-navigation-draggable-line"></div>

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

@@ -211,8 +211,8 @@ const CollapsibleContainer = memo(
       : undefined;
 
     return (
-      <div
-        className={`flex-expand-horiz ${className}`}
+      <fieldset
+        className={`flex-expand-horiz border-0 p-0 m-0 ${className}`}
         onMouseLeave={mouseLeaveHandler}
       >
         <Nav onPrimaryItemHover={primaryItemHoverHandler} />
@@ -228,7 +228,7 @@ const CollapsibleContainer = memo(
             {children}
           </SimpleBar>
         </div>
-      </div>
+      </fieldset>
     );
   },
 );
@@ -252,6 +252,9 @@ const DrawableContainer = memo((props: DrawableContainerProps): JSX.Element => {
   const [isDrawerOpened, setIsDrawerOpened] = useDrawerOpened();
 
   const openClass = `${isDrawerOpened ? 'open' : ''}`;
+  const closeDrawer = useCallback(() => {
+    setIsDrawerOpened(false);
+  }, [setIsDrawerOpened]);
 
   return (
     <>
@@ -259,9 +262,11 @@ const DrawableContainer = memo((props: DrawableContainerProps): JSX.Element => {
         {children}
       </div>
       {isDrawerOpened && (
-        <div
+        <button
+          type="button"
           className="modal-backdrop fade show"
-          onClick={() => setIsDrawerOpened(false)}
+          aria-label="Close sidebar"
+          onClick={closeDrawer}
         />
       )}
     </>
@@ -286,7 +291,7 @@ export const Sidebar = (): JSX.Element => {
   // css styles
   const grwSidebarClass = styles['grw-sidebar'];
   // eslint-disable-next-line no-nested-ternary
-  let modeClass;
+  let modeClass = '';
   switch (sidebarMode) {
     case SidebarMode.DRAWER:
       modeClass = 'grw-sidebar-drawer';