Miles and mike pair programming changes

Author: Miles Hinchliffe

src/lib/components/data-vis/table/Table.svelte

@@ -143,6 +143,12 @@
               scope="col"
               class={`govuk-table__header ${column.dataType === "number" ? "govuk-table__header--numeric" : ""}`}
               title={metaData[column.key].explainer}
+              aria-sort={sortState.column !== column.key
+                ? "not-sorted"
+                : sortState.column === column.key &&
+                    sortState.order === "descending"
+                  ? "descending"
+                  : "ascending"}
             >
               <div class="header">
                 <Button
@@ -226,4 +232,17 @@
     border-radius: 10%;
     padding: 6px;
   }
+
+  :global([aria-sort="ascending"].govuk-table__header .top-triangle) {
+    fill: #222;
+  }
+  :global([aria-sort="ascending"].govuk-table__header .bottom-triangle) {
+    fill: #bcbcbd;
+  }
+  :global([aria-sort="descending"].govuk-table__header .top-triangle) {
+    fill: #bcbcbd;
+  }
+  :global([aria-sort="descending"].govuk-table__header .bottom-triangle) {
+    fill: #222;
+  }
 </style>

src/lib/components/ui/Button.svelte

@@ -64,14 +64,16 @@
         aria-hidden="true"
         role="img"
         viewBox="0 0 22 22"
-        fill="none"
+        fill="currentColor"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
+          class="top-triangle"
           d="M8.1875 9.5L10.9609 3.95703L13.7344 9.5H8.1875Z"
           fill="currentColor"
         ></path>
         <path
+          class="bottom-triangle"
           d="M13.7344 12.0781L10.9609 17.6211L8.1875 12.0781H13.7344Z"
           fill="currentColor"
         ></path>