Marvelous new keyboard-friendly image uploader has some issues

Question

First, let me state that I love the new image uploader. I can now paste screenshots with CTRL-G, Enter, type the first letters of my image, arrow keys to adjust, Enter to exit the dialog, Tab to the "Upload" button, and hit Enter one last time* to upload a screenshot.

However, it's still a new feature. The appearance varies widely between browsers, but I'm OK with that. It's native, it works well, and I'm happy enough. However, it's got some new-feature bugs (all based on OS X 10.6):

Firefox 4:

Firefox shows the full path to the image, which seems like security vulnerability (if typing in this box is a vulnerability, then showing the path is too, right? and hinders the usefulness of the dialog because you can't see the filename even just three folders down:

Also, the highlighting around the selected "Upload" and "Cancel" buttons is faint (look at the above screenshot) and the highlighting around the "from my computer" and "from the web" buttons is nonexistent:

More important than a lack of focus is the lack of interaction: Pressing Space or Enter doesn't toggle between the computer and web buttons.

Chrome:

Chrome doesn't highlight the "Upload" or "Cancel" buttons on electronics.stackexchange.com (Note: It works here on Meta, maybe we're just not on the most recent build yet?)

This is surprising, because it does show very nice highlights around the "From my computer" and "From the web" buttons:

...much nicer highlights than Firefox's one-pixel dotted line. Squint and you'll see it around the "Upload" button in the Firefox full-path image.

Safari

This browser has weird tab behavior: The "Browse" button is properly focused after hitting CTRL-G, so the initial action works. However, a Tab brings focus to Safari's URL bar, Safari's search box, the site search box, question title, question body, question tags, and then some unknown element which doesn't react, then back to the URL bar. You can't Tab away and then Shift-Tab focus back to the "Browse" button, and focus doesn't come back to the "Upload" button when you return from the dialog. Tabbing is just completely broken. Here's what it looks like after clicking "Tab" once:

I understand it's new, that these are minor issues, and that these are browser-dependent issues, but I'm just trying to help feel out the bugs in our new, shiny uploader!

Answer 1

Firefox shows the full path to the image, which seems like security vulnerability (if typing in this box is a vulnerability, then showing the path is too, right?

Besides the fact that if this were a security issue, it would have to be taken to Mozilla, not us – it's not. Typing in the box certainly is not a vulnerabilty (although, as I said in the other post, I don't know of any browser that allows it). Displaying something to the user is neither.

A security issue would be allowing the JavaScript to change the content, i.e. the chosen file. That's why the file to be uploaded always has to be chosen by the user, and cannot be "pre-chosen".

To a lesser extent, giving the JavaScript access to the full path may also be considered an issue, because it allows the website to know something about the user's directory structure. But only because the full path is displayed to the user (who is certainly allowed to know which file they're sending) doesn't mean that it's given to the JavaScript as well:

hinders the usefulness of the dialog because you can't see the filename even just three folders down:

That belongs on https://bugzilla.mozilla.org/, not here.

Also, the highlighting around the selected "Upload" and "Cancel" buttons is faint (look at the above screenshot) and the highlighting around the "from my computer" and "from the web" buttons is nonexistent

Fair point; many of the elements don't have a dedicated focus styling, and browsers work in mysterious ways when it comes to showing foucs. We may take a look at that.

More important than a lack of focus is the lack of interaction: Pressing Space or Enter doesn't toggle between the computer and web buttons

I'm a little wary when making this thing behave more and more like a real dialog – we all know where that leads. But I agree, this seems like the intuitive thing to be happening, so we can make that change.

Chrome…

See "mysterious ways" above.

Safari

This browser has weird tab behavior

I can't reproduce this in Safari on Windows, but I'll ask one of our few Mac users to look at this. Maybe Apple just wants to discourage the use of the tab key in their quest to make everything work with only one button :)

I understand it's new, that these are minor issues, and that these are browser-dependent issues, but I'm just trying to help feel out the bugs in our new, shiny uploader!

There's nothing new here at all, and nothing shiny either – on the contrary, we removed some of the shine because of your feature request. It's general policy among browser makers that file upload controls have to look sucky (well, can't be styled) so that the user always knows that this is an upload control, and the website can't trick the user into thinking it's something else (the usefulness of this is debatable, but it is how it is).

There are a few ways to cheat around this (as we previously did), but since this comes at the cost of accessibility (as you complained about), we stopped doing that. But this also means you now have to live with what the browser makers gives you.