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

Restricted Differential Revision

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 Preferences → Accessibility → Keyboard Preferences → Shortcuts 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)

chad added a revision: Restricted Differential Revision.Dec 11 2016, 12:58 AM
chad closed this task as Resolved by committing Restricted Diffusion Commit.Dec 11 2016, 5:21 PM
chad added a commit: Restricted Diffusion Commit.