Styled File Input Keyboard Accessible
How do I make this file input keyboard accessible without using js.
Codepen: https://codepen.io/Arslan-Akbar/pen/OJeBMLp
3 Replies
Since the label is wrapping the input it will be connected to the input already. You can also use the
for attribute to point to the ID of the file input if it's outside of the label.
But the hidden attribute on the input doesn't allow it to be tabbed to. Instead use the "visually-hidden" class on the input instead of hiding it with attributes.Got it. Thank you. For some reason I though using sr-only causes input not to be focused. Thank you once again tho.
You connect through the label and the style the focus from there