fix: a11y on modal header

WTTJ · Feb 29, 2024 · b34ddf4 · b34ddf4
1 parent 4d8839b
commit b34ddf4
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/docs/pages/components/modal.mdx b/docs/pages/components/modal.mdx
@@ -123,7 +123,7 @@ function() {
       </Modal.Trigger>
       <Modal store={modal} ariaLabel="example">
         <Modal.Content store={modal}>
-          <Modal.Header title={title} subtitle={subtitle} icon={icon}/>
+          <Modal.Header title={<div>hello</div>} subtitle={subtitle} icon={icon}/>
           <Modal.Body>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium leo orci, sed
             finibus justo iaculis non. Quisque scelerisque congue feugiat. Vivamus ac accumsan odio.

diff --git a/packages/Modal/src/Header.tsx b/packages/Modal/src/Header.tsx
@@ -22,9 +22,13 @@ export const Header = forwardRef<'div', HeaderProps>(({ icon, subtitle, title, .
     <S.Header ref={ref} textAlign={icon ? 'center' : null} w="100%" {...rest}>
       <Close isOnHeader />
       {icon}
-      <Text mb={subtitle ? 'lg' : 0} mt={icon ? 'xl' : 0} variant="h4">
-        {title}
-      </Text>
+      {typeof title === 'string' ? (
+        <Text mb={subtitle ? 'lg' : 0} mt={icon ? 'xl' : 0} variant="h4">
+          {title}
+        </Text>
+      ) : (
+        title
+      )}
       {subtitle && <S.HeaderSubtitle>{subtitle}</S.HeaderSubtitle>}
     </S.Header>
   )