From bab05c349667ba912a9cc396fa617b0b9fd5e7b9 Mon Sep 17 00:00:00 2001
From: yue <yue@pixiv.co.jp>
Date: Mon, 3 Jun 2024 10:16:15 +0900
Subject: [PATCH 1/3] fix: modal button aria label

---
 packages/react/src/components/IconButton/index.tsx | 2 +-
 packages/react/src/components/Modal/index.tsx      | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/components/IconButton/index.tsx b/packages/react/src/components/IconButton/index.tsx
index b7adf0141..07d846b25 100644
--- a/packages/react/src/components/IconButton/index.tsx
+++ b/packages/react/src/components/IconButton/index.tsx
@@ -36,7 +36,7 @@ const IconButton = forwardRef<ClickableElement, IconButtonProps>(
         $variant={variant}
         $isActive={isActive}
       >
-        <pixiv-icon name={icon} />
+        <pixiv-icon aria-hidden="true" name={icon} />
       </StyledIconButton>
     )
   }
diff --git a/packages/react/src/components/Modal/index.tsx b/packages/react/src/components/Modal/index.tsx
index 1ac37f4db..f20270d67 100644
--- a/packages/react/src/components/Modal/index.tsx
+++ b/packages/react/src/components/Modal/index.tsx
@@ -26,6 +26,7 @@ export type ModalProps = AriaModalOverlayProps &
     isOpen: boolean
     onClose: () => void
     className?: string
+    closeButtonAriaLabel?: string
 
     /**
      * https://github.com/adobe/react-spectrum/issues/3787
@@ -74,6 +75,7 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(function ModalInner(
     onClose,
     className,
     isOpen = false,
+    closeButtonAriaLabel = 'Close',
   } = props
 
   const ref = useObjectRef<HTMLDivElement>(external)
@@ -165,6 +167,8 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(function ModalInner(
                     <ModalCrossButton
                       size="S"
                       icon="24/Close"
+                      type="button"
+                      aria-label={closeButtonAriaLabel}
                       onClick={onClose}
                     />
                   )}

From 8797c32ba03fded9f4147b2e295bad45fcc7f9d5 Mon Sep 17 00:00:00 2001
From: yue <yue@pixiv.co.jp>
Date: Mon, 3 Jun 2024 10:26:54 +0900
Subject: [PATCH 2/3] feat: rename and export ModalCloseButton

---
 packages/react/src/components/Modal/index.tsx | 4 ++--
 packages/react/src/index.ts                   | 6 +++++-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/components/Modal/index.tsx b/packages/react/src/components/Modal/index.tsx
index f20270d67..69174c811 100644
--- a/packages/react/src/components/Modal/index.tsx
+++ b/packages/react/src/components/Modal/index.tsx
@@ -164,7 +164,7 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(function ModalInner(
                 >
                   {children}
                   {isDismissable === true && (
-                    <ModalCrossButton
+                    <ModalCloseButton
                       size="S"
                       icon="24/Close"
                       type="button"
@@ -228,7 +228,7 @@ const ModalBackground = animated(styled.div<{
   }
 `)
 
-const ModalCrossButton = styled(IconButton)`
+export const ModalCloseButton = styled(IconButton)`
   position: absolute;
   top: 8px;
   right: 8px;
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 142001633..2d2341c20 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -38,7 +38,11 @@ export {
 } from './components/TextField'
 export { default as TextArea, type TextAreaProps } from './components/TextArea'
 export { default as Icon, type IconProps } from './components/Icon'
-export { default as Modal, type ModalProps } from './components/Modal'
+export {
+  default as Modal,
+  type ModalProps,
+  ModalCloseButton,
+} from './components/Modal'
 export {
   ModalHeader,
   ModalAlign,

From 02037a7af7f175d7e81c693f1ae7ea977e03b326 Mon Sep 17 00:00:00 2001
From: yue <yue@pixiv.co.jp>
Date: Mon, 3 Jun 2024 10:48:13 +0900
Subject: [PATCH 3/3] fix: update storyshot

---
 .../IconButton/__snapshots__/index.story.storyshot   |  3 +++
 .../Modal/__snapshots__/index.story.storyshot        | 12 ++++++++++++
 2 files changed, 15 insertions(+)

diff --git a/packages/react/src/components/IconButton/__snapshots__/index.story.storyshot b/packages/react/src/components/IconButton/__snapshots__/index.story.storyshot
index 71d04895e..d6315e914 100644
--- a/packages/react/src/components/IconButton/__snapshots__/index.story.storyshot
+++ b/packages/react/src/components/IconButton/__snapshots__/index.story.storyshot
@@ -106,6 +106,7 @@ exports[`Storybook Tests react/IconButton Default 1`] = `
     title="add"
   >
     <pixiv-icon
+      aria-hidden="true"
       name="16/Add"
     />
   </button>
@@ -211,6 +212,7 @@ exports[`Storybook Tests react/IconButton IsActive 1`] = `
     className="c0 c1"
   >
     <pixiv-icon
+      aria-hidden="true"
       name="16/Add"
     />
   </button>
@@ -322,6 +324,7 @@ exports[`Storybook Tests react/IconButton Overlay 1`] = `
     className="c0 c1"
   >
     <pixiv-icon
+      aria-hidden="true"
       name="16/Add"
     />
   </button>
diff --git a/packages/react/src/components/Modal/__snapshots__/index.story.storyshot b/packages/react/src/components/Modal/__snapshots__/index.story.storyshot
index e6d2c7700..958fddc1a 100644
--- a/packages/react/src/components/Modal/__snapshots__/index.story.storyshot
+++ b/packages/react/src/components/Modal/__snapshots__/index.story.storyshot
@@ -940,10 +940,13 @@ exports[`Storybook Tests react/Modal BackgroundScroll 1`] = `
           </div>
         </div>
         <button
+          aria-label="Close"
           className="c0 c27 c28"
           onClick={[Function]}
+          type="button"
         >
           <pixiv-icon
+            aria-hidden="true"
             name="24/Close"
           />
         </button>
@@ -1420,10 +1423,13 @@ exports[`Storybook Tests react/Modal BottomSheet 1`] = `
           </div>
         </div>
         <button
+          aria-label="Close"
           className="c0 c13 c14"
           onClick={[Function]}
+          type="button"
         >
           <pixiv-icon
+            aria-hidden="true"
             name="24/Close"
           />
         </button>
@@ -2365,10 +2371,13 @@ exports[`Storybook Tests react/Modal Default 1`] = `
           </div>
         </div>
         <button
+          aria-label="Close"
           className="c0 c27 c28"
           onClick={[Function]}
+          type="button"
         >
           <pixiv-icon
+            aria-hidden="true"
             name="24/Close"
           />
         </button>
@@ -3162,10 +3171,13 @@ exports[`Storybook Tests react/Modal FullBottomSheet 1`] = `
           </div>
         </div>
         <button
+          aria-label="Close"
           className="c0 c22 c23"
           onClick={[Function]}
+          type="button"
         >
           <pixiv-icon
+            aria-hidden="true"
             name="24/Close"
           />
         </button>