fix(a11y): title and doc link for modal

italia · Oct 15, 2024 · c0a92be · c0a92be
1 parent 38127f2
commit c0a92be
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 30 deletions.
diff --git a/src/Modal/ModalHeader.tsx b/src/Modal/ModalHeader.tsx
@@ -27,7 +27,7 @@ export const ModalHeader: FC<ModalHeaderProps> = ({
   className,
   children,
   toggle,
-  tag: Tag = 'h5',
+  tag: Tag = 'h2',
   wrapTag: WrapTag = 'div',
   closeAriaLabel = 'Close',
   close,
@@ -52,7 +52,7 @@ export const ModalHeader: FC<ModalHeaderProps> = ({
   return (
     <WrapTag {...props} className={classes}>
       {icon != null ? <Icon icon={icon} /> : null}
-      <Tag className={mapToCssModules('modal-title', cssModule)}>{children}</Tag>
+      <Tag className={mapToCssModules('modal-title h5', cssModule)}>{children}</Tag>
       {close || CloseButton}
     </WrapTag>
   );

diff --git a/stories/Documentation/Modal.mdx b/stories/Documentation/Modal.mdx
@@ -16,35 +16,15 @@ Cliccando sulla parte che oscura la pagina (il cosiddetto `backdrop` della modal
       <span className='text'>Accessibilità</span>
     </CalloutTitle>
     <CalloutText>
-      Per tutti i componenti Modale viene automaticamente aggiunto l'attributo <Code>role="dialog"</Code> e{' '}
-      <Code>role="document"</Code> all'elemento contenitore. (
-      <a
-        href='https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role'
-        target='_blank'
-        rel='noreferrer'
-      >
-        maggiori info su MDN
-      </a>
-      ).
+      Per tutti i componenti Modale viene automaticamente aggiunto l'attributo <Code>role="dialog"</Code> e <Code>role="document"</Code> all'elemento contenitore.
+      ([maggiori info su MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role))
     </CalloutText>
     <CalloutText>
-      L’attributo <Code>labelledby="..."</Code> deve essere assegnato al componente <Code>Modal</Code> ed usare come
-      valore l'ID del componente
-      <Code>ModalHeader</Code>.(
-      <a
-        href='https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute'
-        target='_blank'
-        rel='noreferrer'
-      >
-        maggiori info su MDN
-      </a>
-      ).
+      L’attributo <Code>aria-labelledby="..."</Code> deve essere assegnato al componente <Code>Modal</Code> ed usare come valore l'ID del componente <Code>ModalHeader</Code>.
+      ([maggiori info su MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby))
     </CalloutText>
     <CalloutText>
-      Approfondisci l’argomento sul sito delle
-      <a href='https://www.w3.org/TR/wai-aria-practices/#dialog_modal' target='_blank' rel='noreferrer'>
-        WAI-ARIA Authoring Practices.
-      </a>
+      Approfondisci l’argomento sul sito delle [WAI-ARIA Authoring Practices.](https://www.w3.org/WAI/ARIA/apg/#dialog_modal)
     </CalloutText>
   </Callout>
 </div>

diff --git a/test/__snapshots__/Storybook.test.tsx.snap b/test/__snapshots__/Storybook.test.tsx.snap
@@ -6675,11 +6675,11 @@ exports[`Stories Snapshots Documentazione/Componenti/Modale _EsempioBase 1`] = `
       <div
         class="modal-header"
       >
-        <h5
-          class="modal-title"
+        <h2
+          class="modal-title h5"
         >
           Titolo della modale
-        </h5>
+        </h2>
       </div>
       <div
         class="modal-body"