Skip to content

Commit c0a92be

Browse files
authored
fix(a11y): title and doc link for modal
1 parent 38127f2 commit c0a92be

File tree

3 files changed

+10
-30
lines changed

3 files changed

+10
-30
lines changed

src/Modal/ModalHeader.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export const ModalHeader: FC<ModalHeaderProps> = ({
2727
className,
2828
children,
2929
toggle,
30-
tag: Tag = 'h5',
30+
tag: Tag = 'h2',
3131
wrapTag: WrapTag = 'div',
3232
closeAriaLabel = 'Close',
3333
close,
@@ -52,7 +52,7 @@ export const ModalHeader: FC<ModalHeaderProps> = ({
5252
return (
5353
<WrapTag {...props} className={classes}>
5454
{icon != null ? <Icon icon={icon} /> : null}
55-
<Tag className={mapToCssModules('modal-title', cssModule)}>{children}</Tag>
55+
<Tag className={mapToCssModules('modal-title h5', cssModule)}>{children}</Tag>
5656
{close || CloseButton}
5757
</WrapTag>
5858
);

stories/Documentation/Modal.mdx

Lines changed: 5 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -16,35 +16,15 @@ Cliccando sulla parte che oscura la pagina (il cosiddetto `backdrop` della modal
1616
<span className='text'>Accessibilità</span>
1717
</CalloutTitle>
1818
<CalloutText>
19-
Per tutti i componenti Modale viene automaticamente aggiunto l'attributo <Code>role="dialog"</Code> e{' '}
20-
<Code>role="document"</Code> all'elemento contenitore. (
21-
<a
22-
href='https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role'
23-
target='_blank'
24-
rel='noreferrer'
25-
>
26-
maggiori info su MDN
27-
</a>
28-
).
19+
Per tutti i componenti Modale viene automaticamente aggiunto l'attributo <Code>role="dialog"</Code> e <Code>role="document"</Code> all'elemento contenitore.
20+
([maggiori info su MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role))
2921
</CalloutText>
3022
<CalloutText>
31-
L’attributo <Code>labelledby="..."</Code> deve essere assegnato al componente <Code>Modal</Code> ed usare come
32-
valore l'ID del componente
33-
<Code>ModalHeader</Code>.(
34-
<a
35-
href='https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute'
36-
target='_blank'
37-
rel='noreferrer'
38-
>
39-
maggiori info su MDN
40-
</a>
41-
).
23+
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>.
24+
([maggiori info su MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby))
4225
</CalloutText>
4326
<CalloutText>
44-
Approfondisci l’argomento sul sito delle
45-
<a href='https://www.w3.org/TR/wai-aria-practices/#dialog_modal' target='_blank' rel='noreferrer'>
46-
WAI-ARIA Authoring Practices.
47-
</a>
27+
Approfondisci l’argomento sul sito delle [WAI-ARIA Authoring Practices.](https://www.w3.org/WAI/ARIA/apg/#dialog_modal)
4828
</CalloutText>
4929
</Callout>
5030
</div>

test/__snapshots__/Storybook.test.tsx.snap

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6675,11 +6675,11 @@ exports[`Stories Snapshots Documentazione/Componenti/Modale _EsempioBase 1`] = `
66756675
<div
66766676
class="modal-header"
66776677
>
6678-
<h5
6679-
class="modal-title"
6678+
<h2
6679+
class="modal-title h5"
66806680
>
66816681
Titolo della modale
6682-
</h5>
6682+
</h2>
66836683
</div>
66846684
<div
66856685
class="modal-body"

0 commit comments

Comments
 (0)