Merge branch 'ko/3392-fix-domain-deletion' of https://github.com/cisagov/manage.get.gov into ko/3392-fix-domain-deletion

src/registrar/assets/js/uswds-edited.js

@@ -5695,19 +5695,35 @@ const createHeaderButton = (header, headerName) => {
   buttonEl.setAttribute("tabindex", "0");
   buttonEl.classList.add(SORT_BUTTON_CLASS);
   // ICON_SOURCE
+  // ---- END DOTGOV EDIT
+  // Change icons on sort, use source from arro_upward and arrow_downward
+  // buttonEl.innerHTML = Sanitizer.escapeHTML`
+  // <svg class="${PREFIX}-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  //   <g class="descending" fill="transparent">
+  //     <path d="M17 17L15.59 15.59L12.9999 18.17V2H10.9999V18.17L8.41 15.58L7 17L11.9999 22L17 17Z" />
+  //   </g>
+  //   <g class="ascending" fill="transparent">
+  //     <path transform="rotate(180, 12, 12)" d="M17 17L15.59 15.59L12.9999 18.17V2H10.9999V18.17L8.41 15.58L7 17L11.9999 22L17 17Z" />
+  //   </g>
+  //   <g class="unsorted" fill="transparent">
+  //     <polygon points="15.17 15 13 17.17 13 6.83 15.17 9 16.58 7.59 12 3 7.41 7.59 8.83 9 11 6.83 11 17.17 8.83 15 7.42 16.41 12 21 16.59 16.41 15.17 15"/>
+  //   </g>
+  // </svg>
+  // `;
   buttonEl.innerHTML = Sanitizer.escapeHTML`
   <svg class="${PREFIX}-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
     <g class="descending" fill="transparent">
-      <path d="M17 17L15.59 15.59L12.9999 18.17V2H10.9999V18.17L8.41 15.58L7 17L11.9999 22L17 17Z" />
+      <path d="m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"/>
     </g>
     <g class="ascending" fill="transparent">
-      <path transform="rotate(180, 12, 12)" d="M17 17L15.59 15.59L12.9999 18.17V2H10.9999V18.17L8.41 15.58L7 17L11.9999 22L17 17Z" />
+      <path d="m4 12 1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/>
     </g>
     <g class="unsorted" fill="transparent">
       <polygon points="15.17 15 13 17.17 13 6.83 15.17 9 16.58 7.59 12 3 7.41 7.59 8.83 9 11 6.83 11 17.17 8.83 15 7.42 16.41 12 21 16.59 16.41 15.17 15"/>
     </g>
   </svg>
   `;
+  // ---- END DOTGOV EDIT
   header.appendChild(buttonEl);
   updateSortLabel(header, headerName);
 };

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/_tables.scss

@@ -41,13 +41,8 @@ th {
   }
 }
 
-// The member table has an extra "expand" row, which looks like a single row.
+// .dotgov-table allows us to customize .usa-table on the user-facing pages,
-// But the DOM disagrees - so we basically need to hide the border on both rows.
+// while leaving the default styles for use on the admin pages
-#members__table-wrapper .dotgov-table tr:nth-last-child(2) td,
-#members__table-wrapper .dotgov-table tr:nth-last-child(2) th {
-  border-bottom: none;
-}
-
 .dotgov-table {
   width: 100%;
 
@@ -68,7 +63,8 @@ th {
       border-bottom: 1px solid color('base-lighter');
     }
 
-    thead th {
+    thead th,
+    thead th[aria-sort] {
       color: color('primary-darker');
       border-bottom: 2px solid color('base-light');
     }
@@ -93,17 +89,46 @@ th {
     }
   }
 
-  @include at-media(tablet-lg) {
+  // Sortable headers
-    th[data-sortable] .usa-table__header__button {
+  th[data-sortable][aria-sort=ascending],
-      right: auto;
+  th[data-sortable][aria-sort=descending] {
-  
+    background-color: transparent;
-      &[aria-sort=ascending],
+    .usa-table__header__button {
-      &[aria-sort=descending],
+      background-color: color('accent-cool-lightest');
-      &:not([aria-sort]) {
+      border-radius: units(.5);
-        right: auto;
+      color: color('primary-darker');
+      &:hover {
+        background-color: color('accent-cool-lightest');
       }
     }
   }
+  @include at-media(tablet-lg) {
+    th[data-sortable]:not(.left-align-sort-button) .usa-table__header__button {
+      // position next to the copy
+      right: auto;
+      // slide left to mock a margin between the copy and the icon
+      transform: translateX(units(1));
+      // fix vertical alignment
+      top: units(1.5);
+    }
+    th[data-sortable].left-align-sort-button .usa-table__header__button {
+      left: 0;
+    }
+  }
+
+  // Currently the 'flash' when sort is clicked,
+  // this will become persistent if the double-sort bug is fixed
+  td[data-sort-active],
+  th[data-sort-active] {
+    background-color: color('primary-lightest');
+  }
+}
+
+// The member table has an extra "expand" row, which looks like a single row.
+// But the DOM disagrees - so we basically need to hide the border on both rows.
+#members__table-wrapper .dotgov-table tr:nth-last-child(2) td,
+#members__table-wrapper .dotgov-table tr:nth-last-child(2) th {
+  border-bottom: none;
 }
 
 .dotgov-table--cell-padding-2 {

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: display the app name as a caption rather than a table header #}
-        {# .gov override: add headers #}
+        <caption class="text-bold">{{ app.name }}</caption>
-        {% if show_changelinks %}
-          <colgroup span="3"></colgroup>
-        {% else %}
-          <colgroup span="2"></colgroup>
-        {% endif %}
         <thead>
           <tr>
-            {% if show_changelinks %}
+            {# .gov override: hide headers #}
-              <th colspan="3" class="primary-th" scope="colgroup">
+              {% comment %} 
-                {{ app.name }}
+              {% if show_changelinks %}
-              </th>
+                <th colspan="3" class="primary-th" scope="colgroup">
-            {% else %}
+                  {{ app.name }}
-              <th colspan="2" class="primary-th" scope="colgroup">
+                </th>
-                {{ app.name }}
+              {% else %}
-              </th>
+                <th colspan="2" class="primary-th" scope="colgroup">
-            {% endif %}
+                  {{ 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">
+  <div class="module">
-    <h2>Analytics</h2>
+    <table class="width-full">
-    <a class="display-block padding-y-1 padding-x-1" href="{% url 'analytics' %}">Dashboard</a>
+      <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/templates/includes/member_domains_edit_table.html

@@ -45,7 +45,7 @@
       <caption class="sr-only">member domains</caption>
       <thead>
         <tr>
-          <th data-sortable="checked" scope="col" role="columnheader" class="padding-right-105 width-6"><span class="sr-only">Assigned domains</span></th>
+          <th data-sortable="checked" scope="col" role="columnheader" class="padding-right-105 width-6 left-align-sort-button"><span class="sr-only">Assigned domains</span></th>
           <!-- We override default sort to be name/ascending in the JSON endpoint. We add the correct aria-sort attribute here to reflect that in the UI -->
           <th data-sortable="name" scope="col" role="columnheader" aria-sort="descending">Domains</th>
         </tr>

src/registrar/tests/test_admin_domain.py

@@ -882,7 +882,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