Add a fieldset legend to the aria-live region on the Templates page (#…

…1680)

* first attempt at improving a11y on the template page

* revert the change to put the templates in a table

* got it working

* remove unintentional change

* Remove fieldset/legend in favour of role=group with aria-labelledby
dquote>
dquote> - Updated content and translations

* Use generic pluralized content when referencing templates to action for screen readers
dquote>
dquote> - Update translations
dquote> - Fix an issue where, if you currently have no templates a screen reader only fieldset was being rendered, indicating that templates can be selected and thus implying the user has existing templates that can be selected when they do not.

* Prevent counter & legend elements from rendering if 0 templates exist

- fix translation typos

---------

Co-authored-by: William B <[email protected]>
Co-authored-by: wbanks <[email protected]>

app/assets/javascripts/templateFolderForm.js

@@ -10,9 +10,10 @@
       this.$form.find("button[value=unknown]").remove();
 
       this.$liveRegionCounter = this.$form.find(".selection-counter");
-
-      this.$liveRegionCounter.before(this.nothingSelectedButtons);
-      this.$liveRegionCounter.before(this.itemsSelectedButtons);
+      this.$legend = this.$form.find("#aria-live-legend");
+      this.$buttonContainer = this.$form.find(".aria-live-region");
+      this.$buttonContainer.before(this.nothingSelectedButtons);
+      this.$buttonContainer.before(this.itemsSelectedButtons);
 
       // all the diff states that we want to show or hide
       this.states = [
@@ -236,6 +237,24 @@
       },
     };
 
+    this.legendText = {
+      default: window.polyglot.t("create_template_legend"),
+      selected: (numSelected) => {
+        if (numSelected === 1) {
+          return window.polyglot.t("selecting_templates_legend");
+        }
+        return window.polyglot.t("move_template_legend");
+      },
+      update: (numSelected) => {
+        let message =
+          numSelected > 0
+            ? this.legendText.selected(numSelected)
+            : this.legendText.default;
+
+        this.$legend.html(message);
+      },
+    };
+
     this.templateFolderCheckboxChanged = function () {
       let numSelected = this.countSelectedCheckboxes();
 
@@ -257,6 +276,7 @@
         this.render();
       }
 
+      this.legendText.update(numSelected);
       this.selectionStatus.update(numSelected);
 
       $(".template-list-selected-counter").toggle(this.hasCheckboxes());
@@ -279,7 +299,7 @@
       // detach everything, unless they are the currentState
       this.states.forEach((state) =>
         state.key === this.currentState && state.key !== "add-new-template"
-          ? this.$liveRegionCounter.before(state.$el)
+          ? this.$buttonContainer.before(state.$el)
           : state.$el.detach(),
       );
 

app/templates/main_template.html

@@ -46,6 +46,9 @@
       copy_template_button: "{{ _('Copy template') }}",
       new_folder_button: "{{ _('New folder') }}",
       nothing_selected: "{{ _('Nothing selected') }}",
+      create_template_legend: "{{ _('You are browsing templates. Create and copy template or add new folder.') }}",
+      selecting_templates_legend: "{{ _('You are selecting templates. Move templates into a new or existing folder.') }}",
+      move_template_legend: "{{ _('Move templates to a new or existing folder') }}",
       selection: "{{ _('selection') }}",
       selections: "{{ _('selections') }}",
       chosen_time_button: "{{ _('Choose a different time') }}",
@@ -83,7 +86,7 @@
       no_folders_only_outside_folder: "{{ _('No folders (only templates outside a folder)') }}",
       no_team_member_only_you: "{{ _('No team members (only you)') }}",
       "selection_of_total_folder": "{{ _('{selection} of {total} folders').format(selection='%{smart_count}',total='%{total}') }} |||| {{ _('many {selection} of {total} folders').format(selection='%{smart_count}',total='%{total}') }}",
-      "selection_of_total_team member": "{{ _('{selection} of {total} team members').format(selection='%{smart_count}',total='%{total}') }} |||| {{ _('many {selection} of {total} team members').format(selection='%{smart_count}',total='%{total}') }}",      
+      "selection_of_total_team member": "{{ _('{selection} of {total} team members').format(selection='%{smart_count}',total='%{total}') }} |||| {{ _('many {selection} of {total} team members').format(selection='%{smart_count}',total='%{total}') }}",
       no_fields: "{{ _('No {field}s').format(field='%{field}') }}",
       "all_team members": "{{ _('All team members') }}",
       "choose_team members": "{{ _('Choose team members') }}",

app/templates/views/templates/_move_to.html

@@ -14,28 +14,33 @@
       </div>
     </div>
     <div id="move_to_new_folder_form">
-      <fieldset class="js-will-stick-at-bottom-when-scrolling contain-floats w-full">
-        <legend class="visuallyhidden">{{ _('Add to new folder') }}</legend>
+      <div class="js-will-stick-at-bottom-when-scrolling contain-floats w-full">
         {{ textbox(templates_and_folders_form.move_to_new_folder_name, width='w-full') }}
         {{ page_footer(_('Add to new folder'), button_name='operation', button_value='move-to-new-folder') }}
-      </fieldset>
+      </div>
     </div>
   {% endif %}
   <div id="add_new_folder_form">
-    <fieldset class="js-will-stick-at-bottom-when-scrolling contain-floats w-full">
-      <legend class="visuallyhidden">{{ _('Add new folder') }}</legend>
+    <div class="js-will-stick-at-bottom-when-scrolling contain-floats w-full">
       {{ textbox(templates_and_folders_form.add_new_folder_name, width='w-full') }}
       {{ page_footer(_('Add new folder'), button_name='operation', button_value='add-new-folder') }}
-    </fieldset>
+    </div>
   </div>
-  <div id="add_new_template_form">
+  <div role='group' id="add_new_template_form">
     <div class="js-will-stick-at-bottom-when-scrolling">
       <a class="button" href="{{ url_for('main.create_template', service_id=current_service.id, template_type=template_type, template_folder_id=current_template_folder_id) }}">
         {{ _('Create template') }}
       </a>
     </div>
   </div>
-  <div class="selection-counter visuallyhidden" role="status" aria-live="polite">
-    {{ _('Nothing selected') }}
-  </div>
+  <div class="aria-live-region visuallyhidden" aria-live="polite" role="status">
+    {% if templates_and_folders_form.move_to.choices and template_list.templates_to_show %}
+      <div class="selection-counter">
+        {{ _('Nothing selected') }}
+      </div>
+      <div id="aria-live-legend">
+        {{ _('You are browsing templates. Create and copy template or add new folder.') }}
+      </div>
+    {% endif %}
+    </div>
 </div>

app/templates/views/templates/_template_list.html

@@ -21,7 +21,7 @@
     {% endif %}
   </p>
 {% else %}
-  {% set display_checkboxes = current_user.has_permissions('manage_templates') and not sending_view %}
+  {% set display_checkboxes = current_user.has_permissions('manage_templates') and not sending_view and template_list.templates_to_show %}
 
   <nav id="template-list" class="{{ 'top-gutter-5px contain-floats' if (not show_template_nav and not show_search_box) else '' }}"  aria-label="{{ _('Templates and folders') }}">
     {% if display_checkboxes %}

app/translations/csv/fr.csv

@@ -1761,8 +1761,11 @@
 "Maximum 612 characters. Some messages may be too long due to custom content.","612 caractères au maximum. Certains messages peuvent être trop longs en raison de leur contenu personnalisé."
 "Too many characters","Limite de caractère atteinte"
 "New features","Nouvelles fonctionnalités"
+"You are browsing templates. Create and copy template or add new folder.","Vous explorez les gabarits. Créer et copier un gabarit ou créer un nouveau dossier."
+"Move templates to a new or existing folder","Déplacer les gabarits dans un dossier"
+"You are selecting templates. Move templates into a new or existing folder.","Vous sélectionnez les gabarits. Déplacer les gabarits dans un dossier."
 "Row number","Numéro de ligne"
 "Type","Type"
 "Sent by email","Envoyé par courriel"
 "Sent Time","Heure d’envoi"
-"Job","Tâche"
+"Job","Tâche"