Skip to content
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.

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

Already on GitHub? Sign in to your account

[Outreachy Task Submission] Keyboard Accessibility Issue With File Upload Button On Data Import Page #983

Open
wants to merge 3 commits into
base: development
Choose a base branch
from

Conversation

Aquilaafuadajo
Copy link
Contributor

Resolves #4903

Description
On the data import page, the "upload csv file" button doesn't respond immediately to keyboard enter event, you have to tab twice. I initially thought it was the same issue with router link buttons in #982, but this one is different.

Why does this happen?
There are two issues with this implementation of file upload input:

  1. The button relies on the visually hidden input to be clicked before it opens up the file/folder widget so clicking on the area around the input doesn't open the input field unless you click on the input directly. see image below 馃憞馃徑
Screenshot 2024-03-29 at 12 01 40
  1. The visually hidden input also receives an extra focus when tabbed into.

Fix
Use the button to programmatically control the input by using the it's elementRef and set the tabindex of the visually hidden input to -1 to prevent the extra focus. This way when any area of the button is clicked it opens up the file/folder widget.

How to test

  1. https://mzima-dev.staging.ush.zone/settings/data-import
  2. Try to upload csv using only your keyboard to notice the issue
  3. On this branch, to http://localhost:4200/settings/data-import
  4. Repeat step 2 and notice the difference

@Angamanga This pr is ready for review 馃檹馃徑

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Outreachy Task Submission] Keyboard Accessibility Issue With File Upload Button On Data Import Page
1 participant