The "blue glow" outline used on focused input elements is barely noticeable on submit buttons which have a similar blue color. This can be very confusing when using keyboard navigation to select the submit button after editing a textarea (e.g. editing an existing comment), compounded by the fact that tab order is different from visual order.
Description
Revisions and Commits
rP Phabricator | |||
D17023 | rPfddd46740064 Fake an outline ring on buttons |
Event Timeline
Chrome:
Okay, it does look invisible in Firefox. Is Firefox the browser you're using?
It's somewhat invisible in Chrome on Windows too (Behold my powers of image editing! And on a Windows machine too!):
@chad, it looks like we're just using the browser's default outline for buttons.
In Firefox, the default outline is an ugly inner outline which we hide in phui-button.css:
button::-moz-focus-inner { padding: 0; border: 0; }
We don't appear to replace it with anything.
Putting a rule like this into phui-button.css appears likely as an approach?
button:focus, a.button:focus, input[type="submit"]:focus { outline: 4px solid red; }
If I copy the effect rules from other form elements in phui-form.css, we get a subtle blue glowey outline similar to elements, but I personally think the outline ends up too hard to see (it's more subtle than the current outline in Safari or Chrome). Maybe something like that but kick it up a notch? Or maybe my monitor is just whack.
Reproduction instructions:
- Use Firefox on OSX.
- Select a comment text area in Maniphest.
- Uh, in System Preferences → Accessibility → Keyboard Preferences → Shortcuts you might need to select "All Controls".
- Press tab to focus the submit button.
Chrome 54 / Ubuntu 14.04. Tabbing through the comment edit form fields looks like this (screenshots are from phabricator.wikimedia.org):
Does it reproduce here as well? We don't take bug reports from that install from non-admins. It's a forked install and not up to date.
The bug seems to be with Chrome/Ubuntu, as it's inconsistent with their other platforms. Did you file a task in their upstream?
Unclear if I can globally style these consistently across all browsers / OSs. But no one complained about my select styles yet.
Yeah, seems to be a bug in Chrome. I would follow up with them. There is no correct means to style it in Ubuntu, just some hacks.