Feature/loop 880 accessibility 05 2021

web/profiles/custom/os2loop/modules/os2loop_lists/templates/os2loop-lists-expert.html.twig

@@ -17,7 +17,7 @@
   {% for node in data %}
     <div class="list-group">
       <article class="list-group-item mb-2 bg-light border-0">
-        <div class="text-muted small">{{ node.type.entity.label }} </div>
+        <div class="small">{{ node.type.entity.label }} </div>
         <h3 class="h6"><a href="{{ url('entity.node.canonical', { 'node': node.id() }) }}">{{ node.title() }}</a></h3>
       </article>
     </div>

web/profiles/custom/os2loop/modules/os2loop_lists/templates/os2loop-lists-profession.html.twig

@@ -17,7 +17,7 @@
   {% for node in data %}
     <div class="list-group">
       <article class="list-group-item mb-2 bg-light border-0">
-        <div class="text-muted small">{{ node.type.entity.label }} </div>
+        <div class="small">{{ node.type.entity.label }} </div>
         <h3 class="h6"><a href="{{ url('entity.node.canonical', { 'node': node.id() }) }}">{{ node.title() }}</a></h3>
       </article>
     </div>

web/profiles/custom/os2loop/themes/os2loop_theme/assets/app.scss

@@ -16,6 +16,10 @@ a {
   margin-bottom: $spacer * 2;
 }
 
+.nav-link {
+  color: $black !important;
+}
+
 .bg-white-loop {
   @extend .container;
   background-color: $white;

web/profiles/custom/os2loop/themes/os2loop_theme/assets/colors.scss

@@ -39,4 +39,4 @@ $dark-subscribe: darken($subscribe, 10%);
 $dark-favourite: darken($favourite, 10%);
 
 // Link color
-$link-color: #0056b3;
+$link-color: #0051a8;

web/profiles/custom/os2loop/themes/os2loop_theme/assets/icons.scss

@@ -19,7 +19,7 @@
     }
 
     &.print {
-      @include link-icon("\f501");
+      @include link-icon("\f501", $text-color: $white);
     }
 
     &.fav {
@@ -43,15 +43,19 @@
     }
 
     &.share {
-      @include link-icon("\f52e");
+      @include link-icon("\f52e", $text-color: $white);
     }
 
     &.flag {
-      @include link-icon("\f3cc");
+      @include link-icon("\f3cc", $text-color: $white);
     }
 
     &.reply {
-      @include link-icon("\f51f");
+      @include link-icon("\f51f", $text-color: $white);
+    }
+
+    &.bell {
+      @include link-icon("\f18a", $subscribe, $dark-subscribe);
     }
 
     &.delete {

web/profiles/custom/os2loop/themes/os2loop_theme/assets/mixins.scss

@@ -1,13 +1,15 @@
 @mixin link-icon(
   $content: null,
   $color: $icon-base-color,
-  $hover-color: $dark-icon-base-color
+  $hover-color: $dark-icon-base-color,
+  $text-color: $black
 ) {
   background-color: $color;
 
   &:hover {
     background-color: $hover-color;
   }
+
   a {
     @if $content {
       width: 100%;
@@ -18,6 +20,12 @@
         font-family: bootstrap-icons !important;
         content: $content;
       }
+      &:focus-visible {
+        .visually-hidden {
+          position: relative !important;
+          color: $text-color !important;
+        }
+      }
     }
   }
 }

web/profiles/custom/os2loop/themes/os2loop_theme/assets/paragraphs/highlighted-content.scss

@@ -1,5 +1,6 @@
 .os2loop-highlighted-container {
   background-color: $primary-color;
+  color: $black;
   padding: 1em;
   margin: 1em 0;
   display: flex;

web/profiles/custom/os2loop/themes/os2loop_theme/templates/block/block--system-branding-block.html.twig

@@ -15,7 +15,8 @@
  */
 #}
 {% if site_logo %}
-  <a href="{{ path('<front>') }}" rel="home" class="navbar-brand" alt="{{ 'Home'|t }}">
+  <a href="{{ path('<front>') }}" rel="home" class="navbar-brand">
+    <span class="visually-hidden">{{ 'Home'|t }}</span>
     {% include(site_logo) %}
   </a>
 {% endif %}

web/profiles/custom/os2loop/themes/os2loop_theme/templates/content-entities/comment--list-display.html.twig

@@ -68,7 +68,7 @@
 #}
 <div class="list-group">
   <article class="list-group-item mb-2 bg-light border-0">
-    <div class="text-muted small">{{ commented_entity.os2loop_question_content.value }}</div>
+    <div class="small">{{ commented_entity.os2loop_question_content.value }}</div>
     <div class="d-flex">
       <h3 class="h6"><a href="{{ path('entity.comment.canonical', {'comment': comment.id}) }}#comment-{{ comment.id }}">{{ content.os2loop_question_answer }}</a></h3>
     </div>

web/profiles/custom/os2loop/themes/os2loop_theme/templates/content-entities/flag--os2loop-favourite.html.twig

@@ -36,8 +36,11 @@
 
 {# Set nofollow to prevent search bots from crawling anonymous flag links #}
 {% set attributes = attributes.setAttribute('rel', 'nofollow') %}
+{% set attributes = attributes.removeAttribute('title') %}
 
 <div class="{{ classes|join(' ') }}" title='{{ title }}'>
-  <a{{ attributes }} aria-label='{{ title }}'></a>
+  <a{{ attributes }} aria-label='{{ title }}'>
+    <span class="visually-hidden">{{ title }}</span>
+  </a>
 </div>
 {% endspaceless %}

web/profiles/custom/os2loop/themes/os2loop_theme/templates/content-entities/flag--os2loop-subscription-node.html.twig

@@ -24,6 +24,7 @@
 {# Set the remaining Flag CSS classes. #}
 {% set classes = [
     'icon',
+    'bell',
     'flag-' ~ flag.id()|clean_class,
     'js-flag-' ~ flag.id()|clean_class ~ '-' ~ flaggable.id(),
     action_class,
@@ -32,8 +33,11 @@
 
 {# Set nofollow to prevent search bots from crawling anonymous flag links #}
 {% set attributes = attributes.setAttribute('rel', 'nofollow') %}
+{% set attributes = attributes.removeAttribute('title') %}
 
 <div class="{{ classes|join(' ') }}" title='{{ title }}'>
-  <a{{ attributes }} aria-label='{{ title }}'><i class="bi bi-bell"></i></a>
+  <a{{ attributes }} aria-label='{{ title }}'>
+    <span class="visually-hidden">{{ title }}</span>
+  </a>
 </div>
 {% endspaceless %}

web/profiles/custom/os2loop/themes/os2loop_theme/templates/content-entities/message.html.twig

@@ -30,7 +30,7 @@
 
 <div class="list-group">
   <article class="list-group-item mb-2 bg-light border-0">
-    <div class="text-muted small">{{ message.template.entity.label }}</div>
+    <div class="small">{{ message.template.entity.label }}</div>
     <h3 class="h6">{{ content|without('os2loop_message_node_refer') }}</h3>
   </article>
 </div>

web/profiles/custom/os2loop/themes/os2loop_theme/templates/content-entities/paragraph--os2loop-documents-step.html.twig

@@ -57,7 +57,9 @@
           {{ content.os2loop_documents_step_text }}
           {{ content.os2loop_documents_step_image }}
           </div>
-          <ol class="indented">{{ content.os2loop_documents_steps }}</ol>
+          {% if content.os2loop_documents_steps['#title'] is not null %}
+            <ol class="indented">{{ content.os2loop_documents_steps }}</ol>
+          {% endif %}
         </li>
     {% endblock %}
 {% endblock paragraph %}

web/profiles/custom/os2loop/themes/os2loop_theme/templates/content-entities/taxonomy-term--list-display.html.twig

@@ -28,7 +28,7 @@
 
 <div class="list-group">
   <article class="list-group-item mb-2 bg-light border-0">
-    <div class="text-muted small">{{ term.vid.entity.label }}</div>
+    <div class="small">{{ term.vid.entity.label }}</div>
     <div class="d-flex">
       <h3 class="h6">{{ name }}</h3>
       <div class="ml-auto">{{ content.flag_os2loop_subscription_term }}</div>

web/profiles/custom/os2loop/themes/os2loop_theme/templates/content/node--list-display.html.twig

@@ -78,7 +78,7 @@
 
 <div class="list-group">
   <article class="list-group-item mb-2 bg-light border-0">
-    <div class="text-muted small">{{ node.type.entity.label }}</div>
+    <div class="small">{{ node.type.entity.label }}</div>
     <div class="d-flex">
       <h3 class="h6"><a href="{{ url }}">{{ label }}</a></h3>
       {% if view_id == 'os2loop_subscriptions_node' %}

web/profiles/custom/os2loop/themes/os2loop_theme/templates/content/node--os2loop-documents-collection.html.twig

@@ -102,10 +102,10 @@
       <div{{ content_attributes }}>
         {{ content.os2loop_documents_dc_content }}
         {% if os2loop_documents_collection_tree|default(false) %}
-          <fieldset>
-            <legend>{{ 'Documents in collection'|t }}</legend>
+          <div>
+            <h2>{{ 'Documents in collection'|t }}</h2>
             {{ _self.table_of_contents(os2loop_documents_collection_tree, node) }}
-          </fieldset>
+          </div>
         {% endif %}
       </div>
     </div>

web/profiles/custom/os2loop/themes/os2loop_theme/templates/content/node--os2loop-documents-document.html.twig

@@ -119,21 +119,21 @@
     <div class="tab-pane" id="about-collection" role="tabpanel" aria-labelledby="about-collection">
       {{ macros.title(os2loop_documents_collection.title.value, "document", node, content) }}
       {% if os2loop_documents_collection_tree|default(false) %}
-        <fieldset>
-          <legend>{{ 'Documents in collection'|t }}
+        <div>
+          <h2>{{ 'Documents in collection'|t }}
             <a href="{{ path('entity.node.canonical', {node: os2loop_documents_collection.id}) }}">{{ os2loop_documents_collection.title.value }}</a>
-          </legend>
+          </h2>
           {{ _self.table_of_contents(os2loop_documents_collection_tree, os2loop_documents_collection, node) }}
-        </fieldset>
+        </div>
       {% elseif os2loop_documents_collections|default(false) %}
-        <fieldset>
-          <legend>{{ 'Document is part of these collections'|t }}</legend>
+        <div>
+          <h2>{{ 'Document is part of these collections'|t }}</h2>
           <ol>
             {% for collection in os2loop_documents_collections %}
               <li><a href="{{ path('entity.node.canonical', {node: node.id, collection: collection.id, collection: collection.id}) }}">{{ collection.title.value }}</a></li>
             {% endfor %}
           </ol>
-        </fieldset>
+        </div>
       {% endif %}</div>
   </div>
 </article>

web/profiles/custom/os2loop/themes/os2loop_theme/templates/field/user-info.html.twig

@@ -19,7 +19,7 @@
       {% set user_url = user['#user'].id is not empty ? url('entity.user.canonical', {'user': user['#user'].id}) : '#' %}
       <a href="{{ user_url }}">{{ user['#user'].os2loop_user_given_name.value }} {{ user['#user'].os2loop_user_family_name.value }}</a>
     </div>
-    <div class="text-muted small">
+    <div class="small">
       <div>{{ user['#user'].os2loop_user_job_title.value }}</div>
       <div>{{ user['#user'].os2loop_user_place.value }}</div>
       <div>{{ date }}</div>

web/profiles/custom/os2loop/themes/os2loop_theme/templates/navigation/content-tabs.html.twig

@@ -12,8 +12,8 @@
 #}
 <ul class="tabs nav" id="{{ id }}" role="tablist">
   {% for key, tab in tabs %}
-    <li>
-      <a class="tab {{ key == 0 ? 'active' }}" id="{{ tab.id }}-tab" data-toggle="tab" href="#{{ tab.id }}" role="tab" aria-controls="{{ tab.id }}" aria-selected="{{ key == 0 ? 'true' : 'false' }}">{{ tab.name }}</a>
+    <li role="tab" aria-controls="{{ tab.id }}">
+      <a class="tab {{ key == 0 ? 'active' }}" id="{{ tab.id }}-tab" data-toggle="tab" href="#{{ tab.id }}" >{{ tab.name }}</a>
     </li>
   {% endfor %}
 </ul>

web/profiles/custom/os2loop/themes/os2loop_theme/templates/navigation/content-tasks.html.twig

@@ -10,19 +10,29 @@
 #}
 <div class="icon-container">
   <div class="icon print" title="{{ 'Print document (PDF)'|t }}">
-    <a aria-label="{{ 'Print document (PDF)'|t }}" href="{{ path('entity_print.view', {export_type: 'pdf', entity_type: 'node', entity_id: node.id}) }}"></a>
+    <a aria-label="{{ 'Print document (PDF)'|t }}" href="{{ path('entity_print.view', {export_type: 'pdf', entity_type: 'node', entity_id: node.id}) }}">
+    <span class="visually-hidden">{{ 'Print document (PDF)'|t }}</span>
+  </a>
   </div>
   <div class="icon flag" title="{{ 'contact editorial office'|t }}">
-    <a aria-label="{{ 'Contact editorial staff'|t }}" href="{{ path('os2loop_flag_content.flag_content_form', {node: node.id}) }}"></a>
+    <a aria-label="{{ 'Contact editorial staff'|t }}" href="{{ path('os2loop_flag_content.flag_content_form', {node: node.id}) }}">
+    <span class="visually-hidden">{{ 'Contact editorial staff'|t }}</span>
+    </a>
   </div>
   <div class="icon share" title="{{ 'Share with a friend'|t }}">
-    <a aria-label="{{ 'Share with a friend'|t }}"></a>
+    <a aria-label="{{ 'Share with a friend'|t }}">
+    <span class="visually-hidden">{{ 'Share with a friend'|t }}</span>
+    </a>
   </div>
   <div class="icon edit" title="{{ 'Edit document'|t }}">
-    <a aria-label="{{ 'Edit document'|t }}" href="{{ path('entity.node.edit_form', {node: node.id}) }}"></a>
+    <a aria-label="{{ 'Edit document'|t }}" href="{{ path('entity.node.edit_form', {node: node.id}) }}">
+        <span class="visually-hidden">{{ 'Edit document'|t }}</span>
+    </a>
   </div>
   <div class="icon delete" title="{{ 'Delete document'|t }}">
-    <a aria-label="{{ 'delete document'|t }}" href="{{ path('entity.node.delete_form', {node: node.id}) }}"></a>
+    <a aria-label="{{ 'delete document'|t }}" href="{{ path('entity.node.delete_form', {node: node.id}) }}">
+    <span class="visually-hidden">{{ 'delete document'|t }}</span>
+    </a>
   </div>
   {{ content.flag_os2loop_favourite }}
   {{ content.flag_os2loop_subscription_node }}

web/profiles/custom/os2loop/themes/os2loop_theme/templates/navigation/menu--main.html.twig

@@ -41,21 +41,20 @@
             ] %}
             {% set classes_link = [
               'nav-link',
-              'text-dark',
               item.is_expanded and item.url.routeName == '<nolink>' ? 'dropdown-toggle',
               item.is_collapsed and item.url.routeName == '<nolink>' ? 'dropdown-toggle',
               item.in_active_trail ? 'active',
             ] %}
             <li{{ item.attributes.addClass(classes_list_item) }}>
               {% if item.url.routeName == '<nolink>' %}
-                <a class="{{ classes_link|join(' ') }}" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <a class="{{ classes_link|join(' ') }}" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                   {{ item.title }}
                 </a>
               {% else %}
               {{ link(item.title, item.url, {'class': classes_link}) }}
               {% endif %}
               {% if item.below %}
-                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+                <div class="dropdown-menu" aria-label="{{ item.title }}">
                   {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
                 </div>
               {% endif %}