#a11y-focus: Standardizing the handling of :focus and :hover

[adamsoucie]

After the discussion of 34876 with @mor10 and @michaelarestad, we've realized there are two main cases:

• Times when the :focus and :hover states can be the same
• Times when they need to be different

In order to tackle the general :focus problem we'll need to:

1. Define which elements fall into which category
2. Establish a standard implementation for each category
3. Implement the new standards

This could quickly evolve into a larger project, but we want to start resolve the :focus/:hover to make sure that gets addressed. This ticket is intended to start the conversation and put the attention on :focus.

This is an important a11y issue, as 34876 shows there are still elements that lack a :focus state completely. As part of this plan, we'll identify those elements lacking :focus and address both the lack of :focus and the correct implementation at the same time.

[adamsoucie]

Based on today's a11y Slack chat, we're establishing :focus as the standard, with :hover being somewhat of an extension of :focus.

To quote Joe Dolson:

"One important thing to keep in mind about the difference between :focus and :hover is the type of action that initiates them; :hover is initiated by direct action (a user points at the item that will change) and :focus by indirect action (a user presses tab or changes focus, with no definite knowledge of where the changed item will appear). This is the key reason that :focus needs to be a strong and obvious change, where there can be more flexibility with :hover. (Although the perceivable characteristics obviously still need to be present.)"

Step 1 has been decided that :focus and :hover need to be different in all cases.

Moving on to Step 2, due to 34904. This provides us with the standard to implement. Once that's complete, we'll move to Step 3.

[michaelarestad]

Added a quick patch to #34904. Would love some feedback.

After that, I think we can go through each interactive element (starting with buttons, links, and form fields) and then move on to menus and other misc links to make sure the focus state change (background/text/border) is clear and consistent.