Skip to content

LG-5632 Document Capture Field label for screen readers #5858

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
theabrad merged 6 commits into from
Jan 28, 2022
Merged

LG-5632 Document Capture Field label for screen readers #5858

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
90ac058
Document Capture Field name for screen readers
theabrad Jan 25, 2022
4d84ba5
Removed aria-label from file input
theabrad Jan 26, 2022
ba07b03
Merge branch 'main' of github.com:18F/identity-idp into abradley-lg-5…
theabrad Jan 26, 2022
c93bf84
Updated changelog
theabrad Jan 26, 2022
5af2eaf
Included label along with filename for file input
theabrad Jan 27, 2022
406cb5d
Add label to captured image
theabrad Jan 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ Unreleased
- Layout: The "Delete Account" confirmation page has a new layout consistent with other content pages. (#5857)

### Accessibility
- Document capture: The image file field label is no longer set to file names so that screen readers do not read the filenames to users. (#5858)

### Bug Fixes Users Might Notice

Expand Down
9 changes: 5 additions & 4 deletions app/javascript/packages/document-capture/components/file-input.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,14 +194,15 @@ function FileInput(props, ref) {
}

/**
* @param {string} fileLabel String velue of the label for input to display
* @param {Blob|string|null|undefined} fileValue File or string for which to generate label.
*/
function getLabelFromValue(fileValue) {
function getLabelFromValue(fileLabel, fileValue) {
if (fileValue instanceof window.File) {
return fileValue.name;
return `${fileLabel} - ${fileValue.name}`;
Copy link
Copy Markdown
Contributor

@aduth aduth Jan 27, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we include the label in all of the possible return paths of this function, not just the one where we know the file's name?

Copy link
Copy Markdown
Contributor Author

@theabrad theabrad Jan 28, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes I added a label to the second return statement. The last return path doesn't need it. I tested with a screen reader and it looks like the label field will take precedence over that.

}
if (fileValue) {
return t('doc_auth.forms.captured_image');
return `${fileLabel} - ${t('doc_auth.forms.captured_image')}`;
}
return '';
}
Expand Down Expand Up @@ -319,7 +320,7 @@ function FileInput(props, ref) {
id={inputId}
className="usa-file-input__input"
type="file"
aria-label={getLabelFromValue(value)}
aria-label={getLabelFromValue(label, value)}
aria-busy={isValuePending}
onChange={onChangeIfValid}
capture={capture}
Expand Down
6 changes: 3 additions & 3 deletions spec/javascripts/packages/document-capture/components/file-input-spec.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -240,12 +240,12 @@ describe('document-capture/components/file-input', () => {
expect(queryByAriaLabel).to.exist();
});

it('has aria-label same as file name', () => {
it('has aria-label with label and filename', () => {
const fileName = 'file2.jpg';
const file2 = new window.File([file], fileName);
const { getByLabelText } = render(<FileInput label="File" value={file2} />);

const queryByAriaLabel = getByLabelText(fileName);
const queryByAriaLabel = getByLabelText(`File - ${fileName}`);

expect(queryByAriaLabel).to.exist();
});
Expand All @@ -258,7 +258,7 @@ describe('document-capture/components/file-input', () => {
/>,
);

const queryByAriaLabel = getByLabelText('doc_auth.forms.captured_image');
const queryByAriaLabel = getByLabelText(`File - ${'doc_auth.forms.captured_image'}`);

expect(queryByAriaLabel).to.exist();
});
Expand Down