10409: fix accessiblity tests;

ustaxcourt · Sep 24, 2024 · afa89cc · afa89cc
1 parent 660e804
commit afa89cc
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 17 deletions.
diff --git a/cypress/local-only/tests/accessibility/fileDocument/petitioner.cy.ts b/cypress/local-only/tests/accessibility/fileDocument/petitioner.cy.ts
@@ -17,18 +17,16 @@ describe('File Document Page - Petitioner Accessibility', () => {
   it('should be free of a11y issues on step 2', () => {
     loginAsPetitioner();
     cy.visit('/case-detail/101-19/file-a-document');
-    cy.get('#document-type').click({ force: true });
-    cy.get('#document-type input')
-      .first()
-      .type('Motion for Leave to File Out of Time');
-    cy.get('#document-type #react-select-2-option-0').click({ force: true });
-    cy.get('#secondary-doc-secondary-document-type').click({ force: true });
-    cy.get('#secondary-doc-secondary-document-type input')
-      .first()
-      .type('Motion for Continuance');
-    cy.get(
-      '#secondary-doc-secondary-document-type #react-select-3-option-0',
-    ).click({ force: true });
+    cy.get('[data-testid="document-type"]').click();
+    cy.get('[data-testid="document-type"]')
+      .contains('Motion for Leave to File Out of Time')
+      .click();
+
+    cy.get('[data-testid="secondary-doc-secondary-document-type"]').click();
+    cy.get('[data-testid="secondary-doc-secondary-document-type"]')
+      .contains('Motion for Continuance')
+      .click();
+
     cy.get('#submit-document').click();
     cy.get('#primaryDocument-certificateOfService-label').click();
     cy.get('#primaryDocument-service-date-picker').should('exist');

diff --git a/web-client/src/ustc-ui/DateInput/DateRangePickerComponent.tsx b/web-client/src/ustc-ui/DateInput/DateRangePickerComponent.tsx
@@ -6,7 +6,7 @@ import dateRangePicker from '../../../../node_modules/@uswds/uswds/packages/usa-
 
 export const DateRangePickerComponent = ({
   endDateErrorText,
-  endLabel,
+  endLabel = 'End date',
   endName,
   endPickerCls,
   endValue,
@@ -20,7 +20,7 @@ export const DateRangePickerComponent = ({
   rangePickerCls,
   showDateHint = false,
   startDateErrorText,
-  startLabel,
+  startLabel = 'Start date',
   startName,
   startPickerCls,
   startValue,

diff --git a/web-client/src/views/TrialSessions/TrialSessions.tsx b/web-client/src/views/TrialSessions/TrialSessions.tsx
@@ -281,11 +281,16 @@ const TrialSessionFilters = connect(
         <div className="margin-bottom-2 grid-row flex-row gap-2">
           <div className="grid-col">
             <div className="margin-bottom-1">
-              <label className="usa-label" htmlFor="session-type-filter">
+              <label
+                className="usa-label"
+                htmlFor="session-type-filter"
+                id="session-type-filter-label"
+              >
                 Session type{' '}
                 <span className="optional-light-text">(optional)</span>
               </label>
               <SelectSearch
+                aria-labelledby="session-type-filter-label"
                 id="session-type-filter"
                 name="sessionType"
                 options={trialSessionsHelper.sessionTypeOptions}
@@ -327,10 +332,15 @@ const TrialSessionFilters = connect(
           </div>
           <div className="grid-col">
             <div className="margin-bottom-1">
-              <label className="usa-label" htmlFor="location-filter">
+              <label
+                className="usa-label"
+                htmlFor="location-filter"
+                id="location-filter-label"
+              >
                 Location <span className="optional-light-text">(optional)</span>
               </label>
               <SelectSearch
+                aria-labelledby="location-filter-label"
                 id="location-filter"
                 name="location"
                 options={trialSessionsHelper.trialCitiesByState}
@@ -372,10 +382,15 @@ const TrialSessionFilters = connect(
           </div>
           <div className="grid-col">
             <div className="margin-bottom-1">
-              <label className="usa-label" htmlFor="judge-filter">
+              <label
+                className="usa-label"
+                htmlFor="judge-filter"
+                id="judges-filter-label"
+              >
                 Judge <span className="optional-light-text">(optional)</span>
               </label>
               <SelectSearch
+                aria-labelledby="judges-filter-label"
                 id="judges"
                 name="judges"
                 options={trialSessionsHelper.trialSessionJudgeOptions}