Should focus be on first button in pop up from hover state?

Question

I have a table where if you hover on the chat bubble icon the pop up shows as in this picture.

For 508 compliance and accessibility.... if a user hit tab, while in that hover state, should the focus be on the first button SEE MORE? I wasn't sure since it is a hover the focus is tech. on the chat bubble icon.

Answer 1

... if a user hits the tab, while in that hover state, should the focus be on the first button [SEE MORE]?

Yes.

From https://accessibility.digital.gov/

• Tab Order (USA, LTR):

Do your wireframes or design mockups indicate a logical tab order for people using a keyboard, or other assistive technology, to navigate?

  Why it’s important: Maria has tendonitis and is unable to use a mouse; instead,
  she uses the keyboard to navigate the web. When focus jumps randomly around
  the page she gets confused.

• A user should be able to use the tab key to navigate to and activate every interactive element on a page.
• Users should be able to tab through interactive items in a logical order, usually from left to right and top to bottom. Sometimes a logical order will be obvious to your front end team based on a simple layout, but in more complicated layouts you may need to identify the tab order [with highlights and a box] in your wireframes or mockups.
• Each interactive element should have a visible focus state, work with your visual designer to make sure you’ve accounted for these.

• Focus

Have you designed for logical focus behavior on interactive elements?

  Why it’s important: Jiang is blind and uses a screen reader to navigate the
  web – when a modal pops up and doesn’t receive focus he may not even
  know it’s there.

    Steps to take

• Work with your front end designer to identify any interactions on the page that require JavaScript or that can’t be created using default HTML elements. You should intentionally design how focus flows through these interactions.

  See also: Focus Visible.

Answer 2

The answer is simply yes. But I see where your question comes from: it is designed for mouse users. It is the same problem as with fly-out mega menu's, where a sub menu shows when the mouse hovers an item*.

I suggest to make the chat icon a button that allows opening the popup with the enter key. The popup should have focus when it opens. See this example of an accessible modal: https://ireade.github.io/accessible-modal-dialog/. It is close to (if not exactly) what you want for the popup. Explanation and code can be found here: https://bitsofco.de/accessible-modal-dialog/.

Important is:

• Make the popup part of the flow (set focus on the first focussable element in the popup)
• Don't open it automatically for keyboard users, let them press enter on the button
• Add a button to the popup to close it and allow it to close with the escape key
• Use aria-label on the chat icon-button that tells that it opens a popup with.. messages(?)

*A tutorial how to make fly-out/mega menu's accessible and an example