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();