Skip to content

Acessibility: File input component not confirming selected state to screen reader users #4232

Description

@sai-mohan-truss

Describe the bug

https://designsystem.digital.gov/components/file-input/

Once a select a file to upload from the native file browser window and return to the web page, visually you can see that the file has been selected due to the state change and this gives them confirmation + reassurance. However, from our recent formal 508 test, we learnt that this state change isn't communicated to screen reader users.

Steps to reproduce the bug

Turn on a screen reader software

  1. Move focus to the single file input component.
  2. Select 'choose from folder'.
  3. Choose a file.
  4. Upon return to the webpage, visually the selected state will be shown "selected file".
  5. The bug is that the there is no announcement to screen reader users to confirm that the file they chose did in fact get selected.
  6. Additionally, tab away from the file input and tab back to the file input. The state that is communicated to screen readers is the not the selected state. It continues to inform screen reader users to choose a file even though a file has already been selected.

Expected behavior

Upon choosing a file, an announcement needs to happen informing screenreader users "[file name] file is selected"
If you manually tab to the file input, the selected state should be informed.

System setup

USWDS version: 2.10.3
Device: Laptop
Operating system:MacOS Big Sur
Browser and version: Google Chrome (Version 91.0.4472.101 (Official Build) (x86_64)), Safari (Version 14.1 (16611.1.21.161.6))
Screenreader software: JAWS and VoiceOver

Additional context

  • We came across this problem in Google Chrome when using JAWS and VoiceOver.
  • We experienced this issue both in the context of our website as well as on the USWDS website when testing the component itself.

Metadata

Metadata

Assignees

Type

No type

Fields

No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions