At the moment, there's an input element inside the toolbar button. This input is rendered, and layered just below the button itself. The entire file selection process is handled by the input, so any clicks on the button which are just outside the input element are ignored.
This PR prevents the input being rendered entirely, substituting opacity: 0 with display: none. Then, we add an onclick handler to the toolbar button which triggers the input dialog to open.
After this, everything continues as normal.
This also removes the need for focus styling hacks: currently the focus is given to the input element, meaning that we can't use :focus-visible to provide keyboard-only focus styles to the button, instead having to use :focus-within, which also shows these focus styles when clicking the upload button with a mouse, which might be undesirable.
At the moment, there's an input element inside the toolbar button. This input is rendered, and layered just below the button itself. The entire file selection process is handled by the input, so any clicks on the button which are just outside the input element are ignored.
This PR prevents the input being rendered entirely, substituting
opacity: 0withdisplay: none. Then, we add anonclickhandler to the toolbar button which triggers the input dialog to open.After this, everything continues as normal.
This also removes the need for focus styling hacks: currently the focus is given to the input element, meaning that we can't use
:focus-visibleto provide keyboard-only focus styles to the button, instead having to use:focus-within, which also shows these focus styles when clicking the upload button with a mouse, which might be undesirable.