feat(a11y): improve component Timeline

Co-authored-by: Andrea Stagi <stagi.andrea@gmail.com>
italia · Nov 4, 2024 · 6cb5896 · 6cb5896
1 parent 17230b2
commit 6cb5896
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 46 deletions.
diff --git a/docs/componenti/timeline.md b/docs/componenti/timeline.md
@@ -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.11**
+
+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
 
@@ -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="#">
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>

diff --git a/src/scss/custom/_timeline.scss b/src/scss/custom/_timeline.scss
@@ -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;