FAQ question toggles accessibility

[joedolson]

The FAQ is toggled directly from a dt element, which is not keyboard focusable. The toggle should be attached to a button element nested inside the dt element, so that it can be operated from the keyboard.

[obenland]

We need to find a solution for focus styles that don't impede mouse interactions

[joedolson]

What about using a transition on :hover and :focus so that there's a visible change that occurs on focus?

E.g., default state is as currently exists; :hover and :focus rotates 90 degrees then returns to position.

The movement would provide a visual indicator but the state would still return to a constant state.

[joedolson]

Also, a change in background color that indicates focus and current would probably work fine. Either way, the change in HTML to add the buttons is a *critical* feature for accessibility.

[obenland]

For future reference: ​https://wordpress.slack.com/archives/C02QB8GMM/p1490220718836135

That could be resolved by moving .focus() to the FAQ answer, which can be made focusable using tabindex=-1, I'd think.

[obenland]

In 5166:

Plugin Directory: Make FAQ toggles accessible

Restores focus styles for keyboard navigation and adds a focusable element to
toggle from.

Fixes #2296.

[obenland]

In 5167:

Plugin Directory: Add back compat with existing FAQ markup

Fixes a bug where existing FAQs were not toggle-able due to the missing button.

See #2296.

[obenland]

In 5195:

Plugin Directory: Insert toggle button through JS

KSES doesn't like buttons apparently and this should be a front-end change
anyway.

See #2296, [5166], [5167].