refactor(rgaa/contact): question type as radio buttons for better rgaa compliance

On suit les recommandations de l'audit RGAA 2021, mais il y aurait encore
peut-être à redire…

app/assets/stylesheets/contact.scss

@@ -9,12 +9,7 @@ $contact-padding: $default-space * 2;
     padding-bottom: $contact-padding;
   }
 
-  .hidden {
-    display: none;
-  }
-
   ul {
     margin-bottom: $default-space;
   }
-
 }

app/assets/stylesheets/forms.scss

@@ -30,7 +30,8 @@
     color: $dark-red;
   }
 
-  label {
+  label,
+  legend.form-label {
     font-size: 18px;
     margin-bottom: $default-padding;
     display: block;

app/javascript/new_design/support.js

@@ -1,5 +1,5 @@
 //
-// This content is inspired by w3c aria example
+// This content is inspired by w3c aria example, rewritten for better RGAA compatibility.
 // https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-faq.html
 //
 
@@ -20,22 +20,21 @@ class ButtonExpand {
       this.controlledNode = document.getElementById(id);
     }
 
-    this.domNode.setAttribute('aria-expanded', 'false');
+    this.radioInput = this.domNode.querySelector('input[type="radio"]');
+
     this.hideContent();
 
     this.domNode.addEventListener('keydown', this.handleKeydown.bind(this));
     this.domNode.addEventListener('click', this.handleClick.bind(this));
-    this.domNode.addEventListener('focus', this.handleFocus.bind(this));
-    this.domNode.addEventListener('blur', this.handleBlur.bind(this));
   }
 
   showContent() {
-    this.domNode.setAttribute('aria-expanded', 'true');
+    this.radioInput.checked = true;
-    this.domNode.classList.add('primary');
+
     if (this.controlledNode) {
+      this.controlledNode.setAttribute('aria-hidden', 'false');
       this.controlledNode.classList.remove('hidden');
     }
-    this.formInput.value = this.domNode.getAttribute('data-question-type');
 
     this.allButtons.forEach((b) => {
       if (b != this) {
@@ -45,18 +44,22 @@ class ButtonExpand {
   }
 
   hideContent() {
-    this.domNode.setAttribute('aria-expanded', 'false');
+    this.radioInput.checked = false;
-    this.domNode.classList.remove('primary');
+
     if (this.controlledNode) {
+      this.controlledNode.setAttribute('aria-hidden', 'true');
       this.controlledNode.classList.add('hidden');
     }
   }
 
   toggleExpand() {
-    if (this.domNode.getAttribute('aria-expanded') === 'true') {
+    if (
-      this.hideContent();
+      this.controlledNode &&
-    } else {
+      this.controlledNode.getAttribute('aria-hidden') === 'true'
+    ) {
       this.showContent();
+    } else {
+      this.hideContent();
     }
   }
 
@@ -64,14 +67,10 @@ class ButtonExpand {
     this.allButtons = buttons;
   }
 
-  setFormInput(formInput) {
+  handleKeydown(event) {
-    this.formInput = formInput;
-  }
-
-  handleKeydown() {
     switch (event.keyCode) {
       case this.keyCode.RETURN:
-        this.toggleExpand();
+        this.showContent();
 
         event.stopPropagation();
         event.preventDefault();
@@ -83,17 +82,11 @@ class ButtonExpand {
   }
 
   handleClick() {
-    event.stopPropagation();
+    // NOTE: click event is also fired on input and label activations
-    event.preventDefault();
+    // ie., not necessarily by a mouse click but any user inputs, like keyboard navigation with arrows keys.
-    this.toggleExpand();
+    // Cf https://www.w3.org/TR/2012/WD-html5-20121025/content-models.html#interactive-content
-  }
 
-  handleFocus = function () {
+    this.showContent();
-    this.domNode.classList.add('focus');
-  };
-
-  handleBlur() {
-    this.domNode.classList.remove('focus');
   }
 }
 
@@ -103,18 +96,14 @@ if (document.querySelector('#contact-form')) {
   window.addEventListener(
     'DOMContentLoaded',
     function () {
-      var buttons = document.querySelectorAll(
+      var buttons = document.querySelectorAll('fieldset[name=type] label');
-        'button[aria-expanded][aria-controls], button.button-without-hint'
-      );
       var expandButtons = [];
-      var formInput = document.querySelector('form input#type');
 
       buttons.forEach((button) => {
         var be = new ButtonExpand(button);
         expandButtons.push(be);
       });
       expandButtons.forEach((button) => button.setAllButtons(expandButtons));
-      expandButtons.forEach((button) => button.setFormInput(formInput));
     },
     false
   );

app/views/support/index.html.haml

@@ -7,7 +7,7 @@
     %h1.new-h1
       = t('.contact')
 
-    = form_tag contact_path, method: :post, multipart: true, class: 'form' do |f|
+    = form_tag contact_path, method: :post, multipart: true, class: 'form' do
 
       .description
         %p= t('.intro_html')
@@ -21,26 +21,24 @@
             %span.mandatory *
           = text_field_tag :email, params[:email], required: true, autocomplete: 'email'
 
-      .contact-champ
+      %fieldset.radios.vertical{ name: "type" }
-        = label_tag :type do
+        %legend.form-label
           = t('.your_question')
-        = hidden_field_tag :type, params[:type]
+          %span.mandatory *
 
-      %ul
         - @options.each do |(question, question_type, link)|
-          %li.mb-1
+          = label_tag "type_#{question_type}", { 'aria-controls': link ? "card-#{question_type}" : nil } do
-            - if link.present?
+            = radio_button_tag :type, question_type, false, required: true
-              %button.button{ 'aria-expanded': 'false', 'aria-controls': question_type, data: { 'question-type': question_type } }= question
+            = question
-            - else
+
-              %button.button.button-without-hint{ data: { 'question-type': question_type } }= question
+          - if link.present?
+            .support.card.featured.mb-4.ml-5.hidden{ id: "card-#{question_type}", "aria-hidden": true }
+              .card-title
+                = t('.our_answer')
+              .card-content
+                -# i18n-tasks-use t("support.index.#{question_type}.answer_html")
+                = t('answer_html', scope: [:support, :index, question_type], base_url: APPLICATION_BASE_URL, "link_#{question_type}": link)
 
-            - if link.present?
-              .support.card.featured.mt-2.mb-2.hidden{ id: question_type }
-                .card-title
-                  = t('.our_answer')
-                .card-content
-                  -# i18n-tasks-use t("support.index.#{question_type}.answer_html")
-                  = t('answer_html', scope: [:support, :index, question_type], base_url: APPLICATION_BASE_URL, "link_#{question_type}": link)
 
       .contact-champ
         = label_tag :dossier_id, t('file_number', scope: [:utils])