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

[Aquilaafuadajo]

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 👇🏽

2. 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.