fix(a11y): add aria hidden to icons and warnings

italia · Jan 23, 2025 · 63e775f · 63e775f
1 parent 89537f0
commit 63e775f
Showing 1 changed file with 14 additions and 3 deletions.
diff --git a/docs/form/input.md b/docs/form/input.md
@@ -125,25 +125,36 @@ Il testo di aiuto deve essere esplicitamente associato ai campi a cui si riferis
 
 ### Input con icona o pulsanti
 
+{% capture callout %}
+
+#### Accessibilità delle icone
+
+Nel caso in cui l'icona è semanticamente rilevante e non spiegata dal testo che la segue, occorre:
+- rimuovere `aria-hidden="true"`
+- aggiungere `role="img"` sul tag `<svg>`
+- inserire all'interno il tag `<title>` con un titolo per l'icona che ne spieghi il significato (nel formato `<title>significato icona</title>"`)
+
+{% endcapture %}{% include callout.html content=callout type="accessibility" %}
+
 {% comment %}Example name: Varianti con icona o pulsanti {% endcomment %}
 {% capture example %}
 <div class="form-group">
   <div class="input-group">
-    <span class="input-group-text"><svg class="icon icon-sm"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-pencil"></use></svg></span>
+    <span class="input-group-text"><svg class="icon icon-sm" aria-hidden="true"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-pencil"></use></svg></span>
     <label for="input-group-1">Con Etichetta</label>
     <input type="text" class="form-control" id="input-group-1" name="input-group-1">
   </div>
 </div>
 <div class="form-group">
   <div class="input-group">
-    <span class="input-group-text"><svg class="icon icon-sm"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-pencil"></use></svg></span>
+    <span class="input-group-text"><svg class="icon icon-sm" aria-hidden="true"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-pencil"></use></svg></span>
     <label class="active" for="input-group-2">Con Etichetta e placeholder</label>
     <input type="text" class="form-control" id="input-group-2" name="input-group-2" placeholder="Lorem Ipsum">
   </div>
 </div>
 <div class="form-group">
   <div class="input-group">
-      <span class="input-group-text"><svg class="icon icon-sm"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-pencil"></use></svg></span>
+      <span class="input-group-text"><svg class="icon icon-sm" aria-hidden="true"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-pencil"></use></svg></span>
       <label for="input-group-3">Con Etichetta e pulsante "primary"</label>
       <input type="text" class="form-control" id="input-group-3" name="input-group-3">
       <div class="input-group-append">