Hide pesudo-element content from assistive technologies

app/assets/stylesheets/buttons.scss

@@ -151,10 +151,8 @@
   .dropdown-button {
     white-space: nowrap;
 
-    &::after {
+    [aria-hidden="true"].fr-ml-2v::after {
       content: "▾";
-      margin-left: $default-spacer;
-      font-weight: bold;
     }
 
     &.icon-only {

app/components/dossiers/batch_operation_component/batch_operation_component.html.haml

@@ -13,6 +13,7 @@
         -# Dropdown button title
         %button#batch_operation_others.fr-btn.fr-btn--sm.fr-btn--secondary.fr-ml-1w.dropdown-button{ disabled: true, data: { menu_button_target: 'button', batch_operation_target: 'dropdown' } }
           = t('.operations.other')
+          %span.fr-ml-2v{ 'aria-hidden': 'true' }
 
         #state-menu.dropdown-content.fade-in-down{ data: { menu_button_target: 'menu' }, "aria-labelledby" => "batch_operation_others" }
           %ul.dropdown-items

app/components/dropdown/menu_component/menu_component.html.haml

@@ -1,6 +1,7 @@
 = content_tag(@wrapper, wrapper_options) do
   %button{ class: button_class_names, id: button_id, disabled: disabled?, data: data, "aria-expanded": "false", 'aria-haspopup': 'true', 'aria-controls': menu_id }
     = button_inner_html
+    %span.fr-ml-2v{ 'aria-hidden': 'true' }
 
   %div{ data: { menu_button_target: 'menu' }, id: menu_id, 'aria-labelledby': button_id, role: menu_role, 'tabindex': -1, class: menu_class_names }
     = menu_header_html

app/views/layouts/_header.haml

@@ -53,7 +53,7 @@
                     = render partial: 'shared/help/help_dropdown_instructeur'
                   - else
                     -# NB: on mobile in order to have links correctly aligned, we need a left icon #
-                    = link_to t('help'), t("links.common.faq.url"), class: 'fr-btn dropdown-button'
+                    = link_to t('help'), t("links.common.faq.url"), class: 'fr-btn'
 
 
 

public/500.html

@@ -2109,7 +2109,7 @@
                   <li>
                     <!-- / NB: on mobile in order to have links correctly aligned, we need a left icon -->
                     <a
-                      class="fr-btn dropdown-button"
+                      class="fr-btn"
                       href="/faq"
                       >Aide</a
                     >

public/502.html

@@ -2108,7 +2108,7 @@
                   <li>
                     <!-- / NB: on mobile in order to have links correctly aligned, we need a left icon -->
                     <a
-                      class="fr-btn dropdown-button"
+                      class="fr-btn"
                       href="/faq"
                       >Aide</a
                     >

public/503.html

@@ -2108,7 +2108,7 @@
                   <li>
                     <!-- / NB: on mobile in order to have links correctly aligned, we need a left icon -->
                     <a
-                      class="fr-btn dropdown-button"
+                      class="fr-btn"
                       href="/faq"
                       >Aide</a
                     >

public/504.html

@@ -2108,7 +2108,7 @@
                   <li>
                     <!-- / NB: on mobile in order to have links correctly aligned, we need a left icon -->
                     <a
-                      class="fr-btn dropdown-button"
+                      class="fr-btn"
                       href="/faq"
                       >Aide</a
                     >