Improving accessibility with ARIA attributes in templates

debug_toolbar/templates/debug_toolbar/base.html

@@ -1,38 +1,51 @@
 {% load i18n static %}
+
 {% block css %}
-<link rel="stylesheet" href="{% static 'debug_toolbar/css/print.css' %}" media="print">
-<link rel="stylesheet" href="{% static 'debug_toolbar/css/toolbar.css' %}">
+    <link rel="stylesheet" href="{% static 'debug_toolbar/css/print.css' %}" media="print">
+    <link rel="stylesheet" href="{% static 'debug_toolbar/css/toolbar.css' %}">
 {% endblock %}
+
 {% block js %}
-<script type="module" src="{% static 'debug_toolbar/js/toolbar.js' %}" async></script>
+    <script type="module" src="{% static 'debug_toolbar/js/toolbar.js' %}" async></script>
 {% endblock %}
+
 <div id="djDebug" class="djdt-hidden" dir="ltr"
      {% if not toolbar.should_render_panels %}
-     data-store-id="{{ toolbar.store_id }}"
-     data-render-panel-url="{% url 'djdt:render_panel' %}"
+         data-store-id="{{ toolbar.store_id }}"
+         data-render-panel-url="{% url 'djdt:render_panel' %}"
      {% endif %}
      {% url 'djdt:history_sidebar' as history_url %}
      {% if history_url %}
-     data-sidebar-url="{{ history_url }}"
+         data-sidebar-url="{{ history_url }}"
      {% endif %}
      data-default-show="{% if toolbar.config.SHOW_COLLAPSED %}false{% else %}true{% endif %}"
-     {{ toolbar.config.ROOT_TAG_EXTRA_ATTRS|safe }}>
-  <div class="djdt-hidden" id="djDebugToolbar">
-    <ul id="djDebugPanelList">
-      <li><a id="djHideToolBarButton" href="#" title="{% trans 'Hide toolbar' %}">{% trans "Hide" %} »</a></li>
-      {% for panel in toolbar.panels %}
-        {% include "debug_toolbar/includes/panel_button.html" %}
-      {% endfor %}
-    </ul>
-  </div>
-  <div class="djdt-hidden" id="djDebugToolbarHandle">
-    <div title="{% trans 'Show toolbar' %}" id="djShowToolBarButton">
-      <span id="djShowToolBarD">D</span><span id="djShowToolBarJ">J</span>DT
+     {{ toolbar.config.ROOT_TAG_EXTRA_ATTRS|safe }}
+     aria-live="polite"
+     role="status"
+     aria-busy="{% if toolbar.config.SHOW_COLLAPSED %}true{% else %}false{% endif %}">
+
+    <div class="djdt-hidden" id="djDebugToolbar" aria-hidden="true">
+        <ul id="djDebugPanelList">
+            <li>
+                <a id="djHideToolBarButton" href="#" title="{% trans 'Hide toolbar' %}">
+                    {% trans "Hide" %} »
+                </a>
+            </li>
+            {% for panel in toolbar.panels %}
+                {% include "debug_toolbar/includes/panel_button.html" %}
+            {% endfor %}
+        </ul>
     </div>
-  </div>
 
-  {% for panel in toolbar.panels %}
-    {% include "debug_toolbar/includes/panel_content.html" %}
-  {% endfor %}
-  <div id="djDebugWindow" class="djdt-panelContent djdt-hidden"></div>
+    <div class="djdt-hidden" id="djDebugToolbarHandle">
+        <div title="{% trans 'Show toolbar' %}" id="djShowToolBarButton" role="button" tabindex="0">
+            <span id="djShowToolBarD">D</span><span id="djShowToolBarJ">J</span>DT
+        </div>
+    </div>
+
+    {% for panel in toolbar.panels %}
+        {% include "debug_toolbar/includes/panel_content.html" %}
+    {% endfor %}
+
+    <div id="djDebugWindow" class="djdt-panelContent djdt-hidden" aria-hidden="true"></div>
 </div>

debug_toolbar/templates/debug_toolbar/includes/panel_button.html

@@ -1,11 +1,11 @@
 {% load i18n %}
 
-<li id="djdt-{{ panel.panel_id }}" class="djDebugPanelButton">
-  <input type="checkbox" data-cookie="djdt{{ panel.panel_id }}" {% if panel.enabled %}checked title="{% trans "Disable for next and successive requests" %}"{% else %}title="{% trans "Enable for next and successive requests" %}"{% endif %}>
+<li id="djdt-{{ panel.panel_id }}" class="djDebugPanelButton" role="checkbox">
+  <input type="checkbox" data-cookie="djdt{{ panel.panel_id }}" {% if panel.enabled %}checked title="{% trans "Disable for next and successive requests" %}"{% else %}title="{% trans "Enable for next and successive requests" %}"{% endif %} aria-label="{% if panel.enabled %}{% trans "Disable for next and successive requests" %}{% else %}{% trans "Enable for next and successive requests" %}{% endif %}">
   {% if panel.has_content and panel.enabled %}
-    <a href="#" title="{{ panel.title }}" class="{{ panel.panel_id }}">
+    <a href="#" title="{{ panel.title }}" class="{{ panel.panel_id }}" role="link">
   {% else %}
-    <div class="djdt-contentless{% if not panel.enabled %} djdt-disabled{% endif %}">
+    <div class="djdt-contentless{% if not panel.enabled %} djdt-disabled{% endif %}" role="presentation">
   {% endif %}
   {{ panel.nav_title }}
   {% if panel.enabled %}

debug_toolbar/templates/debug_toolbar/includes/panel_content.html

@@ -1,18 +1,18 @@
-{% load static %}
+{% load i18n static %}
 
 {% if panel.has_content and panel.enabled %}
-  <div id="{{ panel.panel_id }}" class="djdt-panelContent djdt-hidden">
+  <div id="{{ panel.panel_id }}" class="djdt-panelContent djdt-hidden" role="region" aria-labelledby="djdt-{{ panel.panel_id }}-title">
     <div class="djDebugPanelTitle">
-      <button type="button" class="djDebugClose">×</button>
+      <button type="button" class="djDebugClose" aria-label="{% trans "Close" %}">×</button>
       <h3>{{ panel.title }}</h3>
     </div>
     <div class="djDebugPanelContent">
       {% if toolbar.should_render_panels %}
         {% for script in panel.scripts %}<script type="module" src="{{ script }}" async></script>{% endfor %}
-        <div class="djdt-scroll">{{ panel.content }}</div>
+        <div class="djdt-scroll" aria-live="polite" aria-atomic="true">{{ panel.content }}</div>
       {% else %}
-        <div class="djdt-loader"></div>
-        <div class="djdt-scroll"></div>
+        <div class="djdt-loader" role="alert" aria-busy="true"></div>
+        <div class="djdt-scroll" aria-live="polite" aria-atomic="true"></div>
       {% endif %}
     </div>
   </div>

debug_toolbar/templates/debug_toolbar/panels/cache.html

@@ -1,6 +1,6 @@
 {% load i18n %}
-<h4>{% trans "Summary" %}</h4>
-<table>
+<h4 id="summary-heading">{% trans "Summary" %}</h4>
+<table aria-labelledby="summary-heading">
   <thead>
     <tr>
       <th>{% trans "Total calls" %}</th>
@@ -18,8 +18,8 @@ <h4>{% trans "Summary" %}</h4>
     </tr>
   </tbody>
 </table>
-<h4>{% trans "Commands" %}</h4>
-<table>
+<h4 id="commands-heading">{% trans "Commands" %}</h4>
+<table aria-labelledby="commands-heading">
   <thead>
     <tr>
       {% for name in counts.keys %}
@@ -36,8 +36,8 @@ <h4>{% trans "Commands" %}</h4>
   </tbody>
 </table>
 {% if calls %}
-  <h4>{% trans "Calls" %}</h4>
-  <table>
+  <h4 id="calls-heading">{% trans "Calls" %}</h4>
+  <table aria-labelledby="calls-heading">
     <thead>
       <tr>
         <th colspan="2">{% trans "Time (ms)" %}</th>
@@ -59,7 +59,7 @@ <h4>{% trans "Calls" %}</h4>
           <td>{{ call.kwargs|escape }}</td>
           <td>{{ call.backend }}</td>
         </tr>
-        <tr class="djUnselected djToggleDetails_{{ forloop.counter }}" id="cacheDetails_{{ forloop.counter }}">
+        <tr class="djUnselected djToggleDetails_{{ forloop.counter }}" id="cacheDetails_{{ forloop.counter }}" aria-hidden="true">
           <td colspan="1"></td>
           <td colspan="5"><pre class="djdt-stack">{{ call.trace }}</pre></td>
         </tr>

debug_toolbar/templates/debug_toolbar/panels/headers.html

@@ -1,8 +1,8 @@
 {% load i18n %}
 
-<h4>{% trans "Request headers" %}</h4>
+<h4 id="request-headers">{% trans "Request headers" %}</h4>
 
-<table>
+<table aria-labelledby="request-headers">
   <thead>
     <tr>
       <th>{% trans "Key" %}</th>
@@ -19,9 +19,9 @@ <h4>{% trans "Request headers" %}</h4>
   </tbody>
 </table>
 
-<h4>{% trans "Response headers" %}</h4>
+<h4 id="response-headers">{% trans "Response headers" %}</h4>
 
-<table>
+<table aria-labelledby="response-headers">
   <thead>
     <tr>
       <th>{% trans "Key" %}</th>
@@ -38,11 +38,11 @@ <h4>{% trans "Response headers" %}</h4>
   </tbody>
 </table>
 
-<h4>{% trans "WSGI environ" %}</h4>
+<h4 id="wsgi-environ">{% trans "WSGI environ" %}</h4>
 
 <p>{% trans "Since the WSGI environ inherits the environment of the server, only a significant subset is shown below." %}</p>
 
-<table>
+<table aria-labelledby="wsgi-environ">
   <thead>
     <tr>
       <th>{% trans "Key" %}</th>

debug_toolbar/templates/debug_toolbar/panels/history.html

@@ -1,20 +1,20 @@
-{% load i18n %}{% load static %}
+{% load i18n static %}
 <form method="get" action="{% url 'djdt:history_refresh' %}">
     {{ refresh_form }}
-    <button class="refreshHistory">Refresh</button>
+    <button class="refreshHistory">{% trans "Refresh" %}</button>
 </form>
-<table class="djdt-max-height-100">
+<table class="djdt-max-height-100" role="grid" aria-labelledby="history-table-heading">
     <thead>
-        <tr>
-            <th>{% trans "Time" %}</th>
-            <th>{% trans "Method" %}</th>
-            <th>{% trans "Path" %}</th>
-            <th>{% trans "Request Variables" %}</th>
-            <th>{% trans "Status" %}</th>
-            <th>{% trans "Action" %}</th>
+        <tr role="row">
+            <th role="columnheader">{% trans "Time" %}</th>
+            <th role="columnheader">{% trans "Method" %}</th>
+            <th role="columnheader">{% trans "Path" %}</th>
+            <th role="columnheader">{% trans "Request Variables" %}</th>
+            <th role="columnheader">{% trans "Status" %}</th>
+            <th role="columnheader">{% trans "Action" %}</th>
         </tr>
     </thead>
-    <tbody id="djdtHistoryRequests">
+    <tbody id="djdtHistoryRequests" role="rowgroup">
         {% for id, store_context in stores.items %}
             {% include "debug_toolbar/panels/history_tr.html" %}
         {% endfor %}

debug_toolbar/templates/debug_toolbar/panels/history_tr.html

@@ -1,5 +1,5 @@
 {% load i18n %}
-<tr class="{% if id == current_store_id %}djdt-highlighted{% endif %}" id="historyMain_{{ id }}" data-store-id="{{ id }}">
+<tr class="{% if id == current_store_id %}djdt-highlighted{% endif %}" id="historyMain_{{ id }}" data-store-id="{{ id }}" role="row">
     <td>
         {{ store_context.toolbar.stats.HistoryPanel.time|escape }}
     </td>
@@ -10,9 +10,9 @@
         <p>{{ store_context.toolbar.stats.HistoryPanel.request_url|truncatechars:100|escape }}</p>
     </td>
     <td>
-        <button type="button" class="djToggleSwitch" data-toggle-name="historyMain" data-toggle-id="{{ id }}">+</button>
-        <div class="djUnselected djToggleDetails_{{ id }}">
-          <table>
+        <button type="button" class="djToggleSwitch" data-toggle-name="historyMain" data-toggle-id="{{ id }}" aria-expanded="false" aria-controls="historyDetails_{{ id }}">+</button>
+        <div class="djUnselected djToggleDetails_{{ id }}" id="historyDetails_{{ id }}" aria-hidden="true">
+          <table aria-labelledby="historyMain_{{ id }}">
             <colgroup>
               <col class="djdt-width-20">
               <col>

debug_toolbar/templates/debug_toolbar/panels/profiling.html

@@ -1,22 +1,22 @@
 {% load i18n %}
-<table>
+<table role="grid" aria-labelledby="profiling-table-heading">
   <thead>
-    <tr>
-      <th>{% trans "Call" %}</th>
-      <th>{% trans "CumTime" %}</th>
-      <th>{% trans "Per" %}</th>
-      <th>{% trans "TotTime" %}</th>
-      <th>{% trans "Per" %}</th>
-      <th>{% trans "Count" %}</th>
+    <tr role="row">
+      <th role="columnheader">{% trans "Call" %}</th>
+      <th role="columnheader">{% trans "CumTime" %}</th>
+      <th role="columnheader">{% trans "Per" %}</th>
+      <th role="columnheader">{% trans "TotTime" %}</th>
+      <th role="columnheader">{% trans "Per" %}</th>
+      <th role="columnheader">{% trans "Count" %}</th>
     </tr>
   </thead>
-  <tbody>
+  <tbody role="rowgroup">
     {% for call in func_list %}
-      <tr class="djdt-profile-row {% if call.is_project_func %}djdt-highlighted {% endif %} {% for parent_id in call.parent_ids %} djToggleDetails_{{ parent_id }}{% endfor %}" id="profilingMain_{{ call.id }}">
+      <tr role="row" class="djdt-profile-row {% if call.is_project_func %}djdt-highlighted {% endif %} {% for parent_id in call.parent_ids %} djToggleDetails_{{ parent_id }}{% endfor %}" id="profilingMain_{{ call.id }}">
         <td>
           <div data-djdt-styles="paddingLeft:{{ call.indent }}px">
             {% if call.has_subfuncs %}
-              <button type="button" class="djProfileToggleDetails djToggleSwitch" data-toggle-name="profilingMain" data-toggle-id="{{ call.id }}">-</button>
+              <button type="button" class="djProfileToggleDetails djToggleSwitch" data-toggle-name="profilingMain" data-toggle-id="{{ call.id }}" aria-expanded="false" aria-controls="profilingDetails_{{ call.id }}">-</button>
             {% else %}
               <span class="djNoToggleSwitch"></span>
             {% endif %}

debug_toolbar/templates/debug_toolbar/panels/request.html

@@ -1,17 +1,17 @@
 {% load i18n %}
 
-<h4>{% trans "View information" %}</h4>
-<table>
+<h4 id="view-info-heading">{% trans "View information" %}</h4>
+<table role="table" aria-labelledby="view-info-heading">
   <thead>
-    <tr>
-      <th>{% trans "View function" %}</th>
-      <th>{% trans "Arguments" %}</th>
-      <th>{% trans "Keyword arguments" %}</th>
-      <th>{% trans "URL name" %}</th>
+    <tr role="row">
+      <th role="columnheader">{% trans "View function" %}</th>
+      <th role="columnheader">{% trans "Arguments" %}</th>
+      <th role="columnheader">{% trans "Keyword arguments" %}</th>
+      <th role="columnheader">{% trans "URL name" %}</th>
     </tr>
   </thead>
-  <tbody>
-    <tr>
+  <tbody role="rowgroup">
+    <tr role="row">
       <td><code>{{ view_func }}</code></td>
       <td><code>{{ view_args|pprint }}</code></td>
       <td><code>{{ view_kwargs|pprint }}</code></td>
@@ -21,28 +21,28 @@ <h4>{% trans "View information" %}</h4>
 </table>
 
 {% if cookies.list or cookies.raw %}
-  <h4>{% trans "Cookies" %}</h4>
+  <h4 id="cookies-heading">{% trans "Cookies" %}</h4>
   {% include 'debug_toolbar/panels/request_variables.html' with variables=cookies %}
 {% else %}
   <h4>{% trans "No cookies" %}</h4>
 {% endif %}
 
 {% if session.list or session.raw %}
-  <h4>{% trans "Session data" %}</h4>
+  <h4 id="session-heading">{% trans "Session data" %}</h4>
   {% include 'debug_toolbar/panels/request_variables.html' with variables=session %}
 {% else %}
   <h4>{% trans "No session data" %}</h4>
 {% endif %}
 
 {% if get.list or get.raw %}
-  <h4>{% trans "GET data" %}</h4>
+  <h4 id="get-heading">{% trans "GET data" %}</h4>
   {% include 'debug_toolbar/panels/request_variables.html' with variables=get %}
 {% else %}
   <h4>{% trans "No GET data" %}</h4>
 {% endif %}
 
 {% if post.list or post.raw %}
-  <h4>{% trans "POST data" %}</h4>
+  <h4 id="post-heading">{% trans "POST data" %}</h4>
   {% include 'debug_toolbar/panels/request_variables.html' with variables=post %}
 {% else %}
   <h4>{% trans "No POST data" %}</h4>

debug_toolbar/templates/debug_toolbar/panels/request_variables.html

@@ -1,20 +1,20 @@
 {% load i18n %}
 
 {% if variables.list %}
-<table>
+<table role="table" aria-labelledby="request-variables-table-heading">
   <colgroup>
     <col class="djdt-width-20">
     <col>
   </colgroup>
   <thead>
-    <tr>
-      <th>{% trans "Variable" %}</th>
-      <th>{% trans "Value" %}</th>
+    <tr role="row">
+      <th role="columnheader">{% trans "Variable" %}</th>
+      <th role="columnheader">{% trans "Value" %}</th>
     </tr>
   </thead>
-  <tbody>
+  <tbody role="rowgroup">
     {% for key, value in variables.list %}
-      <tr>
+      <tr role="row">
         <td><code>{{ key|pprint }}</code></td>
         <td><code>{{ value|pprint }}</code></td>
       </tr>

debug_toolbar/templates/debug_toolbar/panels/settings.html

@@ -1,14 +1,15 @@
 {% load i18n %}
-<table>
-  <thead>
-    <tr>
-      <th>{% trans "Setting" %}</th>
-      <th>{% trans "Value" %}</th>
+
+<table role="table" aria-labelledby="settings-heading">
+  <thead role="rowgroup">
+    <tr role="row">
+      <th role="columnheader">{% trans "Setting" %}</th>
+      <th role="columnheader">{% trans "Value" %}</th>
     </tr>
   </thead>
-  <tbody>
+  <tbody role="rowgroup">
     {% for name, value in settings.items %}
-      <tr>
+      <tr role="row">
         <td>{{ name }}</td>
         <td><code>{{ value|pprint }}</code></td>
       </tr>