Page MenuHomePhabricator

Outline is invisible on submit buttons
Closed, ResolvedPublic

Assigned To
None
Authored By
tgr
Dec 9 2016, 10:49 PM
Referenced Files
F2103636: pasted_file
Dec 11 2016, 12:46 AM
F2102680: pasted_file
Dec 10 2016, 5:48 PM
F2101574: phab-outline3.png
Dec 10 2016, 10:30 AM
F2101568: phab-outline1.png
Dec 10 2016, 10:30 AM
F2101571: phab-outline2.png
Dec 10 2016, 10:30 AM
F2098966: pasted_file
Dec 9 2016, 11:22 PM
F2098960: Screen Shot 2016-12-09 at 3.16.53 PM.png
Dec 9 2016, 11:18 PM
F2098953: Screen Shot 2016-12-09 at 3.15.06 PM.png
Dec 9 2016, 11:15 PM

Description

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.

Revisions and Commits

Event Timeline

isn't that outline provided by the browser?

I can't reproduce tab order differing from visual order, either.

Chrome:

Screen Shot 2016-12-09 at 3.16.53 PM.png (112×240 px, 7 KB)

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!):

pasted_file (112×199 px, 4 KB)

epriestley added a subscriber: chad.

@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 PreferencesAccessibilityKeyboard PreferencesShortcuts you might need to select "All Controls".
  • Press tab to focus the submit button.

@tgr can we get confirmation on the browser, please?

Chrome 54 / Ubuntu 14.04. Tabbing through the comment edit form fields looks like this (screenshots are from phabricator.wikimedia.org):

phab-outline1.png (306×550 px, 20 KB)

phab-outline2.png (306×545 px, 18 KB)

phab-outline3.png (307×545 px, 18 KB)

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.

pasted_file (316×1 px, 55 KB)