Use stricter accessibility checks

Gemfile.lock

@@ -172,10 +172,10 @@ GEM
       aws-sigv4 (~> 1.1)
     aws-sigv4 (1.6.0)
       aws-eventstream (~> 1, >= 1.0.2)
-    axe-core-api (4.3.2)
+    axe-core-api (4.7.0)
       dumb_delegator
       virtus
-    axe-core-rspec (4.3.2)
+    axe-core-rspec (4.7.0)
       axe-core-api
       dumb_delegator
       virtus
@@ -408,8 +408,8 @@ GEM
     method_source (1.0.0)
     mini_histogram (0.3.1)
     mini_mime (1.1.2)
-    mini_portile2 (2.8.2)
-    minitest (5.18.1)
+    mini_portile2 (2.8.4)
+    minitest (5.19.0)
     msgpack (1.6.0)
     multiset (0.5.3)
     nenv (0.3.0)
@@ -480,7 +480,7 @@ GEM
       nio4r (~> 2.0)
     raabro (1.4.0)
     racc (1.7.1)
-    rack (2.2.7)
+    rack (2.2.8)
     rack-attack (6.5.0)
       rack (>= 1.0, < 3)
     rack-cors (1.1.1)
@@ -514,8 +514,9 @@ GEM
       actionpack (>= 5.0.1.rc1)
       actionview (>= 5.0.1.rc1)
       activesupport (>= 5.0.1.rc1)
-    rails-dom-testing (2.0.3)
-      activesupport (>= 4.2.0)
+    rails-dom-testing (2.2.0)
+      activesupport (>= 5.0.0)
+      minitest
       nokogiri (>= 1.6)
     rails-erd (1.6.1)
       activerecord (>= 4.2)
@@ -575,20 +576,20 @@ GEM
     rspec-expectations (3.12.3)
       diff-lcs (>= 1.2.0, < 2.0)
       rspec-support (~> 3.12.0)
-    rspec-mocks (3.12.5)
+    rspec-mocks (3.12.6)
       diff-lcs (>= 1.2.0, < 2.0)
       rspec-support (~> 3.12.0)
-    rspec-rails (6.0.1)
+    rspec-rails (6.0.3)
       actionpack (>= 6.1)
       activesupport (>= 6.1)
       railties (>= 6.1)
-      rspec-core (~> 3.11)
-      rspec-expectations (~> 3.11)
-      rspec-mocks (~> 3.11)
-      rspec-support (~> 3.11)
+      rspec-core (~> 3.12)
+      rspec-expectations (~> 3.12)
+      rspec-mocks (~> 3.12)
+      rspec-support (~> 3.12)
     rspec-retry (0.6.2)
       rspec-core (> 3.3)
-    rspec-support (3.12.0)
+    rspec-support (3.12.1)
     rspec_junit_formatter (0.6.0)
       rspec-core (>= 2, < 4, != 2.12.0)
     rubocop (1.55.1)
@@ -725,7 +726,7 @@ GEM
       nokogiri (~> 1.8)
     yard (0.9.28)
       webrick (~> 1.7.0)
-    zeitwerk (2.6.8)
+    zeitwerk (2.6.11)
     zonebie (0.6.1)
     zxcvbn (0.1.9)
 

app/javascript/packages/document-capture/components/file-input.tsx

@@ -34,9 +34,9 @@ interface FileInputProps {
   hint?: string;
 
   /**
-   * Optional banner overlay text
+   * Banner overlay text
    */
-  bannerText?: string;
+  bannerText: string;
 
   /**
    * Error message text to show on invalid file type selection
@@ -216,6 +216,7 @@ function FileInput(props: FileInputProps, ref: ForwardedRef<any>) {
   const hintId = `${inputId}-hint`;
   const innerHintId = `${hintId}-inner`;
   const labelId = `${inputId}-label`;
+  const showInnerHint: boolean = !value && !isValuePending && !isMobile;
 
   /**
    * In response to a file input change event, confirms that the file is valid before calling
@@ -264,8 +265,13 @@ function FileInput(props: FileInputProps, ref: ForwardedRef<any>) {
     // When no file is selected, provide a slightly more verbose label
     // including the actual <label> contents and the prompt to drag a file or
     // choose from a folder.
+    if (showInnerHint) {
+      return {
+        'aria-labelledby': `${labelId} ${innerHintId}`,
+      };
+    }
     return {
-      'aria-labelledby': `${labelId} ${innerHintId}`,
+      'aria-labelledby': `${labelId}`,
     };
   }
 
@@ -362,8 +368,8 @@ function FileInput(props: FileInputProps, ref: ForwardedRef<any>) {
           )}
           {!value && !isValuePending && (
             <div className="usa-file-input__instructions" aria-hidden="true">
-              {bannerText && <strong className="usa-file-input__banner-text">{bannerText}</strong>}
-              {isMobile && bannerText ? null : (
+              <strong className="usa-file-input__banner-text">{bannerText}</strong>
+              {showInnerHint && (
                 <span className="usa-file-input__drag-text" id={innerHintId}>
                   {formatHTML(t('doc_auth.forms.choose_file_html'), {
                     'lg-underline': ({ children }) => (

app/views/idv/shared/_document_capture.html.erb

@@ -47,6 +47,5 @@
           input_html: { value: document_capture_session_uuid },
         ) %>
   <% end %>
-</div>
 
 <%= javascript_packs_tag_once 'document-capture' %>

spec/features/idv/in_person_spec.rb

@@ -92,7 +92,7 @@
       expect_in_person_step_indicator_current_step(
         t('step_indicator.flows.idv.go_to_the_post_office'),
       )
-      expect(page).to be_axe_clean.according_to :section508, :"best-practice", :wcag21aa
+      expect_page_to_have_no_accessibility_violations(page)
       enrollment_code = JSON.parse(
         UspsInPersonProofing::Mock::Fixtures.request_enroll_response,
       )['enrollmentCode']
@@ -224,7 +224,7 @@
     expect_in_person_step_indicator_current_step(
       t('step_indicator.flows.idv.go_to_the_post_office'),
     )
-    expect(page).to be_axe_clean.according_to :section508, :"best-practice", :wcag21aa
+    expect_page_to_have_no_accessibility_violations(page)
     enrollment_code = JSON.parse(
       UspsInPersonProofing::Mock::Fixtures.request_enroll_response,
     )['enrollmentCode']
@@ -1009,7 +1009,7 @@
       expect_in_person_step_indicator_current_step(
         t('step_indicator.flows.idv.go_to_the_post_office'),
       )
-      expect(page).to be_axe_clean.according_to :section508, :"best-practice", :wcag21aa
+      expect_page_to_have_no_accessibility_violations(page)
       enrollment_code = JSON.parse(
         UspsInPersonProofing::Mock::Fixtures.request_enroll_response,
       )['enrollmentCode']

spec/javascript/packages/document-capture/components/file-input-spec.jsx

@@ -233,8 +233,12 @@ describe('document-capture/components/file-input', () => {
     expect(onChange.getCall(0).args[0]).to.equal(file);
   });
 
-  it('has an appropriate 2-part aria-label with no input added', () => {
-    const { getByLabelText } = render(<FileInput label="File" />);
+  it('has an appropriate 2-part aria-label with no input added when on desktop', () => {
+    const { getByLabelText } = render(
+      <DeviceContext.Provider value={{ isMobile: false }}>
+        <FileInput label="File" bannerText="File" />
+      </DeviceContext.Provider>,
+    );
 
     const queryByAriaLabel = getByLabelText('File doc_auth.forms.choose_file_html');
 
@@ -315,7 +319,7 @@ describe('document-capture/components/file-input', () => {
       </DeviceContext.Provider>,
     );
 
-    expect(getByText('doc_auth.forms.choose_file_html', { hidden: true })).to.be.ok();
+    expect(() => getByText('doc_auth.forms.choose_file_html', { hidden: true })).to.throw();
 
     rerender(
       <DeviceContext.Provider value={{ isMobile: true }}>

spec/support/features/doc_auth_helper.rb

@@ -48,7 +48,7 @@ def complete_doc_auth_steps_before_welcome_step(expect_accessible: false)
     visit idv_welcome_url unless current_path == idv_welcome_url
     click_idv_continue if current_path == idv_mail_only_warning_path
 
-    expect(page).to be_axe_clean.according_to :section508, :"best-practice" if expect_accessible
+    expect_page_to_have_no_accessibility_violations(page) if expect_accessible
   end
 
   def complete_welcome_step
@@ -58,7 +58,7 @@ def complete_welcome_step
   def complete_doc_auth_steps_before_agreement_step(expect_accessible: false)
     complete_doc_auth_steps_before_welcome_step(expect_accessible: expect_accessible)
     complete_welcome_step
-    expect(page).to be_axe_clean.according_to :section508, :"best-practice" if expect_accessible
+    expect_page_to_have_no_accessibility_violations(page) if expect_accessible
   end
 
   def complete_agreement_step
@@ -73,7 +73,7 @@ def complete_agreement_step
   def complete_doc_auth_steps_before_hybrid_handoff_step(expect_accessible: false)
     complete_doc_auth_steps_before_agreement_step(expect_accessible: expect_accessible)
     complete_agreement_step
-    expect(page).to be_axe_clean.according_to :section508, :"best-practice" if expect_accessible
+    expect_page_to_have_no_accessibility_violations(page) if expect_accessible
   end
 
   def complete_hybrid_handoff_step
@@ -88,7 +88,7 @@ def complete_doc_auth_steps_before_document_capture_step(expect_accessible: fals
     # JavaScript-enabled mobile devices will skip directly to document capture, so stop as complete.
     return if page.current_path == idv_document_capture_path
     complete_hybrid_handoff_step
-    expect(page).to be_axe_clean.according_to :section508, :"best-practice" if expect_accessible
+    expect_page_to_have_no_accessibility_violations(page) if expect_accessible
   end
 
   def complete_document_capture_step
@@ -106,7 +106,7 @@ def complete_document_capture_step_with_yml(proofing_yml)
   def complete_doc_auth_steps_before_phone_otp_step(expect_accessible: false)
     complete_doc_auth_steps_before_verify_step(expect_accessible: expect_accessible)
     click_idv_continue
-    expect(page).to be_axe_clean.according_to :section508, :"best-practice" if expect_accessible
+    expect_page_to_have_no_accessibility_violations(page) if expect_accessible
     click_idv_continue
   end
 
@@ -120,7 +120,7 @@ def mobile_device
   def complete_doc_auth_steps_before_ssn_step(expect_accessible: false)
     complete_doc_auth_steps_before_document_capture_step(expect_accessible: expect_accessible)
     complete_document_capture_step
-    expect(page).to be_axe_clean.according_to :section508, :"best-practice" if expect_accessible
+    expect_page_to_have_no_accessibility_violations(page) if expect_accessible
   end
 
   def complete_ssn_step
@@ -131,7 +131,7 @@ def complete_ssn_step
   def complete_doc_auth_steps_before_verify_step(expect_accessible: false)
     complete_doc_auth_steps_before_ssn_step(expect_accessible: expect_accessible)
     complete_ssn_step
-    expect(page).to be_axe_clean.according_to :section508, :"best-practice" if expect_accessible
+    expect_page_to_have_no_accessibility_violations(page) if expect_accessible
   end
 
   def complete_verify_step
@@ -140,7 +140,7 @@ def complete_verify_step
 
   def complete_doc_auth_steps_before_address_step(expect_accessible: false)
     complete_doc_auth_steps_before_verify_step
-    expect(page).to be_axe_clean.according_to :section508, :"best-practice" if expect_accessible
+    expect_page_to_have_no_accessibility_violations(page) if expect_accessible
     click_link t('idv.buttons.change_address_label')
   end
 
@@ -168,7 +168,7 @@ def complete_come_back_later
   def complete_all_doc_auth_steps(expect_accessible: false)
     complete_doc_auth_steps_before_verify_step(expect_accessible: expect_accessible)
     complete_verify_step
-    expect(page).to be_axe_clean.according_to :section508, :"best-practice" if expect_accessible
+    expect_page_to_have_no_accessibility_violations(page) if expect_accessible
   end
 
   def complete_all_doc_auth_steps_before_password_step(expect_accessible: false)
@@ -177,7 +177,7 @@ def complete_all_doc_auth_steps_before_password_step(expect_accessible: false)
     click_continue
     verify_phone_otp
     expect(page).to have_current_path(idv_review_path, wait: 10)
-    expect(page).to be_axe_clean.according_to :section508, :"best-practice" if expect_accessible
+    expect_page_to_have_no_accessibility_violations(page) if expect_accessible
   end
 
   def complete_proofing_steps

spec/support/matchers/accessibility.rb

@@ -4,7 +4,9 @@
   match do |page|
     ['aria-describedby', 'aria-labelledby'].each do |idref_attribute|
       page.all(:css, "[#{idref_attribute}]").each do |element|
-        page.find_by_id(element[idref_attribute], visible: :all)
+        element[idref_attribute].split(' ').each do |referenced_id|
+          page.find_by_id(referenced_id, visible: :all)
+        end
       rescue Capybara::ElementNotFound
         invalid_idref_messages << "[#{idref_attribute}=\"#{element[idref_attribute]}\"]"
       end