diff --git a/app/javascript/packages/document-capture/components/file-input.jsx b/app/javascript/packages/document-capture/components/file-input.jsx
index 97f7388998a..d5b1f3c50b3 100644
--- a/app/javascript/packages/document-capture/components/file-input.jsx
+++ b/app/javascript/packages/document-capture/components/file-input.jsx
@@ -179,6 +179,19 @@ function FileInput(props, ref) {
}
}
+ /**
+ * @param {Blob|string|null|undefined} fileValue File or string for which to generate label.
+ */
+ function getLabelFromValue(fileValue) {
+ if (fileValue instanceof window.File) {
+ return fileValue.name;
+ }
+ if (fileValue) {
+ return t('doc_auth.forms.captured_image');
+ }
+ return '';
+ }
+
const shownErrorMessage = errorMessage ?? ownErrorMessage;
return (
@@ -278,6 +291,7 @@ function FileInput(props, ref) {
id={inputId}
className="usa-file-input__input"
type="file"
+ aria-label={getLabelFromValue(value)}
onChange={onChangeIfValid}
capture={capture}
onClick={onClick}
diff --git a/config/locales/doc_auth/en.yml b/config/locales/doc_auth/en.yml
index f82885910ab..de8daac6406 100644
--- a/config/locales/doc_auth/en.yml
+++ b/config/locales/doc_auth/en.yml
@@ -104,6 +104,7 @@ en:
upload_error: Sorry, something went wrong on our end.
forms:
address1: Address
+ captured_image: Captured Image
change_file: Change file
choose_file_html: Drag file here or choose from folder
city: City
diff --git a/config/locales/doc_auth/es.yml b/config/locales/doc_auth/es.yml
index c171f1fc7f9..faa0364da57 100644
--- a/config/locales/doc_auth/es.yml
+++ b/config/locales/doc_auth/es.yml
@@ -129,6 +129,7 @@ es:
upload_error: Lo siento, algo salió mal por nuestra parte.
forms:
address1: Dirección
+ captured_image: Imagen capturada
change_file: Cambiar archivo
choose_file_html: Arrastre el archivo aquí o elija de la
carpeta
diff --git a/config/locales/doc_auth/fr.yml b/config/locales/doc_auth/fr.yml
index d26b534a64f..e88a3dc48a4 100644
--- a/config/locales/doc_auth/fr.yml
+++ b/config/locales/doc_auth/fr.yml
@@ -135,6 +135,7 @@ fr:
upload_error: Désolé, quelque chose a mal tourné de notre côté.
forms:
address1: Adresse
+ captured_image: Image capturée
change_file: Changer de fichier
choose_file_html: Faites glisser le fichier ici ou choisissez un
dossier
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 61fa91b988e..3ff482e5193 100644
--- a/spec/javascripts/packages/document-capture/components/file-input-spec.jsx
+++ b/spec/javascripts/packages/document-capture/components/file-input-spec.jsx
@@ -232,6 +232,37 @@ 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', () => {
+ const { getByLabelText } = render();
+
+ const queryByAriaLabel = getByLabelText('');
+
+ expect(queryByAriaLabel).to.exist();
+ });
+
+ it('has aria-label same as file name', () => {
+ const fileName = 'file2.jpg';
+ const file2 = new window.File([file], fileName);
+ const { getByLabelText } = render();
+
+ const queryByAriaLabel = getByLabelText(fileName);
+
+ expect(queryByAriaLabel).to.exist();
+ });
+
+ it('has aria-label with Captured Image', () => {
+ const { getByLabelText } = render(
+ ,
+ );
+
+ const queryByAriaLabel = getByLabelText('doc_auth.forms.captured_image');
+
+ expect(queryByAriaLabel).to.exist();
+ });
+
it('calls onClick when clicked', () => {
const onClick = sinon.stub();
const { getByLabelText } = render();