From 00fa281ca70dda9afa7d582290cb8754c3e8dde2 Mon Sep 17 00:00:00 2001
From: Johnson Mao <tutelary.maomao@gmail.com>
Date: Sat, 2 Nov 2024 21:34:30 +0800
Subject: [PATCH] fix: sonar cloud issue

---
 components/shared/Carousel/v2/CarouselMain.tsx       |  4 +++-
 components/shared/Carousel/v2/CarouselPagination.tsx |  2 +-
 components/shared/InputOTP/inputOTP.stories.tsx      |  1 -
 components/shared/Modal/Modal.tsx                    | 12 ++++++++++--
 components/shared/SelectBoxGroup/SelectBoxGroup.tsx  |  2 +-
 .../components/GameRoomActions/GameRoomActions.tsx   |  1 -
 6 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/components/shared/Carousel/v2/CarouselMain.tsx b/components/shared/Carousel/v2/CarouselMain.tsx
index 026be15b..5f4a1da4 100644
--- a/components/shared/Carousel/v2/CarouselMain.tsx
+++ b/components/shared/Carousel/v2/CarouselMain.tsx
@@ -5,7 +5,9 @@ import { cn } from "@/lib/utils";
 import { useCarousel } from "./CarouselContext";
 import { CarouselMainProps } from "./Carousel.type";
 
-export default function CarouselMain({ className }: CarouselMainProps) {
+export default function CarouselMain({
+  className,
+}: Readonly<CarouselMainProps>) {
   const { showIndex, items, Component, renderKey } = useCarousel();
   const [carouselItemWidth, setCarouselItemWidth] = useState(0);
   const carouselRef = useRef<HTMLDivElement>(null);
diff --git a/components/shared/Carousel/v2/CarouselPagination.tsx b/components/shared/Carousel/v2/CarouselPagination.tsx
index c8984f87..b988d5ae 100644
--- a/components/shared/Carousel/v2/CarouselPagination.tsx
+++ b/components/shared/Carousel/v2/CarouselPagination.tsx
@@ -4,7 +4,7 @@ import { CarouselActionType, CarouselPaginationProps } from "./Carousel.type";
 
 export default function CarouselPagination({
   className,
-}: CarouselPaginationProps) {
+}: Readonly<CarouselPaginationProps>) {
   const { showIndex, items, renderKey } = useCarousel();
   const dispatch = useCarouselDispatch();
 
diff --git a/components/shared/InputOTP/inputOTP.stories.tsx b/components/shared/InputOTP/inputOTP.stories.tsx
index 3e4029e2..90fb1500 100644
--- a/components/shared/InputOTP/inputOTP.stories.tsx
+++ b/components/shared/InputOTP/inputOTP.stories.tsx
@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { useArgs } from "@storybook/preview-api";
 
 import InputOTP from ".";
 
diff --git a/components/shared/Modal/Modal.tsx b/components/shared/Modal/Modal.tsx
index 117968a4..2ae322bb 100644
--- a/components/shared/Modal/Modal.tsx
+++ b/components/shared/Modal/Modal.tsx
@@ -3,6 +3,7 @@ import React, {
   useEffect,
   ForwardRefRenderFunction,
   forwardRef,
+  KeyboardEventHandler,
 } from "react";
 import { cn } from "@/lib/utils";
 import Portal from "../Portal/Portal";
@@ -52,6 +53,12 @@ const InternalModal: ForwardRefRenderFunction<HTMLDivElement, ModalProps> = (
 
   const [removeDOM, setRemoveDOM] = useState(!isOpen);
 
+  const handleKeyUp: KeyboardEventHandler = (e) => {
+    if (maskClosable && e.key === "Enter") {
+      onClose?.();
+    }
+  };
+
   useEffect(() => {
     let timer: NodeJS.Timeout;
 
@@ -80,7 +87,9 @@ const InternalModal: ForwardRefRenderFunction<HTMLDivElement, ModalProps> = (
             isOpen ? "opacity-100" : "opacity-0"
           )}
           data-testid="modal-mask"
+          tabIndex={maskClosable ? 0 : -1}
           onClick={maskClosable ? onClose : undefined}
+          onKeyUp={handleKeyUp}
         />
         <div
           className={cn(
@@ -88,7 +97,6 @@ const InternalModal: ForwardRefRenderFunction<HTMLDivElement, ModalProps> = (
             containerSizeMap[size],
             isOpen ? "opacity-100" : "opacity-0"
           )}
-          data-testid="modal-container"
         >
           <BoxFancy
             ref={ref}
@@ -98,7 +106,7 @@ const InternalModal: ForwardRefRenderFunction<HTMLDivElement, ModalProps> = (
               dialogSize[size]
             )}
             {...restProps}
-            role="dialog"
+            role="alertdialog"
           >
             <header className="text-[22px] text-center">{title}</header>
             <div>{children}</div>
diff --git a/components/shared/SelectBoxGroup/SelectBoxGroup.tsx b/components/shared/SelectBoxGroup/SelectBoxGroup.tsx
index c18bf56c..18e59517 100644
--- a/components/shared/SelectBoxGroup/SelectBoxGroup.tsx
+++ b/components/shared/SelectBoxGroup/SelectBoxGroup.tsx
@@ -44,7 +44,7 @@ function SelectBoxGroup<T = string>({
   itemClassName,
   itemWrapperClassName,
   onChange,
-}: SelectBoxGroupProps<T>) {
+}: Readonly<SelectBoxGroupProps<T>>) {
   const reactId = useId();
   const selectBoxId = `select_box_${reactId}`;
 
diff --git a/features/room/components/GameRoomActions/GameRoomActions.tsx b/features/room/components/GameRoomActions/GameRoomActions.tsx
index e2255519..bebf8861 100644
--- a/features/room/components/GameRoomActions/GameRoomActions.tsx
+++ b/features/room/components/GameRoomActions/GameRoomActions.tsx
@@ -6,7 +6,6 @@ import useRequest from "@/hooks/useRequest";
 import { useRouter } from "next/router";
 import { useToast } from "@/components/shared/Toast";
 import useUser from "@/hooks/useUser";
-import { CarouselItemProps } from "@/components/shared/Carousel/v2";
 import { GameType } from "@/requests/games";
 import { fastJoinGameEndpoint } from "@/requests/rooms";
 import Icon from "@/components/shared/Icon";