search

storybookjs / storybook

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

Alt + Left keyboard shortcut doesn't really work #12784

Open kaiyoma opened 4 years ago

kaiyoma commented 4 years ago

Describe the bug The Alt + Left keyboard shortcut doesn't really work well. It goes to the previous story, but then immediately switches back to the current story. It also conflicts with the browser itself, which uses the same shortcut for navigating backwards.

This was filed previously as issue #8759 but nothing ever happened with it.

To Reproduce Steps to reproduce the behavior:

  1. Press Alt + Left and watch the weirdness.

Expected behavior Storybook should navigate to the previous story.

System

Environment Info:

  System:
    OS: Windows 10 10.0.19041
    CPU: (4) x64 Intel(R) Core(TM) i7-6600U CPU @ 2.60GHz
  Binaries:
    Node: 12.16.1 - C:\Program Files\Node.js\node.EXE
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.13.4 - C:\Program Files\Node.js\npm.CMD
  Browsers:
    Chrome: 86.0.4240.75
    Edge: Spartan (44.19041.423.0), Chromium (86.0.622.38)
  npmPackages:
    @storybook/addon-actions: 6.0.26 => 6.0.26
    @storybook/addon-knobs: 6.0.26 => 6.0.26
    @storybook/addons: 6.0.26 => 6.0.26
    @storybook/core: 6.0.26 => 6.0.26
    @storybook/react: 6.0.26 => 6.0.26
    @storybook/theming: 6.0.26 => 6.0.26
shilman commented 4 years ago

This appears to be working well for me in 6.1-alpha. Can you verify on your machine/browser?

https://next--storybookjs.netlify.app/official-storybook/?path=/story/addons-a11y-basebutton--invalid-contrast

kaiyoma commented 4 years ago

No, it's definitely still an issue. I can repro this problem on your own Storybook deploy:

https://next--storybookjs.netlify.app/official-storybook/

Click around to a few stories, then use Alt + Left and Alt + Right to try to navigate. You should encounter the bad behavior really easily. I can repro by loading the page, opening a story group, clicking to the last story, then trying to use Alt + Left to navigate.

kaiyoma commented 4 years ago

Here's a screencast:

storybook-keyboard-navigation

In the video, I first use Alt + Right to navigate forwards, which is fine, but then you can see what happens when I try to use Alt + Left to go back. The app "fights" me and tries to go forward to the current story.

shilman commented 4 years ago

@kaiyoma what browser are you using? does it happen in all browsers? in the specific repro you're showing, the accessibility tab is selected (as dictated by those A11y stories. can you repro on other stories in the same storybook where a different tab is selected? I ask because the A11y addon is running a check on the DOM with each render, which could potentially slow down the responsiveness of the app. I'm generally not able to reproduce the problem.

kaiyoma commented 4 years ago

Happens all the time in Chrome 86 on Windows 10, but doesn't happen in the same browser in macOS. Maybe an OS-specific issue? The comments in the other (stale) thread mentioned that Storybook's keyboard shortcut interferes with the one already in use by the browser.

I can repro this problem in my project's own Storybook deployment, so I don't think it's related to your a11y stories.

shilman commented 4 years ago

Thanks for the clarification @kaiyoma . @ghengeveld @tooppaaa is this something you can look into as part of the sidebar work?

ghengeveld commented 3 years ago

Most likely a Windows-only issue. We should probably use a different keyboard shortcut on Windows. @kaiyoma any suggestions? I hardly ever use Windows so I have no idea what makes sense there.

mvz commented 3 years ago

This shortcut interferes with history back in Firefox on Linux as well.