search

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
83.97k stars 9.23k forks source link

[Bug]: unable to change the background of the preview by using keyboard. #25805

Closed msftedad closed 5 months ago

msftedad commented 7 months ago

Describe the bug

While expanding the "tab list" the keyboard focus moving to the "components" button.

To Reproduce

1.open the URL " Overview - Docs ⋅ Storybook (windows.net)". 2.Navigate to the "Viva web typography" in the left pane and expand it. 3.observe the keyboard focus after "skip to side bar".

System

Actual Results:
After hitting tab key from the "skip to side bar" keyboard focus moving to the non inter active element.
Expected Results:   
After hitting tab key from the "skip to side bar" keyboard focus moves to the interactive element in the page.

Additional context

focus lost after tabbing from 'skip to sidebar'_edit_0 (1).webm keyboard focus moving to the non inter active element.webm

maudem commented 6 months ago

I'd like to pick this issue up

JReinhold commented 5 months ago

I think this is intended behavior. The element following "Skip to sidebar" in the focus sequence is the iframe that has the preview (stories/docs). That is the one being focused automatically by the browser - even though the iframe might not contain interactive elements.

If this didn't happen the user would have no way to focus the preview, which would make it impossible to scroll the preview with the keyboard when necessary.

According to HTML Standards, iframe is a focusable area so it should get focus when appropriate. See "Example" at https://html.spec.whatwg.org/multipage/interaction.html#data-model

I'm not an expert on this but I think the focus behavior is controlled by the browser, and while we could explicitly attempt to remove the iframe from the focus sequence with some heuristics, I don't think we should as that would probably lead to more severe bugs in other edge cases where we can't detect the content properly.