[Bug]: Keyboard focus is not visible While invoking the “Tests completed” button.

[msftedad]

Describe the bug

Keyboard focus is not visible While invoking the “Tests completed” button.

Actual Result:
Keyboard focus is not visible While invoking the “Tests completed” button.

Expected Result:
Keyboard focus should be visible While invoking the Tests completed” button.

To Reproduce

1. Open URL: Common Navigation - Scrolling Panel ⋅ Storybook (windows.net)
2. Navigate to “App bar” button at right side of the pane invoke it and navigate to “Default” link invoke it.
3. Now navigate to "Accessibility" tab item invoke it and navigate "Tests completed" button invoke it observe the keyboard focus

Attachments:
keyboard focus not visible tests completed.webm

System

OS: Windows 11
OS version: 22H2 (OS Build 22621.2134)
Edge Version: 116.0.1938.69 (Official build) (64-bit)

Additional context

No response

[Nevnet99]

I can take a look at this 😊

[Nevnet99]

Having some trouble building up a sandbox with my local code for the a11y package can anyone point me in the right direction ? @shilman

[abhisheksharma010]

Hey there! 👋

I'm new to open source and super excited to dive in! I'd love to work on this. Can I be assigned to this issue? 🚀

[Nevnet99]

all good got some help from the discord ! will commit a PR soon :)

[Nevnet99]

PR is here ! :) #24446

[yannbf]

Hey @msftedad, thanks for reporting this issue! I believe it's incorrect to say that the keyboard focus is not visible. What happens is that you have focus on the element, which shows the outline, and once you press enter, the tests re-run and the panel re-renders. The focus is then lost, moved up to the top of the panel.

I am not sure if that is a bad thing, because after you run the tests, you will likely want to go through the results, and not run the tests again. If you were to run the tests again, you probably would do so after making changes or interacting with the component, which will make you lose keyboard focus anyway.

What do you think is the right approach here?

[msftedad]

Hi @yannbf, Thanks for the information. We will connect with the PO team and will get back to you soon.

[yannbf]

Thank you @msftedad, eager to hear back!