Labelling may be insufficient for a11y

[dlockhart]

@nicolebezaire FYI

Currently the file uploader has a single label tied to the file input. It reads either "browse" or "browse files" depending on the responsive breakpoint that's currently active.

Out of context, this could be insufficient when a screen reader user is looking at a list of form input fields -- especially the "browse" form.

This will likely need some design help for a solution. Possible options:

• Expose the ability (or necessity?) to tie another element (via aria-describedby?) which might provide more context as to what the file input is for. e.g. "User profile picture" -> "browse files"
• Similar to the first solution, but instead of providing another element that describes the input, expose a new "label" or "description" attribute that accomplishes the same thing
• Give the consumer an option between the first or second option

Finally, in the larger viewport mode, the label "browse" may still be insufficiently descriptive. Browse for what? The smaller viewport "browse files" is better.

[dbatiste]

Re the options: watch out for a11y issues referencing elements outside the shadow-DOM via aria-describedby. Rob did a recent a11ycast video on this - I think one of the recommended approaches was your second option. :)

[dlockhart]

Good catch @dbatiste! You're referring to this one and agreed.

[dbatiste]

That's the one! :)

[nicolebezaire]

Overall, sounds like a good idea to make those inputs more descriptive, esp. given variety of ways you can navigate with a screen reader (and to your second point, would aid understanding if "browse" is too ambiguous on its own). I would leave that additional descriptive label up to each team, since it will be very context-specific.

[dlockhart]

Fixed!