Make focus states clear in both keyboard and mouse navigation

[ajb]

(This is not high priority, but I want to track it somewhere.)

We redesigned our focus states in https://github.com/dobtco/dvl-core/pull/69 with the following in mind:

However, I think that test is fatally flawed, because focus is not always given by a user tabbing through elements.

Can you tell what is focused here?

It's the "Confirm" button.

An ideal solution, in my mind, would be to revert back to my following proposal in #69:

We only apply subtle style changes to focus states. This can include changing the size of the focus outline, or replacing the outline with a border of similar color, but we never remove the outline/border completely.

I'm amending it, too, because I think the border should always be the same color.

I swear I've ran into more instances of this being problematic, but I can't find them right now. I'd be open to the argument that this is a one-off issue affecting the "Confirm" button, but I think that more issues will become apparent, not less.

[ajb]

Heh, so this just caught me and I wasn't even looking for it.

Silly screencast: http://take.ms/rhBG7

[ajb]

Another issue:

The active state in dropdowns no longer has a distinct focus state: http://take.ms/1Kb26

Edit: to be fair, I don't think this is due to #69.

[jrubenoff]

Meant to respond to this yesterday, sorry.

Seems like there are three different issues here. In order:

1. We should never focus a destructive action by default. For example, in that screenshot the "Cancel" button should be focused when the modal is opened.
2. Focus states on the Submit button aren't obvious enough.
3. This was intentional, because selecting an active dropdown item doesn't change anything. I'm up for making it a bit more clear, though.

By "subtle style changes", I'm guessing you mean that we only slightly change the style of Webkit's focus ring? But that's not consistent across browsers... IE has 1px borders that can be hard to see if you don't custom style them. Ideally we want to make focus states super obvious across all browsers.

We can custom style each focus state as a thick border, but I'd just point out that there are other ways to do it that can look a bit nicer. Just in 2 minutes:

Nested box-shadows	Custom translucent outline	Thick bottom border

Etc. Does that make sense?

[ajb]

We should never focus a destructive action by default. For example, in that screenshot the "Cancel" button should be focused when the modal is opened.

I would agree except that the native browser behavior suggests otherwise:

Nobody's finger is slipping and hitting the enter key...

Focus states on the Submit button aren't obvious enough.

I would expand this statement to say that any focus state that only includes a change of background color is not obvious enough. Focus states need to be able to apparent that they're a focus state without tabbing.

This was intentional, because selecting an active dropdown item doesn't change anything. I'm up for making it a bit more clear, though.

But it makes keyboard navigation tougher, right?

I still think it's a losing battle to apply custom focus states at the level we're doing. If you want to fix these issues individually, we can continue down that road, but my preference would be to do less, not more.