From b34134ce1e95627029f1957c62e67fb4aaf949c7 Mon Sep 17 00:00:00 2001 From: Stephen McMurtry Date: Tue, 10 Oct 2023 06:51:18 -0700 Subject: [PATCH] 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 <7444334+whabanks@users.noreply.github.com> Co-authored-by: wbanks --- app/assets/javascripts/templateFolderForm.js | 28 ++++++++++++++++--- app/templates/main_template.html | 5 +++- app/templates/views/templates/_move_to.html | 25 ++++++++++------- .../views/templates/_template_list.html | 2 +- app/translations/csv/fr.csv | 5 +++- 5 files changed, 48 insertions(+), 17 deletions(-) diff --git a/app/assets/javascripts/templateFolderForm.js b/app/assets/javascripts/templateFolderForm.js index dbfb99b732..428b2c0ce3 100644 --- a/app/assets/javascripts/templateFolderForm.js +++ b/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(), ); diff --git a/app/templates/main_template.html b/app/templates/main_template.html index 79792104e6..1d38e7f6b7 100644 --- a/app/templates/main_template.html +++ b/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') }}", diff --git a/app/templates/views/templates/_move_to.html b/app/templates/views/templates/_move_to.html index 2e1416d366..6321b8d2b0 100644 --- a/app/templates/views/templates/_move_to.html +++ b/app/templates/views/templates/_move_to.html @@ -14,28 +14,33 @@
-
- {{ _('Add to new folder') }} +
{{ 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') }} -
+
{% endif %}
-
- {{ _('Add new folder') }} +
{{ 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') }} -
+
-
+ -
- {{ _('Nothing selected') }} -
+
+ {% if templates_and_folders_form.move_to.choices and template_list.templates_to_show %} +
+ {{ _('Nothing selected') }} +
+
+ {{ _('You are browsing templates. Create and copy template or add new folder.') }} +
+ {% endif %} +
diff --git a/app/templates/views/templates/_template_list.html b/app/templates/views/templates/_template_list.html index 650fdd69d3..a43527f577 100644 --- a/app/templates/views/templates/_template_list.html +++ b/app/templates/views/templates/_template_list.html @@ -21,7 +21,7 @@ {% endif %}

{% 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 %}