feat: new focus state

Co-authored-by: Andrea Stagi <[email protected]>
italia · Nov 25, 2024 · a1c837b · a1c837b
1 parent e59c2c1
commit a1c837b
Show file tree

Hide file tree

Showing 13 changed files with 260 additions and 143 deletions.
diff --git a/docs/componenti/chips.md b/docs/componenti/chips.md
@@ -105,6 +105,19 @@ Gli stili definiti da Bootstrap Italia utilizzano un naming consistente con i te
 </div>{% endfor %}
 {% endcapture %}{% include example.html content=example %}
 
+#### Varianti di colore link
+
+{% comment %}Example name: Varianti di colore link{% endcomment %}
+{% capture example %}
+
+{% for color in site.data.theme-colors %}
+
+<a class="chip chip-{{ color.name }} chip-lg chip-simple" href="#">
+  <span class="chip-label">{{ color.name | capitalize }}</span>
+</a>
+{% endfor %}
+{% endcapture %}{% include example.html content=example %}
+
 ## Chip Disabilitata
 
 Aggiungendo la classe `.chip-disabled` al contenitore e l'attributo `disabled` al `<button>` si ottiene una chip disabilitata.
@@ -210,3 +223,68 @@ I gruppi di chip vengono visualizzati in linea.
   </button>
 </div>
 {% endcapture %}{% include example.html content=example %}
+
+### Gruppi di Chip link
+
+{% comment %}Example name: Gruppi{% endcomment %}
+{% capture example %}
+<a href="#" class="chip chip-simple chip-primary">
+  <span class="chip-label">Label</span>
+</a>
+<a href="#" class="chip chip-primary">
+  <span class="chip-label">Label</span>
+  <button>
+    <svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-close"></use></svg>
+    <span class="visually-hidden">Elimina label</span>
+  </button>
+</a>
+<a href="#" class="chip chip-primary">
+  <svg class="icon icon-xs"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-github"></use></svg>
+  <span class="chip-label">Label</span>
+  <button>
+    <svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-close"></use></svg>
+    <span class="visually-hidden">Elimina label</span>
+  </button>
+</a>
+<a href="#" class="chip chip-primary">
+  <div class="avatar size-xs">
+    <img src="https://randomuser.me/api/portraits/men/46.jpg" alt="Mario Rossi">
+  </div>
+  <span class="chip-label">Label</span>
+  <button>
+    <svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-close"></use></svg>
+    <span class="visually-hidden">Elimina label</span>
+  </button>
+</a>
+
+<hr/>
+
+<a href="#" class="chip chip-lg chip-simple chip-primary">
+  <span class="chip-label">Label</span>
+</a>
+<a href="#" class="chip chip-lg chip-primary">
+  <span class="chip-label">Label</span>
+  <button>
+    <svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-close"></use></svg>
+    <span class="visually-hidden">Elimina label</span>
+  </button>
+</a>
+<a href="#" class="chip chip-lg chip-primary">
+  <svg class="icon icon-xs"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-github"></use></svg>
+  <span class="chip-label">Label</span>
+  <button>
+    <svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-close"></use></svg>
+    <span class="visually-hidden">Elimina label</span>
+  </button>
+</a>
+<a href="#" class="chip chip-lg chip-primary">
+  <div class="avatar size-xs">
+    <img src="https://randomuser.me/api/portraits/men/46.jpg" alt="Mario Rossi">
+  </div>
+  <span class="chip-label">Label</span>
+  <button>
+    <svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-close"></use></svg>
+    <span class="visually-hidden">Elimina label</span>
+  </button>
+</a>
+{% endcapture %}{% include example.html content=example %}
diff --git a/docs/componenti/rating.md b/docs/componenti/rating.md
@@ -12,34 +12,40 @@ Il Rating è composto da un `<fieldset>` con classe `.rating` contenente 5 `<inp
 
 Le `<label>` contengono le icone delle stelle e la descrizione per Screen Reader.
 
+{% capture callout %}
+Breaking feature dalla versione **2.12.0**
+
+- Aggiunto attributo `aria-hidden="true"` sulle icone perché lo scopo è già trasmesso agli strumenti assistivi dal testo con classe `.visually-hidden`.
+{% endcapture %}{% include callout.html content=callout type="danger" %}
+
 {% comment %}Example name: Base{% endcomment %}
 {% capture example %}
 <fieldset class="rating">
   <legend>Rating</legend>
   <input type="radio" id="star5a" name="ratingA" value="5" />
   <label class = "full" for="star5a">
-    <svg class="icon icon-sm"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-star-full"></use></svg>
+    <svg class="icon icon-sm" aria-hidden="true"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-star-full"></use></svg>
     <span class="visually-hidden">Valuta 5 stelle su 5</span>
   </label>
   <input type="radio" id="star4a" name="ratingA" value="4"/>
   <label class = "full" for="star4a">
-    <svg class="icon icon-sm"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-star-full"></use></svg>
+    <svg class="icon icon-sm" aria-hidden="true"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-star-full"></use></svg>
     <span class="visually-hidden">Valuta 4 stelle su 5</span>
   </label>
   <input type="radio" id="star3a" name="ratingA" value="3" />
   <label class = "full" for="star3a">
-    <svg class="icon icon-sm"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-star-full"></use></svg>
+    <svg class="icon icon-sm" aria-hidden="true"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-star-full"></use></svg>
     <span class="visually-hidden">Valuta 3 stelle su 5</span>
   </label>
   <input type="radio" id="star2a" name="ratingA" value="2" />
   <label class = "full" for="star2a">
-    <svg class="icon icon-sm"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-star-full"></use></svg>
+    <svg class="icon icon-sm" aria-hidden="true"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-star-full"></use></svg>
     <span class="visually-hidden">Valuta 2 stelle su 5</span>
   </label>
   <input type="radio" id="star1a" name="ratingA" value="1" />
   <label class = "full" for="star1a">
-    <svg class="icon icon-sm"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-star-full"></use></svg>
-    <span class="visually-hidden">Valuta 1 stelle su 5</span>
+    <svg class="icon icon-sm" aria-hidden="true"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-star-full"></use></svg>
+    <span class="visually-hidden">Valuta 1 stella su 5</span>
   </label>
 </fieldset>
 {% endcapture %}{% include example.html content=example %}
@@ -63,28 +69,28 @@ La label con il numero di stelle dev'essere contenuta in uno `<span>` semplice.
   <legend><span class="visually-hidden">Valutazione</span> <span>4 stelle</span> <span class="visually-hidden">su 5</span></legend>
   <input type="radio" id="star5b" name="ratingB" value="5" />
   <label class = "full" for="star5b">
-    <svg class="icon icon-sm"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-star-full"></use></svg>
+    <svg class="icon icon-sm" aria-hidden="true"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-star-full"></use></svg>
     <span class="visually-hidden">Valuta 5 stelle su 5</span>
   </label>
   <input type="radio" id="star4b" name="ratingB" value="4" checked/>
   <label class = "full" for="star4b">
-    <svg class="icon icon-sm"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-star-full"></use></svg>
+    <svg class="icon icon-sm" aria-hidden="true"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-star-full"></use></svg>
     <span class="visually-hidden">Valuta 4 stelle su 5</span>
   </label>
   <input type="radio" id="star3b" name="ratingB" value="3" />
   <label class = "full" for="star3b">
-    <svg class="icon icon-sm"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-star-full"></use></svg>
+    <svg class="icon icon-sm" aria-hidden="true"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-star-full"></use></svg>
     <span class="visually-hidden">Valuta 3 stelle su 5</span>
   </label>
   <input type="radio" id="star2b" name="ratingB" value="2" />
   <label class = "full" for="star2b">
-    <svg class="icon icon-sm"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-star-full"></use></svg>
+    <svg class="icon icon-sm" aria-hidden="true"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-star-full"></use></svg>
     <span class="visually-hidden">Valuta 2 stelle su 5</span>
   </label>
   <input type="radio" id="star1b" name="ratingB" value="1" />
   <label class = "full" for="star1b">
-    <svg class="icon icon-sm"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-star-full"></use></svg>
-    <span class="visually-hidden">Valuta 1 stelle su 5</span>
+    <svg class="icon icon-sm" aria-hidden="true"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-star-full"></use></svg>
+    <span class="visually-hidden">Valuta 1 stella su 5</span>
   </label>
 </fieldset>
 
@@ -109,28 +115,28 @@ Per rendere accessibile il contenuto è necessario aggiungere un tag `<legend>`
   <legend class="visually-hidden">Valutazione 4 stelle su 5</legend>
   <input type="radio" id="star5c" name="ratingC" value="5" aria-hidden="true" disabled />
   <label class = "full" for="star5c">
-    <svg class="icon icon-sm"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-star-full"></use></svg>
+    <svg class="icon icon-sm" aria-hidden="true"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-star-full"></use></svg>
     <span class="visually-hidden">Valuta 5 stelle su 5</span>
   </label>
   <input type="radio" id="star4c" name="ratingC" value="4" checked aria-hidden="true" disabled />
   <label class = "full" for="star4c">
-    <svg class="icon icon-sm"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-star-full"></use></svg>
+    <svg class="icon icon-sm" aria-hidden="true"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-star-full"></use></svg>
     <span class="visually-hidden">Valuta 4 stelle su 5</span>
   </label>
   <input type="radio" id="star3c" name="ratingC" value="3" aria-hidden="true" disabled />
   <label class = "full" for="star3c">
-    <svg class="icon icon-sm"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-star-full"></use></svg>
+    <svg class="icon icon-sm" aria-hidden="true"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-star-full"></use></svg>
     <span class="visually-hidden">Valuta 3 stelle su 5</span>
   </label>
   <input type="radio" id="star2c" name="ratingC" value="2" aria-hidden="true" disabled />
   <label class = "full" for="star2c">
-    <svg class="icon icon-sm"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-star-full"></use></svg>
+    <svg class="icon icon-sm" aria-hidden="true"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-star-full"></use></svg>
     <span class="visually-hidden">Valuta 2 stelle su 5</span>
   </label>
   <input type="radio" id="star1c" name="ratingC" value="1" aria-hidden="true" disabled />
   <label class = "full" for="star1c">
-    <svg class="icon icon-sm"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-star-full"></use></svg>
-    <span class="visually-hidden">Valuta 1 stelle su 5</span>
+    <svg class="icon icon-sm" aria-hidden="true"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-star-full"></use></svg>
+    <span class="visually-hidden">Valuta 1 stella su 5</span>
   </label>
 </fieldset>
 {% endcapture %}{% include example.html content=example %}
diff --git a/docs/menu-di-navigazione/torna-su.md b/docs/menu-di-navigazione/torna-su.md
@@ -9,6 +9,13 @@ toc: true
 Per aggiungere un pulsante che si abilita automaticamente allo scorrimento della pagina, e che aiuta l'utente a tornare in alto con un solo click su di esso, è sufficiente usare un link con attributo `data-bs-toggle="backtotop"` e con una classe `.back-to-top` che lo posiziona nella parte inferiore destra nella pagina.
 Le animazioni sono state realizzate con il plugin javascript [AnimeJs](https://animejs.com).
 
+{% capture callout %}
+Breaking feature dalla versione **2.12.0**
+
+- Rimossi gli attributi `tabindex="-1"` e `aria-hidden="true"` per permettere il focus da tastiera e l'interazione da strumenti assistivi. 
+- Aggiunto attributo `aria-label="Torna su"` per comunicare lo scopo a strumenti assistivi.
+{% endcapture %}{% include callout.html content=callout type="danger" %}
+
 <style>
   /* Style override for Documentation purposes */
   .back-to-top:not(#example) {
@@ -28,7 +35,7 @@ Per visualizzare il Back to top nella posizione corretta è necessario scrollare
 
 {% comment %}Example name: Base, funzionante{% endcomment %}
 {% capture example %}
-<a href="#" aria-hidden="true" tabindex="-1" data-bs-toggle="backtotop" class="back-to-top" id="example">
+<a href="#" aria-label="Torna su" data-bs-toggle="backtotop" class="back-to-top" id="example">
 <svg class="icon icon-light"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-arrow-up"></use></svg>
 </a>
 {% endcapture %}{% include example.html content=example %}
@@ -37,7 +44,7 @@ Per visualizzare il Back to top nella posizione corretta è necessario scrollare
 
 {% comment %}Example name: Base, esempio{% endcomment %}
 {% capture example %}
-<a href="#" aria-hidden="true" tabindex="-1" data-bs-toggle="backtotop" class="back-to-top">
+<a href="#" aria-label="Torna su" data-bs-toggle="backtotop" class="back-to-top">
 <svg class="icon icon-light"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-arrow-up"></use></svg>
 </a>
 {% endcapture %}{% include example.html content=example %}
@@ -48,7 +55,7 @@ Aggiungendo la classe `.back-to-top-small` al link si ottiene un pulsante di dim
 
 {% comment %}Example name: Compatto, esempio{% endcomment %}
 {% capture example %}
-<a href="#" aria-hidden="true" tabindex="-1" data-bs-toggle="backtotop" class="back-to-top back-to-top-small">
+<a href="#" aria-label="Torna su" data-bs-toggle="backtotop" class="back-to-top back-to-top-small">
 <svg class="icon icon-light"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-arrow-up"></use></svg>
 </a>
 
@@ -61,10 +68,10 @@ Aggiungendo la classe `.shadow` al link si aggiunge un'ombra al pulsante.
 {% comment %}Example name: Con ombra, esempio{% endcomment %}
 {% capture example %}
 <div class="d-flex align-items-center">
-  <a href="#" aria-hidden="true" tabindex="-1" data-bs-toggle="backtotop" class="back-to-top shadow">
+  <a href="#" aria-label="Torna su" data-bs-toggle="backtotop" class="back-to-top shadow">
     <svg class="icon icon-light"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-arrow-up"></use></svg>
   </a>
-  <a href="#" aria-hidden="true" tabindex="-1" data-bs-toggle="backtotop" class="back-to-top back-to-top-small shadow">
+  <a href="#" aria-label="Torna su" data-bs-toggle="backtotop" class="back-to-top back-to-top-small shadow">
     <svg class="icon icon-light"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-arrow-up"></use></svg>
   </a>
 </div>
@@ -77,10 +84,10 @@ Aggiungendo la classe `.dark` al link si ottiene un pulsante utilizzabile su sfo
 {% comment %}Example name: Per sfondo scuro, esempio{% endcomment %}
 {% capture example %}
 <div class="d-flex align-items-center p-4 neutral-1-bg-a8">
-  <a href="#" aria-hidden="true" tabindex="-1" data-bs-toggle="backtotop" class="back-to-top dark">
+  <a href="#" aria-label="Torna su" data-bs-toggle="backtotop" class="back-to-top dark">
     <svg class="icon icon-secondary"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-arrow-up"></use></svg>
   </a>
-  <a href="#" aria-hidden="true" tabindex="-1" data-bs-toggle="backtotop" class="back-to-top back-to-top-small dark">
+  <a href="#" aria-label="Torna su" data-bs-toggle="backtotop" class="back-to-top back-to-top-small dark">
     <svg class="icon icon-secondary"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-arrow-up"></use></svg>
   </a>
 </div>
@@ -93,10 +100,10 @@ Aggiungendo le classi `.dark` e `.shadow` al link si ottiene un pulsante con omb
 {% comment %}Example name: Con ombra, per sfondo scuro, esempio{% endcomment %}
 {% capture example %}
 <div class="d-flex align-items-center p-4 neutral-1-bg-a8">
-  <a href="#" aria-hidden="true" tabindex="-1" data-bs-toggle="backtotop" class="back-to-top dark shadow">
+  <a href="#" aria-label="Torna su" data-bs-toggle="backtotop" class="back-to-top dark shadow">
     <svg class="icon icon-secondary"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-arrow-up"></use></svg>
   </a>
-  <a href="#" aria-hidden="true" tabindex="-1" data-bs-toggle="backtotop" class="back-to-top back-to-top-small dark shadow">
+  <a href="#" aria-label="Torna su" data-bs-toggle="backtotop" class="back-to-top back-to-top-small dark shadow">
     <svg class="icon icon-secondary"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-arrow-up"></use></svg>
   </a>
 </div>

diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
@@ -1,9 +1,6 @@
 // Import Design Tokens Italia
 // @import '../../node_modules/design-tokens-italia/scss/variables';
 
-// Shadows
-$enable-shadows: true;
-
 // Spacer
 $spacer: 1rem !default;
 
@@ -53,7 +50,9 @@ $small-font-size: 0.875rem !default;
 $link-decoration: underline;
 
 // Focus
-$focus-outline-color: $orange !default;
+$focus-outline-color-in: $white !default;
+$focus-outline-color-out: $black !default;
+$focus-outline-color: $focus-outline-color-out !default; // xxx retro-compatibility, ex $orange
 
 //skiplinks
 $skiplinks-color: $primary !default;

diff --git a/src/scss/custom/_buttons.scss b/src/scss/custom/_buttons.scss
@@ -1,7 +1,7 @@
 .btn {
   //btn-css-vars
-  --bs-btn-color: #06c;
-  --bs-btn-hover-color: #004d99; // TODO change with tokens when available
+  --bs-btn-color: $primary;
+  --bs-btn-hover-color: $color-background-primary-hover;
   --bs-btn-active-color: #003366; // TODO change with tokens when available
   //btn-css-vars-end
   padding: 12px 24px;
@@ -224,32 +224,12 @@
     &:hover {
       box-shadow: inset 0 0 0 2px color-hover($white);
     }
-    &:focus,
-    &.focus {
-      box-shadow:
-        inset 0 0 0 2px $white,
-        0 0 0 $btn-focus-width rgba($white, 0.5);
-    }
-    &:not(:disabled):not(.disabled).active,
-    &:not(:disabled):not(.disabled):active,
-    .show > &.dropdown-toggle {
-      box-shadow: inset 0 0 0 2px $white;
-    }
   }
   .btn-secondary {
     @include button-variant($primary, $white, tint-color($primary, 7.5%), shade-color($white, 10%), tint-color($primary, 10%), shade-color($white, 12.5%));
     color: $white;
   }
   .btn-outline-secondary {
     @include button-outline-variant($white, color-hover($white), transparent, color-hover($white));
-    &:focus,
-    &.focus {
-      box-shadow: 0 0 0 $btn-focus-width rgba($white, 0.5);
-    }
-    &:not(:disabled):not(.disabled).active,
-    &:not(:disabled):not(.disabled):active,
-    .show > &.dropdown-toggle {
-      box-shadow: none;
-    }
   }
 }
diff --git a/src/scss/custom/_card.scss b/src/scss/custom/_card.scss
@@ -220,9 +220,15 @@
       margin-top: -$v-gap * 2;
     }
     a {
+      display: inline-block;
       h5.card-title {
         color: $card-link-color;
       }
+      &:hover {
+        h5.card-title {
+          color: var(--bs-link-hover-color);
+        }
+      }
     }
     .card-text {
       font-family: $font-family-serif;
@@ -429,11 +435,13 @@
         font-weight: normal;
       }
     }
+    h5.card-title {
+      color: $card-link-color;
+    }
     &:hover {
-      text-decoration: none;
-      h5 {
-        text-decoration: underline;
-        color: $primary;
+      text-decoration: underline;
+      h5.card-title {
+        color: var(--bs-link-hover-color);
       }
       .img-responsive-wrapper {
         &:before {

diff --git a/src/scss/custom/_carousel.scss b/src/scss/custom/_carousel.scss
@@ -261,3 +261,9 @@
     }
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .it-carousel-wrapper .splide__pagination button {
+    transition: none !important;
+  }
+}