Merge pull request #5392 from betagouv/fix-CI-accessibility-errors

Fix CI accessibility errors

app/assets/stylesheets/new_design/labels.scss

@@ -55,3 +55,17 @@
     @extend .without-continuation;
   }
 }
+
+// Labels that we only want for screen readers
+// https://www.coolfields.co.uk/2016/05/text-for-screen-readers-only-updated/
+.screen-reader-text {
+  border: none;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  width: 1px;
+  overflow: hidden;
+  position: absolute !important;
+  word-wrap: normal !important;
+}

app/views/shared/dossiers/editable_champs/_champ_label.html.haml

@@ -3,7 +3,7 @@
   = form.label champ.main_value_name do
     = render partial: 'shared/dossiers/editable_champs/champ_label_content', locals: { champ: champ, seen_at: seen_at }
 - else
-  %h4.form-label
+  .form-label.mb-4
     = render partial: 'shared/dossiers/editable_champs/champ_label_content', locals: { champ: champ, seen_at: seen_at }
 
 - if champ.description.present?

config/initializers/date_select.rb

@@ -25,7 +25,7 @@ module ActionView
         end
         field_for = "#{prefix.join('_')}_#{@options[:field_name]}"
 
-        "<span class='hidden'><label for='#{field_for}_#{n}i'>#{label}</label></span>"
+        "<label class='screen-reader-text' for='#{field_for}_#{n}i'>#{label}</label>"
       end
 
       # Returns the separator for a given datetime component.

spec/features/accessibilite/wcag_usager_spec.rb

@@ -62,7 +62,7 @@ feature 'wcag rules for usager', js: true do
       fill_in('individual_nom', with: 'nom')
       click_on 'Continuer'
 
-      expect(page).to be_accessible.skipping :'aria-input-field-name', :'heading-order', :label
+      expect(page).to be_accessible.skipping :'aria-input-field-name'
     end
   end
 
@@ -93,7 +93,7 @@ feature 'wcag rules for usager', js: true do
 
     scenario 'dossier' do
       visit dossier_path(dossier)
-      expect(page).to be_accessible.skipping :'heading-order', :label, :'aria-input-field-name'
+      expect(page).to be_accessible.skipping :'aria-input-field-name'
     end
 
     scenario 'merci' do
@@ -113,12 +113,12 @@ feature 'wcag rules for usager', js: true do
 
     scenario 'modifier' do
       visit modifier_dossier_path(dossier)
-      expect(page).to be_accessible.skipping :'aria-input-field-name', :'heading-order', :label
+      expect(page).to be_accessible.skipping :'aria-input-field-name'
     end
 
     scenario 'brouillon' do
       visit brouillon_dossier_path(dossier)
-      expect(page).to be_accessible.skipping :'aria-input-field-name', :'heading-order', :label
+      expect(page).to be_accessible.skipping :'aria-input-field-name'
     end
   end
 end

spec/features/users/brouillon_spec.rb

@@ -325,7 +325,7 @@ feature 'The user' do
     #     </select>
     #     <!-- … 4 other selects for month, year, minute and seconds -->
     # </div>
-    e = find(:xpath, ".//h4[contains(text()[normalize-space()], '#{libelle}')]")
+    e = find(:xpath, ".//div[contains(text()[normalize-space()], '#{libelle}')]")
     e.sibling('.datetime').first('select')[:id][0..-4]
   end