Merge pull request #3539 from cisagov/za/3180-add-unique-accessible-names

#3180 / #3179: Aria-labels for "View", "Change", and "Add" buttons + correct semantic markup for section headings - [ZA]

src/registrar/assets/src/sass/_theme/_admin.scss

@@ -520,15 +520,6 @@ input[type=submit].button--dja-toolbar:focus, input[type=submit].button--dja-too
     }
 }
 
-.module--custom {
-    a {
-        font-size: 13px;
-        font-weight: 600;
-        border: solid 1px var(--darkened-bg);
-        background: var(--darkened-bg);
-    }
-}
-
 .usa-modal--django-admin .usa-prose ul > li {
     list-style-type: inherit;
     // Styling based off of the <p> styling in django admin
@@ -839,6 +830,17 @@ div.dja__model-description{
     text-transform: capitalize;
 }
 
+.module caption {
+    // Match the old <h2> size for django admin
+    font-size: 0.8125rem;
+}
+
+// text-bold doesn't work here due to style overrides, unfortunately.
+// This is a workaround.
+caption.text-bold {
+    font-weight: font-weight('bold');
+}
+
 .wrapped-button-group {
     // This button group has too many items
     flex-wrap: wrap;

src/registrar/assets/src/sass/_theme/_uswds-theme.scss

@@ -70,6 +70,7 @@ in the form $setting: value,
   ----------------------------*/ 
   $theme-font-weight-medium: 400,
   $theme-font-weight-semibold: 600,
+  $theme-font-weight-bold: 700,
 
   /*---------------------------
   ## Font roles

src/registrar/templates/admin/app_list.html

@@ -4,24 +4,22 @@
   {% for app in app_list %}
     <div class="app-{{ app.app_label }} module{% if app.app_url in request.path|urlencode %} current-app{% endif %}">
       <table>
-
-        {# .gov override: add headers #}
-        {% if show_changelinks %}
-          <colgroup span="3"></colgroup>
-        {% else %}
-          <colgroup span="2"></colgroup>
-        {% endif %}
+        {# .gov override: display the app name as a caption rather than a table header #}
+        <caption class="text-bold">{{ app.name }}</caption>
         <thead>
           <tr>
-            {% if show_changelinks %}
-              <th colspan="3" class="primary-th" scope="colgroup">
-                {{ app.name }}
-              </th>
-            {% else %}
-              <th colspan="2" class="primary-th" scope="colgroup">
-                {{ app.name }}
-              </th>
-            {% endif %}
+            {# .gov override: hide headers #}
+              {% comment %} 
+              {% if show_changelinks %}
+                <th colspan="3" class="primary-th" scope="colgroup">
+                  {{ app.name }}
+                </th>
+              {% else %}
+                <th colspan="2" class="primary-th" scope="colgroup">
+                  {{ app.name }}
+                </th>
+              {% endif %} 
+            {% endcomment %}
           </tr>
           <tr>
             <th scope="col">Model</th>
@@ -45,16 +43,17 @@
             {% endif %}
 
             {% if model.add_url %}
-              <td><a href="{{ model.add_url }}" class="addlink">{% translate 'Add' %}</a></td>
+              {% comment %} Remove the 's' from the end of the string to avoid text like "Add domain requests" {% endcomment %}
+              <td><a href="{{ model.add_url }}" class="addlink" aria-label="Add {{ model.name|slice:":-1" }}">{% translate 'Add' %}</a></td>
             {% else %}
               <td></td>
             {% endif %}
 
             {% if model.admin_url and show_changelinks %}
               {% if model.view_only %}
-                <td><a href="{{ model.admin_url }}" class="viewlink">{% translate 'View' %}</a></td>
+                <td><a href="{{ model.admin_url }}" class="viewlink" aria-label="View {{ model.name }}">{% translate 'View' %}</a></td>
               {% else %}
-                <td><a href="{{ model.admin_url }}" class="changelink">{% translate 'Change' %}</a></td>
+                <td><a href="{{ model.admin_url }}" class="changelink" aria-label="Change {{ model.name }}">{% translate 'Change' %}</a></td>
               {% endif %}
             {% elif show_changelinks %}
               <td></td>
@@ -64,9 +63,20 @@
       </table>
     </div>
   {% endfor %}
-  <div class="module module--custom">
-    <h2>Analytics</h2>
-    <a class="display-block padding-y-1 padding-x-1" href="{% url 'analytics' %}">Dashboard</a>
+  <div class="module">
+    <table class="width-full">
+      <caption class="text-bold">Analytics</caption>
+      <thead>
+        <tr>
+          <th scope="col">Reports</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th scope="row"><a href="{% url 'analytics' %}">Dashboard</a></th>
+        </tr>
+      </tbody>
+    </table>
   </div>
 {% else %}
   <p>{% translate 'You don’t have permission to view or edit anything.' %}</p>

src/registrar/tests/test_admin_domain.py

@@ -881,7 +881,7 @@ class TestDomainAdminWithClient(TestCase):
         response = self.client.get("/admin/registrar/domain/")
         # There are 4 template references to Federal (4) plus four references in the table
         # for our actual domain_request
-        self.assertContains(response, "Federal", count=56)
+        self.assertContains(response, "Federal", count=57)
         # This may be a bit more robust
         self.assertContains(response, '<td class="field-converted_generic_org_type">Federal</td>', count=1)
         # Now let's make sure the long description does not exist

src/registrar/tests/test_admin_request.py

@@ -662,7 +662,7 @@ class TestDomainRequestAdmin(MockEppLib):
         response = self.client.get("/admin/registrar/domainrequest/?generic_org_type__exact=federal")
         # There are 2 template references to Federal (4) and two in the results data
         # of the request
-        self.assertContains(response, "Federal", count=54)
+        self.assertContains(response, "Federal", count=55)
         # This may be a bit more robust
         self.assertContains(response, '<td class="field-converted_generic_org_type">Federal</td>', count=1)
         # Now let's make sure the long description does not exist