Make upload button focusable (accessibility/tab navigation)#574
Make upload button focusable (accessibility/tab navigation)#574ericawright merged 1 commit intomozilla:masterfrom
Conversation
ericawright
left a comment
ericawright
left a comment
There was a problem hiding this comment.
I'm looking at this on Firefox on Mac.
Oddly, once in a while the #browse element will show as selected, and others it simply won't. You can see this often by uploading one file then clicking upload another. I can't seem to figure out why though....perhaps it is in the wrong file?
Nit: if you could change the double quotes to single in main.css that would be nice.
Thanks for this, and sorry I took so long to review.
assets/main.css
Outdated
| input[type='file'] { | ||
| display: none; | ||
| width: 0.1px; | ||
| height: 0.1px; |
There was a problem hiding this comment.
the width and height rules here don't seem necessary since it's display: absolute and opacity: 0
There was a problem hiding this comment.
It doesn't seem important to me*, but just in case, those rules were responsible for the 'hidden' form input fitting behind the label used as a button
edit: *the consequences of removing the size rules does not seem important, but just in case
I can reproduce this with Firefox ESR on Debian, it never works after clicking upload another file. I think this is because the javascript that adds the focus and blur events only runs on DOMContentLoaded. |
| 'uploadPageSizeMessage' | ||
| )}</em></span> | ||
| <form method="post" action="upload" enctype="multipart/form-data"> | ||
| <input id="file-upload" type="file" name="fileUploaded" onchange=${upload} onfocus=${onfocus} onblur=${onblur} /> |
There was a problem hiding this comment.
The html attributes onfocus and onblur have the same issues as the css in Firefox, but it seems I can use them in the template as they get rewritten into javascript event listeners? (which do work in Firefox). I clearly need to read some documentation to understand this better, will it always remove & replace the html onfocus attribute? (becuase if it doesn't, this will brake).
There was a problem hiding this comment.
It seems to be working for me now. 👍
Can you re-base so this can merge smoothly?
|
I think I just misused git, sorry. I rebased, squashed and then force pushed so the reviewed/approved commits are no longer visible on github. I think i can put this back the way it was before (and then only rebase on master), should i? |
|
Actually, it looks correct now. I'll just test it again.... I see what you're worried about, the commit history was lost. That's not a problem at all :D |
|
I've got the original branch back (and rebased it, without squashing). I should be able to force push that if you haven't (re)started yet? |
|
Nope, this is perfectly good as is. I prefer having a smaller commit history anyway. |
2 participants
fixes #563