From 2feb94cf4e207f8ad7ad7df4cdc24149e5881d90 Mon Sep 17 00:00:00 2001
From: Matt Hinz <matt.hinz@gsa.gov>
Date: Fri, 28 Oct 2022 15:48:52 -0700
Subject: [PATCH 1/3] Update ARIA label for FileInput component

When FileInput does not have a file added to it, ensure ARIA label includes the prompt to drag + drop a file.

User testing found this was needed, as JAWS does not automatically read `aria-describedby` by default (it requires extra interaction).

changelog: Improvements, Accessibility, Improve document upload screen reader text
---
 .../components/file-input.jsx                 | 31 ++++++++++++++-----
 1 file changed, 24 insertions(+), 7 deletions(-)

diff --git a/app/javascript/packages/document-capture/components/file-input.jsx b/app/javascript/packages/document-capture/components/file-input.jsx
index 346b5bd100e..1ffb008da35 100644
--- a/app/javascript/packages/document-capture/components/file-input.jsx
+++ b/app/javascript/packages/document-capture/components/file-input.jsx
@@ -159,6 +159,7 @@ function FileInput(props, ref) {
   const inputId = `file-input-${instanceId}`;
   const hintId = `${inputId}-hint`;
   const innerHintId = `${hintId}-inner`;
+  const labelId = `${inputId}-label`;
 
   /**
    * In response to a file input change event, confirms that the file is valid before calling
@@ -194,17 +195,32 @@ function FileInput(props, ref) {
   }
 
   /**
-   * @param {string} fileLabel String velue of the label for input to display
+   * @param {string} fileLabel String value of the label for input to display
    * @param {Blob|string|null|undefined} fileValue File or string for which to generate label.
+   * @return {{'aria-label': string} | {'aria-labelledby': string}}
    */
-  function getLabelFromValue(fileLabel, fileValue) {
+  function getAriaLabelPropsFromValue(fileLabel, fileValue) {
+    // aria-label={getLabelFromValue(label, value)}
+    // aria-labelledby={`${labelId} ${innerHintId}`}
+
     if (fileValue instanceof window.File) {
-      return `${fileLabel} - ${fileValue.name}`;
+      return {
+        'aria-label': `${fileLabel} - ${fileValue.name}`,
+      };
     }
+
     if (fileValue) {
-      return `${fileLabel} - ${t('doc_auth.forms.captured_image')}`;
+      return {
+        'aria-label': `${fileLabel} - ${t('doc_auth.forms.captured_image')}`,
+      };
     }
-    return '';
+
+    // 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.
+    return {
+      'aria-labelledby': `${labelId} ${innerHintId}`,
+    };
   }
 
   const shownErrorMessage = errorMessage ?? ownErrorMessage;
@@ -241,6 +257,7 @@ function FileInput(props, ref) {
        */}
       {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
       <label
+        id={labelId}
         htmlFor={inputId}
         className={['usa-label', shownErrorMessage && 'usa-label--error'].filter(Boolean).join(' ')}
       >
@@ -320,13 +337,13 @@ function FileInput(props, ref) {
             id={inputId}
             className="usa-file-input__input"
             type="file"
-            aria-label={getLabelFromValue(label, value)}
+            {...getAriaLabelPropsFromValue(label, value)}
             aria-busy={isValuePending}
             onChange={onChangeIfValid}
             onClick={onClick}
             onDrop={onDrop}
             accept={accept ? accept.join() : undefined}
-            aria-describedby={hint ? `${innerHintId} ${hintId}` : undefined}
+            aria-describedby={hint ? hintId : undefined}
           />
         </div>
       </div>

From c607b3c38564ab2360a710c1344ea958f78ac642 Mon Sep 17 00:00:00 2001
From: Matt Hinz <matt.hinz@gsa.gov>
Date: Tue, 1 Nov 2022 11:52:20 -0700
Subject: [PATCH 2/3] Update tests

---
 .../document-capture/components/file-input-spec.jsx    | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/spec/javascripts/packages/document-capture/components/file-input-spec.jsx b/spec/javascripts/packages/document-capture/components/file-input-spec.jsx
index d26aef7dc64..3cd73105601 100644
--- a/spec/javascripts/packages/document-capture/components/file-input-spec.jsx
+++ b/spec/javascripts/packages/document-capture/components/file-input-spec.jsx
@@ -139,12 +139,8 @@ describe('document-capture/components/file-input', () => {
   it('renders an optional hint', () => {
     const { getByLabelText } = render(<FileInput label="File" hint="Must be small" />);
 
-    /**
-     * The second id in the `aria-descrbedby` value will specify the original
-     * hint.
-     */
     const input = getByLabelText('File');
-    const hintId = input.getAttribute('aria-describedby').split(' ')[1];
+    const hintId = input.getAttribute('aria-describedby');
     const hint = document.getElementById(hintId).textContent;
 
     expect(hint).to.equal('Must be small');
@@ -237,10 +233,10 @@ describe('document-capture/components/file-input', () => {
     expect(onChange.getCall(0).args[0]).to.equal(file);
   });
 
-  it('has a blank aria-label with no input added', () => {
+  it('has an appropriate 2-part aria-label with no input added', () => {
     const { getByLabelText } = render(<FileInput label="File" />);
 
-    const queryByAriaLabel = getByLabelText('');
+    const queryByAriaLabel = getByLabelText('File doc_auth.forms.choose_file_html');
 
     expect(queryByAriaLabel).to.exist();
   });

From d1a7afb795034b98a8abad76f8c199507c8208c1 Mon Sep 17 00:00:00 2001
From: Matt Hinz <matt.hinz@gsa.gov>
Date: Thu, 3 Nov 2022 11:57:54 -0700
Subject: [PATCH 3/3] Remove stray comments

---
 .../packages/document-capture/components/file-input.jsx        | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/app/javascript/packages/document-capture/components/file-input.jsx b/app/javascript/packages/document-capture/components/file-input.jsx
index 1ffb008da35..c353ac1d4d7 100644
--- a/app/javascript/packages/document-capture/components/file-input.jsx
+++ b/app/javascript/packages/document-capture/components/file-input.jsx
@@ -200,9 +200,6 @@ function FileInput(props, ref) {
    * @return {{'aria-label': string} | {'aria-labelledby': string}}
    */
   function getAriaLabelPropsFromValue(fileLabel, fileValue) {
-    // aria-label={getLabelFromValue(label, value)}
-    // aria-labelledby={`${labelId} ${innerHintId}`}
-
     if (fileValue instanceof window.File) {
       return {
         'aria-label': `${fileLabel} - ${fileValue.name}`,