Merge pull request #528 from City-of-Helsinki/LOM-300_accessibility_f…

…ixes

LOM-300 Accessibility fixes

dist/icons.json

@@ -1 +1 @@
-["helsinki-ru","helsinki-sv","helsinki","email","abstract-1","abstract-2","abstract-3","abstract-4","abstract-5","abstract-6","hero-arrow-desktop","hero-arrow-mobile","info","link-external","mailto","tel","discord","facebook","google","instagram","linkedin","rss","snapchat","tiktok","twitch","twitter","vimeo","whatsapp","yle","youtube","alert-circle-fill","alert-circle","angle-down","angle-left","angle-right","angle-up","arrow-left","arrow-right","arrow-up","calendar-clock","calendar","camera","check-circle-fill","check-circle","check","clock","cogwheel","cross-circle","cross","customer-bot-neutral","display","document","download-cloud","download","envelope","error-fill","error","eye-crossed","eye","face-neutral","face-sad","face-smile","globe","glyph-at","glyph-euro","group","heart-fill","heart","home-smoke","home","info-circle-fill","info-circle","layers","link","locate","location","map","menu-dots","menu-hamburger","minus-circle-fill","minus-circle","minus","mobile","paperclip","person-female","person-male","person-wheelchair","phone","photo","plus-circle-fill","plus-circle","plus","podcast","printer","question-circle-fill","question-circle","search","share","signin","signout","sort-alphabetical-ascending","sort-alphabetical-descending","sort-ascending","sort-descending","sort","speechbubble-text","speechbubble","star-fill","star","ticket","trash","upload-cloud","upload","user","wifi-crossed","wifi","zoom-in","zoom-out","zoom-text"]
+["helsinki-ru","helsinki-sv","helsinki","email","abstract-1","abstract-2","abstract-3","abstract-4","abstract-5","abstract-6","hero-arrow-desktop","hero-arrow-mobile","info","link-external","mailto","tel","discord","facebook","google","instagram","linkedin","rss","snapchat","tiktok","twitch","twitter","vimeo","whatsapp","yle","youtube","alert-circle-fill","alert-circle","angle-down","angle-left","angle-right","angle-up","arrow-left","arrow-right","arrow-up","calendar-clock","calendar","camera","check-circle-fill","check-circle","check","clock","cogwheel","cross-circle","cross","customer-bot-neutral","display","document","download-cloud","download","envelope","error-fill","error","eye-crossed","eye","face-neutral","face-sad","face-smile","globe","glyph-at","glyph-euro","group","heart-fill","heart","home-smoke","home","info-circle-fill","info-circle","layers","link","locate","location","map","menu-dots","menu-hamburger","minus-circle-fill","minus-circle","minus","mobile","paperclip","person-female","person-male","person-wheelchair","phone","photo","plus-circle-fill","plus-circle","plus","podcast","printer","question-circle-fill","question-circle","refresh","search","share","signin","signout","sort-alphabetical-ascending","sort-alphabetical-descending","sort-ascending","sort-descending","sort","speechbubble-text","speechbubble","star-fill","star","ticket","trash","upload-cloud","upload","user","wifi-crossed","wifi","zoom-in","zoom-out","zoom-text"]

src/icons/editor-selectable-icons.json

@@ -64,6 +64,7 @@
   "printer",
   "question-circle-fill",
   "question-circle",
+  "refresh",
   "search",
   "share",
   "signin",

src/scss/07_utilities/_states.scss

@@ -1,3 +1,14 @@
 .is-hidden {
   display: none;
 }
+
+// Override Drupals visually-hidden class with a bit more comprehensive class.
+.visually-hidden:not(:focus):not(:active) {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}

templates/misc/icon.twig

@@ -1 +1,7 @@
-<span class="hel-icon hel-icon--{{ icon }} {{ class }}" {% if label %} aria-label="{{ label }}" {% else %} aria-hidden="true" {% endif %}></span>
+{% set icon_labelled_by = "hdbt-icon--" ~ random() %}
+
+<span class="hel-icon hel-icon--{{ icon }} {{ class }}" role="img" {% if label %} aria-labelledby="{{ icon_labelled_by }}" {% else %} aria-hidden="true" {% endif %}>
+  {% if label %}
+    <span class="is-hidden" id="{{ icon_labelled_by }}">{{ label }}</span>
+  {% endif %}
+</span>