fix: improve accessibility of failure instance card

[karanbirsingh]

Description of changes

This PR implements the proposed solution from this comment on 1796. This ends up resolving #3421 as well.

The general idea is to remove tab-focus from the card itself and instead create a hidden button that manages the highlight state.

The visual behavior should be identical for the interactive card in fastpass. The following things are different in the report card:

• the card is not a tab stop, and receives no visual focus
• the cursor is no longer a pointer when hovered over the card (because there's nothing to click)
• the card no longer is styled differently on hover (because there's nothing to click)

Here is a gif of the interactive card behavior in Automated Checks after this PR:

Here is a gif of the report card behavior after this PR (mouse location slightly off, recording error):

@RobGallo reviewed this branch locally with a screen reader to validate the experience.

We ensure that clicking on the card moves keyboard focus to the hidden button, and that focusing on the hidden button applies visual focus on the card. cardFocused state is introduced to allow button onFocus/onBlur handlers to affect focus styling on the card. onClick behavior on the card is added to forward focus/click events to the hidden button. The initial implementation (no card tabindex) suffered from focus-style flickering on card-click because the onBlur handler fired before the click handler that restores button focus. We explored two options to fix this. They have identical keyboard behavior, but differ on-card-click.

• Setting tabindex to -1 on the card. This keeps the card out of tab-order, but allows card-clicks to trigger :focus state so visual focus doesn't disappear and re-appear. When the card is clicked, NVDA reads extra information about the card before focus is moved to the hidden button. This is the approach in this PR.
• Deferring the focus updates until we have associated isSelected prop updates to match; deferring the update was awkward / required extra state variables, but ensured visual focus style didn't flicker. In this approach NVDA only reads information about the hidden button.

@iamrafan pointed out that the placement of the hidden button relative to its table affects where NVDA goes upon tab / shift-tab after pressing T to go to a table. I moved the button after the table to align with his feedback so that pressing T when focus is on the WCAG link goes to the first table - then pressing shift-tab returns to the WCAG link (as opposed to returning to the button). When the first card is selected, at least visually it will look like we're focused on the first table; pressing T takes us to the next table.

Pull request checklist

• Addresses an existing issue: Card from report doesn't respond to NVDA / Narrator table commands when reached via 'tab' #1796 and Remove tab stop/keyboard focus on the "HTML" cards in HTML report #3421
• Ran yarn fastpass
• Added/updated relevant unit test(s) (and ran yarn test)
• Verified code coverage for the changes made. Check coverage report at: <rootDir>/test-results/unit/coverage
• PR title AND final merge commit title both start with a semantic tag (fix:, chore:, feat(feature-name):, refactor:). See CONTRIBUTING.md.
• (UI changes only) Added screenshots/GIFs to description above
• (UI changes only) Verified usability with NVDA/JAWS

[karanbirsingh]

@ferBonnin @LiLoDavis I hope you can take a look at the GIFs/description as well since this PR changes UI behavior

[LiLoDavis]

@ferBonnin @LiLoDavis I hope you can take a look at the GIFs/description as well since this PR changes UI behavior

This looks good to me.

[karanbirsingh]

Working on two updates:

• place focus on button when card is clicked
• ensure button padding/margin is 0px

[dbjorge]

Code and usability both LGTM!