Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(a11y): improve component Timeline a11y #1250

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

fix(a11y): improve component Timeline a11y #1250

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
68b5402
fix: block month font size
Fupete Oct 14, 2024
508d479
feat: update timeline a11y
Fupete Oct 14, 2024
5a0a215
fix: role
Fupete Oct 14, 2024
071831d
feat: better title structure
Fupete Oct 14, 2024
5f4a5c9
fix: disable toc for docs
Fupete Oct 15, 2024
b6cbad1
content: update docs
Fupete Oct 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
111 changes: 65 additions & 46 deletions docs/componenti/timeline.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,32 @@ Contiene un elenco di `.timeline-element`.

Ogni `.timeline-element` contiene:

- **PIN**: ogni pin contiene un icona, ed una label indicante la data dell'evento.
- **PIN**: ogni pin è un elemento contenitore `.it-pin-wrapper` di tipo heading `h` che contiene un0icona (`.pin-icon`) e una label (`.pin-text`) indicante la data dell'evento.

Il **PIN** ha tre varianti di classe per il suo contenitore `.it-pin-wrapper`:
Il **PIN** ha tre varianti di colore:

- `.it-evidence` : per indicare nella timeline eventi del passato (colore blu scuro)
- `.it-now` : per indicare nella timeline eventi collocati nel presente (azzurro)
- Nessuna classe aggiuntiva: per collocare gli eventi nel futuro. (azzurro chiaro)
- Nessuna classe aggiuntiva: per collocare gli eventi nel futuro (bianco)

{% capture callout %}
#### Accessibilità

- L'elemento contenitore del pin `.it-pin-wrapper`, nell'esempio un `h3`, dovrà avere il livello intestazione corretto a seconda della gerarchia in pagina. Così come il titolo della card `.it-card-title`, nell'esempio un `h4`.
- Se le icone svg `.pin-icon` non veicolassero significato, è possibile nasconderle alle tecnologie assistive aggiungendo a queste l'attributo `aria-hidden="true"`; in questo caso è possibile rimuovere `role="img"` e l'elemento `<title>`.
{% endcapture %}{% include callout.html content=callout type="accessibility" %}

{% capture callout %}
#### Breaking feature dalla versione **2.x.y**

Il codice markup è stato rivisto in chiave accessibilità e robustezza. In particolare cosa cambia:
- L'elemento `.pin-wrapper` è ora implementato come heading `h` e non semplice `div`. Dovrà avere il livello intestazione corretto a seconda della gerarchia in pagina.
- L'elemento `.pin-icon`, se semanticamente rilevante, deve avere attributo `role="img"` e contenere un tag `title` che lo descriva.
- Gli elementi categoria e data hanno ora tag `span` `visually-hidden` che ne descrivono lo scopo.
- L'elemento `.card-title` è ora implementato con heading `h4` per rispettare la gerarchia attuale. Dovrà avere il livello intestazione corretto a seconda della gerarchia in pagina.
{% endcapture %}{% include callout.html content=callout type="danger" %}



## Esempio

Expand All @@ -27,20 +46,20 @@ Il **PIN** ha tre varianti di classe per il suo contenitore `.it-pin-wrapper`:
<div class="row">
<div class="col-12">
<div class="timeline-element">
<div class="it-pin-wrapper it-evidence">
<h3 class="it-pin-wrapper it-evidence no_toc">
<div class="pin-icon">
<svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-code-circle"></use></svg>
<svg class="icon" role="img"><title>Segnaposto</title><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-bookmark"></use></svg>
</div>
<div class="pin-text"><span>maggio {{'now' | date: "%Y"}}</span></div>
</div>
</h3>
<div class="card-wrapper">
<div class="card">
<div class="card-body">
<h4 class="card-title h5">Lorem ipsum dolor sit amet</h4>
<div class="category-top">
<a class="category" href="#">Categoria</a>
<span class="data">10/12/{{'now' | date: "%Y"}}</span>
<span class="visually-hidden">Categoria evento:</span> <a class="category" href="#">Categoria</a>
<span class="visually-hidden">Data evento:</span> <span class="data">10/12/{{'now' | date: "%Y"}}</span>
</div>
<h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<span class="card-signature">di Federico De Paolis</span>
<a class="read-more" href="#">
Expand All @@ -54,16 +73,16 @@ Il **PIN** ha tre varianti di classe per il suo contenitore `.it-pin-wrapper`:
</div>
<div class="col-12">
<div class="timeline-element">
<div class="it-pin-wrapper it-evidence">
<h3 class="it-pin-wrapper it-evidence no_toc">
<div class="pin-icon">
<svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-code-circle"></use></svg>
<svg class="icon" role="img"><title>Segnaposto</title><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-bookmark"></use></svg>
</div>
<div class="pin-text"><span>giugno {{'now' | date: "%Y"}}</span></div>
</div>
</h3>
<div class="card-wrapper">
<div class="card">
<div class="card-body">
<h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…</h5>
<h4 class="card-title h5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
Expand All @@ -72,25 +91,25 @@ Il **PIN** ha tre varianti di classe per il suo contenitore `.it-pin-wrapper`:
</div>
<div class="col-12">
<div class="timeline-element">
<div class="it-pin-wrapper it-evidence">
<h3 class="it-pin-wrapper it-evidence no_toc">
<div class="pin-icon">
<svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-code-circle"></use></svg>
<svg class="icon" role="img"><title>Risultato</title><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-flag"></use></svg>
</div>
<div class="pin-text"><span>luglio {{'now' | date: "%Y"}}</span></div>
</div>
</h3>
<div class="card-wrapper">
<div class="card">
<div class="card-body">
<h4 class="card-title h5">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h4>
<div class="category-top">
<a class="category" href="#">Categoria</a>
<span class="data">10/12/{{'now' | date: "%Y"}}</span>
<span class="visually-hidden">Categoria evento:</span> <a class="category" href="#">Categoria</a>
<span class="visually-hidden">Data evento:</span> <span class="data">10/12/{{'now' | date: "%Y"}}</span>
</div>
<h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<span class="card-signature">di Federico De Paolis</span>
<a class="read-more" href="#">
<span class="text">Leggi di più</span>
<span class="visually-hidden">su Lorem ipsum dolor sit amet, consectetur adipiscing elit…</span>
<span class="visually-hidden">su Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
<svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-arrow-right"></use></svg>
</a>
</div>
Expand All @@ -101,16 +120,16 @@ Il **PIN** ha tre varianti di classe per il suo contenitore `.it-pin-wrapper`:
<div class="col-12">
<div class="timeline-element">
<span class="it-now-label d-none d-lg-flex">Oggi</span>
<div class="it-pin-wrapper it-now">
<h3 class="it-pin-wrapper it-now no_toc">
<div class="pin-icon">
<svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-code-circle"></use></svg>
<svg class="icon" role="img"><title>Successo</title><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-check"></use></svg>
</div>
<div class="pin-text"><span>agosto {{'now' | date: "%Y"}}</span></div>
</div>
</h3>
<div class="card-wrapper">
<div class="card">
<div class="card-body">
<h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…</h5>
<h4 class="card-title h5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
Expand All @@ -119,25 +138,25 @@ Il **PIN** ha tre varianti di classe per il suo contenitore `.it-pin-wrapper`:
</div>
<div class="col-12">
<div class="timeline-element">
<div class="it-pin-wrapper">
<h3 class="it-pin-wrapper no_toc">
<div class="pin-icon">
<svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-code-circle"></use></svg>
<svg class="icon" role="img"><title>Evento</title><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-calendar"></use></svg>
</div>
<div class="pin-text"><span>settembre {{'now' | date: "%Y"}}</span></div>
</div>
</h3>
<div class="card-wrapper">
<div class="card">
<div class="card-body">
<h4 class="card-title h5">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h4>
<div class="category-top">
<a class="category" href="#">Categoria</a>
<span class="data">10/12/{{'now' | date: "%Y"}}</span>
<span class="visually-hidden">Categoria evento:</span> <a class="category" href="#">Categoria</a>
<span class="visually-hidden">Data evento:</span> <span class="data">10/12/{{'now' | date: "%Y"}}</span>
</div>
<h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<span class="card-signature">di Federico De Paolis</span>
<a class="read-more" href="#">
<span class="text">Leggi di più</span>
<span class="visually-hidden">su Lorem ipsum dolor sit amet, consectetur adipiscing elit…</span>
<span class="visually-hidden">su Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
<svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-arrow-right"></use></svg>
</a>
</div>
Expand All @@ -147,16 +166,16 @@ Il **PIN** ha tre varianti di classe per il suo contenitore `.it-pin-wrapper`:
</div>
<div class="col-12">
<div class="timeline-element">
<div class="it-pin-wrapper">
<h3 class="it-pin-wrapper no_toc">
<div class="pin-icon">
<svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-code-circle"></use></svg>
<svg class="icon" role="img"><title>Successo</title><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-check"></use></svg>
</div>
<div class="pin-text"><span>ottobre {{'now' | date: "%Y"}}</span></div>
</div>
</h3>
<div class="card-wrapper">
<div class="card">
<div class="card-body">
<h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…</h5>
<h4 class="card-title h5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
Expand All @@ -165,25 +184,25 @@ Il **PIN** ha tre varianti di classe per il suo contenitore `.it-pin-wrapper`:
</div>
<div class="col-12">
<div class="timeline-element">
<div class="it-pin-wrapper">
<h3 class="it-pin-wrapper no_toc">
<div class="pin-icon">
<svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-code-circle"></use></svg>
<svg class="icon" role="img"><title>Milestone</title><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-flag"></use></svg>
</div>
<div class="pin-text"><span>novembre {{'now' | date: "%Y"}}</span></div>
</div>
</h3>
<div class="card-wrapper">
<div class="card">
<div class="card-body">
<h4 class="card-title h5">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h4>
<div class="category-top">
<a class="category" href="#">Categoria</a>
<span class="data">10/12/{{'now' | date: "%Y"}}</span>
<span class="visually-hidden">Categoria evento:</span> <a class="category" href="#">Categoria</a>
<span class="visually-hidden">Data evento:</span> <span class="data">10/12/{{'now' | date: "%Y"}}</span>
</div>
<h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<span class="card-signature">di Federico De Paolis</span>
<a class="read-more" href="#">
<span class="text">Leggi di più</span>
<span class="visually-hidden">su Lorem ipsum dolor sit amet, consectetur adipiscing elit…</span>
<span class="visually-hidden">su Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
<svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-arrow-right"></use></svg>
</a>
</div>
Expand All @@ -193,16 +212,16 @@ Il **PIN** ha tre varianti di classe per il suo contenitore `.it-pin-wrapper`:
</div>
<div class="col-12">
<div class="timeline-element">
<div class="it-pin-wrapper">
<h3 class="it-pin-wrapper no_toc">
<div class="pin-icon">
<svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-code-circle"></use></svg>
<svg class="icon" role="img"><title>Milestone</title><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-flag"></use></svg>
</div>
<div class="pin-text"><span>dicembre {{'now' | date: "%Y"}}</span></div>
</div>
</h3>
<div class="card-wrapper">
<div class="card">
<div class="card-body">
<h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…</h5>
<h4 class="card-title h5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
Expand Down
2 changes: 2 additions & 0 deletions src/scss/custom/_timeline.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,8 @@
background: $timeline-pin-background;
border-radius: $border-radius;
font-family: $font-family-monospace;
font-size: var(--bs-body-font-size);
line-height: var(--bs-body-line-height);

span {
padding: $v-gap * 0.5 $v-gap * 2;
Expand Down
Loading