Merge pull request #894 from US-Trustee-Program/CAMS-282-data-verific…

…ation-filter-tabstops CAMS-282: Data Verification Filter Tabstops
US-Trustee-Program · Sep 12, 2024 · bea1528 · bea1528
2 parents daebc2d + 26e3dc7
commit bea1528
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 10 deletions.
diff --git a/user-interface/.pa11yci b/user-interface/.pa11yci
@@ -67,9 +67,9 @@
       "url": "http://localhost:3000/data-verification/",
       "actions": [
         "wait for element [data-testid='data-verification-screen'] to be visible",
-        "click element div.filter.approved",
-        "click element div.filter.rejected",
-        "click element div.filter.consolidation",
+        "click element button.filter.approved",
+        "click element button.filter.rejected",
+        "click element button.filter.consolidation",
         "click element [data-testid='accordion-button-order-list-guid-0']",
         "wait for element [data-testid='suggested-cases-radio-0'] to be visible",
         "click element [data-testid='suggested-cases-radio-0']",
@@ -88,8 +88,8 @@
         "click element [data-testid='accordion-button-order-list-guid-2']",
         "wait for element [data-testid='accordion-content-guid-1'] to be hidden",
         "wait for element [data-testid='accordion-content-guid-2'] to be visible",
-        "click element div.filter.consolidation",
-        "click element div.filter.transfer",
+        "click element button.filter.consolidation",
+        "click element button.filter.transfer",
         "click element [data-testid='accordion-button-order-list-guid-3']",
         "wait for element [data-testid='accordion-content-guid-2'] to be hidden",
         "wait for element [data-testid='accordion-content-guid-3'] to be visible",

diff --git a/user-interface/src/data-verification/DataVerificationScreen.scss b/user-interface/src/data-verification/DataVerificationScreen.scss
@@ -43,13 +43,14 @@
 
   .order-status {
     span,
-    div.filter {
+    .filter {
       display: inline-block;
       color: white;
       padding: 0rem 0.5rem 0.125rem 0.5rem;
       border-radius: 0.125rem;
+      text-decoration: none;
     }
-    div.filter {
+    .filter {
       display: inline-flex;
       align-items: center;
       flex-flow: row;

diff --git a/user-interface/src/data-verification/DataVerificationScreen.tsx b/user-interface/src/data-verification/DataVerificationScreen.tsx
@@ -316,14 +316,14 @@ interface FilterProps<T extends string> {
 function Filter<T extends string>(props: FilterProps<T>) {
   const { label, filterType, filters, callback } = props;
   return (
-    <div
-      className={`filter ${filterType}${filters.includes(filterType) ? ' active' : ' inactive'} usa-tag--big`}
+    <button
+      className={`filter ${filterType}${filters.includes(filterType) ? ' active' : ' inactive'} usa-tag--big usa-button--unstyled`}
       aria-label={`Filter on ${filterType.charAt(0).toUpperCase() + filterType.slice(1)} status`}
       onClick={() => callback(filterType)}
       data-testid={`order-status-filter-${filterType}`}
     >
       {label}
       <Icon name="check" className={filters.includes(filterType) ? 'active' : ''}></Icon>
-    </div>
+    </button>
   );
 }