fix(a11y): no-styles support, SR improvements for multiselect (#30)

* fix(a11y): make initial input field hidden * fix(a11y): SR description for multiselected fields * fix: comment syntax to DTL
PHACDataHub · Mar 14, 2023 · 4be3b5a · 4be3b5a
1 parent f35d596
commit 4be3b5a
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 9 deletions.
diff --git a/autocomplete/locale/en/LC_MESSAGES/django.po b/autocomplete/locale/en/LC_MESSAGES/django.po
@@ -25,11 +25,20 @@ msgid_plural "%(count)s results available."
 msgstr[0] ""
 msgstr[1] ""
 
+#: templates/autocomplete/strings/backspace_instruction.html:2
+msgid "Press backspace to delete the last selected item."
+msgstr ""
+
 #: templates/autocomplete/strings/item_selected.html:2
 #, python-format
 msgid "%(item)s selected,"
 msgstr ""
 
+#: templates/autocomplete/strings/selected.html:2
+#, python-format
+msgid "selected."
+msgstr ""
+
 #: templates/autocomplete/strings/more_results.html:2
 #, python-format
 msgid "Displaying maximum %(count)s out of %(total_results)s results."

diff --git a/autocomplete/locale/fr/LC_MESSAGES/django.po b/autocomplete/locale/fr/LC_MESSAGES/django.po
@@ -25,11 +25,20 @@ msgid_plural "%(count)s results available."
 msgstr[0] "%(count)s résultat disponible"
 msgstr[1] "%(count)s résultats disponibles"
 
+#: templates/autocomplete/strings/backspace_instruction.html:2
+msgid "Press backspace to delete the last selected item."
+msgstr "Appuyez sur retour arrière pour supprimer le dernier élément sélectionné."
+
 #: templates/autocomplete/strings/item_selected.html:2
 #, python-format
 msgid "%(item)s selected,"
 msgstr "%(item)s sélectionné"
 
+#: templates/autocomplete/strings/selected.html:2
+#, python-format
+msgid "selected."
+msgstr "sélectionné."
+
 #: templates/autocomplete/strings/more_results.html:2
 #, python-format
 msgid "Displaying maximum %(count)s out of %(total_results)s results."

diff --git a/autocomplete/templates/autocomplete/component.html b/autocomplete/templates/autocomplete/component.html
@@ -9,13 +9,13 @@
     class="phac_aspc_form_autocomplete"
     hx-preserve
   >
-    {# Hidden input elements used to maintain the component's state #}
-    {# and used when submitting forms #}
+    {% comment %} Hidden input elements used to maintain the component's state {% endcomment %}
+    {% comment %} and used when submitting forms {% endcomment %}
     <div id="{{ component_id }}">
       {% include "./values.html" %}
     </div>
 
-    {# Data element used to store component state data #}
+    {% comment %} Data element used to store component state data {% endcomment %}
     <span
       id="{{ component_id }}__data"
       {% if not multiselect and selected_items|length == 1 %}
@@ -37,7 +37,7 @@
       aria-multiselectable="true"
       {% endif %}
     ></div>
-    {# This region provides contextual information for screen readers #}
+    {% comment %} This region provides contextual information for screen readers {% endcomment %}
     <div role="region" class="live_info" id="{{ component_id }}__info" aria-live="polite">
         {% if selected_items|length > 0 %}
             {% for item in selected_items %}
@@ -48,10 +48,25 @@
         {% else %}
             {% use_string "nothing_selected" custom_strings %}
         {% endif %}
-    </div>  
+    </div>
+    {% comment %} This div provides screen readers information about selected items {% endcomment %}
+    {% if multiselect %}
+    <div class="sr_description sr-only" id="{{ component_id }}__sr_description"
+         style="height:0; overflow:hidden;">
+        {% if selected_items|length > 0 %}
+            {{ selected_items|length }} {% use_string "selected" custom_strings %}
+            {% for item in selected_items %}
+            {% with item=item.label %}
+                {% use_string "item_selected" custom_strings %}
+            {% endwith %}
+            {% endfor %}
+            {% use_string "backspace_instruction" custom_strings %}
+        {% endif %}
+    </div>
+    {% endif %}
   </div>
 </div>
-{# This code snippet loads the required CSS and JS if not already loaded. #}
+{% comment %} This code snippet loads the required CSS and JS if not already loaded. {% endcomment %}
 <script>
     (function () {
         // Add CSS if not already added

diff --git a/autocomplete/templates/autocomplete/item.html b/autocomplete/templates/autocomplete/item.html
@@ -37,6 +37,17 @@
 
     {% if multiselect %}
         {% include "./ac_container.html" with selected_items=toggle %}
+        <div hx-swap-oob="innerHTML" id="{{ component_id }}__sr_description">
+            {% if toggle|length > 0 %}
+                {{ toggle|length }} {% use_string "selected" custom_strings %}
+                {% for item in toggle %}
+                {% with item=item.label %}
+                    {% use_string "item_selected" custom_strings %}
+                {% endwith %}
+                {% endfor %}
+                {% use_string "backspace_instruction" custom_strings %}
+            {% endif %}
+        </div>
     {% else %}
         {% if item.selected %}
             {% include "./textinput.html" with selected_items=item_as_list swap_oob=True %}

diff --git a/autocomplete/templates/autocomplete/strings/backspace_instruction.html b/autocomplete/templates/autocomplete/strings/backspace_instruction.html
@@ -0,0 +1,2 @@
+{% load i18n %}
+{% translate "Press backspace to delete the last selected item." %}
diff --git a/autocomplete/templates/autocomplete/strings/selected.html b/autocomplete/templates/autocomplete/strings/selected.html
@@ -0,0 +1,2 @@
+{% load i18n %}
+{% translate "selected." %}
diff --git a/autocomplete/templates/autocomplete/textinput.html b/autocomplete/templates/autocomplete/textinput.html
@@ -12,6 +12,9 @@
     aria-controls="{{ component_id }}__items"
     aria-haspopup="listbox"
     aria-expanded="false"
+    {% if multiselect %}
+    aria-describedby="{{ component_id }}__sr_description"
+    {% endif %}
 
     onkeydown="return phac_aspc_autocomplete_keydown_handler(event)"
     onkeyup="return phac_aspc_autocomplete_keyup_handler(event)"

diff --git a/autocomplete/templates/autocomplete/values.html b/autocomplete/templates/autocomplete/values.html
@@ -1,8 +1,8 @@
-{# Hidden input elements used to maintain the component's state #}
-{# and used when submitting forms #}
+{% comment %} Hidden input elements used to maintain the component's state {% endcomment %}
+{% comment %} and used when submitting forms {% endcomment %}
 {% for value in values %}
 <input type="hidden" name="{{ name }}" value="{{ value }}" />
 {% endfor %}
 {% if required and values|length == 0 %}
-<input type="text" name="{{ name }}" required class="ac_required_input" tabindex="-1" aria-hidden="true">
+<input type="hidden" type="text" name="{{ name }}" required class="ac_required_input" tabindex="-1" aria-hidden="true">
 {% endif %}