The webview find widget is focusable while hidden

[Tyriar]

#67509

Repro:

1. Open PR ext description page
2. Focus something, shift+tab until you hit the start of the screen

There are 4 focusable items, close, next match, previous match and the find input.

[cleidigh]

@mjbvz
Would you like me to start on this?

[mjbvz]

Yes please. It is too late to get a fix in for the January VS Code release but you can submit a PR any time and we'll try to get this fixed for February

[cleidigh]

LOL ... my Dragon dictation did the equivalent of a butt dial , deleted assignments and pasted an eMoji

sorry about that :-P

[cleidigh]

@Tyriar
@mjbvz
FYI: started on this and I can reproduce and see it.

• simpleFind transitions in and out with animation, hidden only because of z-index and/or overflow.
• The widget always has display type:flex , therefore the four tabs stops for the buttons and input are always in the tabIndex order
• fix should be simple, however, there is an interaction between the animation and the display mode
  such that simultaneously going from display:none => flex messes up the animation. I'm working on separating the display mode from the transition to see if that will work.

I have to do more experiments , May have a question or two later...

[cleidigh]

See PR: #68463

Verification:
Use a screen reader with screen output on so you can see and track each tab stop

• Open the new pull request extension page
• Click on the upper pane to begin focus there
• Tab through the various toolbar buttons , after dependencies the next tab SHOULD land on
  With the webview not the simpleFind widget.
• Verify showing and hiding simpleFind has smooth animation as before

Note: When focuses on bottom for web view pane , screen readers output a bunch of base64 encoded text (see truncated output lines below). But I think this is an accessibility bug, if you guys agree I'll post an issue.

NVDA Output: with visibility fix (correct output, no tab stops within the hidden simpleFind)

tool bar
Disable▼  button
Uninstall  button
tool bar
Contributions  button  Lists contributions to VS Code by this extension
Changelog  button  Extension update history, rendered from the extension's 'CHANGELOG.md' file
Dependencies  button  Lists extensions this extension depends on
frame
frame
scroll to top
button  data:text/html;charset=utf-8,%3C%21DOCTYPE%20html%3E%0D%0A%3Ch.... (truncated)
graphic
Extension: GitHub Pull Requests - vscode - Code - OSS Dev  document
button
scroll to top

NVDA Output: original scenario without fix (can see tabs stops in widget)

the marketplace
link  https://aka.ms/vscodepr-download
Extension: GitHub Pull Requests - vscode - Code - OSS Dev
tool bar
Disable▼  button
Uninstall  button
tool bar
Contributions  button  Lists contributions to VS Code by this extension
Changelog  button  Extension update history, rendered from the extension's 'CHANGELOG.md' file
Dependencies  button  Lists extensions this extension depends on
Find  edit  Find
Find
blank
Previous match
button  Previous match
Next match
button  Next match
Close
button  Close
frame
frame
list  with 7 items
the marketplace
link  https://aka.ms/vscodepr-download
scroll to top
button  data:text/html;charset=utf-8,%3C%21DOCTYPE%20html%3E%0D%0A%3Chtml%20l... ( truncated)
list  with 7 items