Sfoglia il codice sorgente

Fixes #22527: Notify screen reader of quick search updates (#22534)

Jeremy Stretch 1 settimana fa
parent
commit
742cd0b5b6

+ 11 - 0
netbox/templates/htmx/table.html

@@ -22,6 +22,17 @@
     <div hx-swap-oob="innerHTML:.total-object-count">{{ table.rows|length }}</div>
   {% endif %}
 
+  {# Announce the updated result count to assistive technology #}
+  {% if not table.embedded %}
+    <div hx-swap-oob="innerHTML:#object-list-status">
+      {% blocktrans trimmed count count=table.page.paginator.count %}
+        {{ count }} result found
+      {% plural %}
+        {{ count }} results found
+      {% endblocktrans %}
+    </div>
+  {% endif %}
+
   {# Include the updated "save" link for the table configuration #}
   {% if table.config_params and not table.embedded %}
     <a class="dropdown-item" hx-swap-oob="outerHTML:#table_save_link" href="{% url 'extras:tableconfig_add' %}?{{ table.config_params }}&return_url={{ request.path }}" id="table_save_link">{% trans "Save" %}</a>

+ 3 - 0
netbox/templates/inc/table_controls_htmx.html

@@ -1,6 +1,9 @@
 {% load helpers %}
 {% load i18n %}
 
+{# Live region used to announce updated results (e.g. after a quick search) to assistive technology #}
+<div id="object-list-status" class="visually-hidden" role="status" aria-live="polite"></div>
+
 <div class="row mb-3" id="results">
   <div class="col-auto d-print-none">
     <div class="input-group input-group-flat me-2 quicksearch" hx-disinherit="hx-select hx-swap">