UI: Add skip to canvas/sidebar links

[darleendenno]

Issue: #4667

It is currently quite difficult to test the screen reader accessibility of a component, as you need to navigate past all of the navigation links and then step into the iframe to interact with the component.

What I did

Added three separate links to improve keyboard navigation around Storybook. All links are only visible on keyboard focus.

1. sidebar/Heading - this link should be the first tabbed content after the address bar; takes the user to the canvas
   • now accepts a skipLinkHref prop to determine when a skip link should render
2. sidebar/Tree - this link is visible when a story is selected and focused; takes the user to the canvas
3. preview/FramesRenderer - this link takes the user back to the sidebar

I also added the option to override theme on a per-story basis via global/parameters

Screenshots

Only using keyboard (TAB and then ENTER) to navigate between the sidebar and iframe

What I did not do

• Improve the entirety of keyboard navigation for Storybook. This is just a small improvement and should stay as such.
• Make this available for mobile navigation -- that's an entirely different mountain to climb

How to test

• Open the Storybook available on this PR (see the status check links at the bottom)
• Use a screen reader and attempt to navigate to the iframe; is this easier than the baseline?
• Use a keyboard to navigate between stories, the sidebar, and the canvas; is this easier than the baseline?
• Check out Tree & Heading stories (additional play functionality added 🧪 )

---

• Is this testable with Jest or Chromatic screenshots? Yes, additional stories added
• Does this need a new example in the kitchen sink apps? No
• Does this need an update to the documentation? No

Questions from the authors (seeking a11y community members for comment)

• How can this be improved upon?
• Is there any desire to improve the navigation relationship between sidebar/canvas and the addon panel?

Shoutouts

Thank you to @smithambera, @yannbf, @MichaelArestad, and @ndelangen for your wise collaboration ❤️

[nx-cloud]

Nx Cloud Report

CI ran the following commands for commit 5455df4. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

Status	Command
	nx run-many --target=prepare --all --parallel --max-parallel=15

---

Sent with 💌 from NxCloud.

[nx-cloud]

Nx Cloud Report

We didn't find any information for the current pull request with the commit 349eb16.
You might need to set the 'NX_BRANCH' environment variable in your CI pipeline.

Check the Nx Cloud Github Integration documentation for more information.

---

Sent with 💌 from NxCloud.

[shilman]

Looking great @darleendenno -- there are a couple rendering errors in Chromatic, can you take a look?

[darleendenno]

Looking great @darleendenno -- there are a couple rendering errors in Chromatic, can you take a look?

@shilman both of these errors are in components using the new play functionality -- does chromatic support those interactions?

[shilman]

@darleendenno Chromatic does not officially support play, but in practice it should work. Something funny is going on here and there are two instances of data-testid="heading--skip" on the page so TestingLib is throwing an error. I'm not sure why yet, but will see if I can repro on my local machine

[darleendenno]

@darleendenno Chromatic does not officially support play, but in practice it should work. Something funny is going on here and there are two instances of data-testid="heading--skip" on the page so TestingLib is throwing an error. I'm not sure why yet, but will see if I can repro on my local machine

I see now -- I'll fix it up today. May need a delay or some syntax refactoring. Thanks for catching!

[MichaelArestad]

Looking good! Thank you for making this happen!

Almost all the buttons worked as expected. The exception is the one in the canvas:

I can't get it to work. I tried return, space, and clicking with no luck.

I also noticed that I can trigger that button twice. Try shift + tab and tab around it.

FF latest. Mac latest.

[shilman]

Great job--looking fantastic! 💯

[darleendenno]

Great job--looking fantastic! 💯

Thank you!! I have one more thing to fix up with theming per @domyen but I am hoping to have it ready early next week 🙏

[yannbf]

Super nice @darleendenno! Works great both in normal keyboard navigation as well as with Voice Over 👌

[darleendenno]

Ok this is ready for re-review & merging. Let me know what you think @ghengeveld ❤️

[MichaelArestad]

I'm having trouble getting the skip to sidebar button to work with keyboard or by clicking on FF Mac latest. Any ideas?

[darleendenno]

I'm having trouble getting the skip to sidebar button to work with keyboard or by clicking on FF Mac latest. Any ideas?

I’ve been having issues on initial render as well. Refresh and try again. May have to file an issue or get some help figuring out why that’s happening.

[MichaelArestad]

IT WORKS! Nice work. I had only one minor suggestion. Thanks for making this happen.

[mt-deva]

How can I disable this? For me, it just appears as a 'skip to canvas' button that when clicked moves down 200px and does nothing

Edit:

// manager-head.html
<style>
    .sidebar-header > a {
        display: none;
    }
</style>

[MichaelArestad]

@callamwilliams
Can you share an example of this happening? I would love to get it fixed.

[adamnel]

Here's an example of it happening for us https://covalent.teradata.lol

[MichaelArestad]

@adamnel It looks like one of your custom styles made this button visible all the time:

By default, it will not appear unless using keyboard navigation:

And both actually do send focus to the canvas. There are not always interactive elements in the canvas, but they do work as expected for folks using keyboard nav.

[kharrop]

+1 I'm seeing the above issue where the "Skip to canvas" button is displaying by default after upgrading to the latest version.

[yairEO]

I have seen this for months also, now I'm on Storybook version 6.5.13 with a custom brand logo set in manager.js

const theme = create({
    base: 'light',
    brandTitle: 'CatalogONE',
    brandImage: 'https://www.amdocs.com/sites/default/files/2022-03/Amdocs-Catalog.png',
})

addons.setConfig({
  isFullscreen: false,
  showNav: true,
  showPanel: true,
  panelPosition: 'bottom',
  enableShortcuts: false,
  isToolshown: true,
  theme,
  selectedPanel: undefined,
  initialActive: 'sidebar',
  sidebar: {
    showRoots: false,
    collapsedRoots: ['other'],
  },
  toolbar: {
    title: { hidden: false, },
    zoom: { hidden: false, },
    eject: { hidden: false, },
    copy: { hidden: false, },
    fullscreen: { hidden: false, },
  },
});

It's especially visible when the sidebar is expanded:

sb-jump-to-canvas-button-always-visible.mp4

---

Had to resort fixing it in .storybook\manager-head.html:

<style>
/* hide annoying "skip to canvas" button which is rendered over the logo (brand) image  */
.sidebar-header > a {
    display: none;
}
</style>