From af0e6a3e55ebf83900fbd87caaf478af89616f66 Mon Sep 17 00:00:00 2001
From: Deen Denno <darleendenno@gmail.com>
Date: Sun, 25 Jul 2021 17:45:16 -0500
Subject: [PATCH 01/21] feat(wip): skip to content/sidebar links

---
 .../src/components/preview/FramesRenderer.tsx | 17 ++++-
 .../components/sidebar/Heading.stories.tsx    |  9 +++
 lib/ui/src/components/sidebar/Heading.tsx     | 23 ++++++
 .../src/components/sidebar/Tree.stories.tsx   | 19 +++++
 lib/ui/src/components/sidebar/Tree.tsx        | 72 +++++++++++++------
 .../components/sidebar/TreeNode.stories.tsx   |  3 +
 lib/ui/src/components/sidebar/TreeNode.tsx    |  3 +-
 7 files changed, 124 insertions(+), 22 deletions(-)

diff --git a/lib/ui/src/components/preview/FramesRenderer.tsx b/lib/ui/src/components/preview/FramesRenderer.tsx
index f441a74bd8c..9695b985146 100644
--- a/lib/ui/src/components/preview/FramesRenderer.tsx
+++ b/lib/ui/src/components/preview/FramesRenderer.tsx
@@ -1,5 +1,6 @@
 import React, { Fragment, FunctionComponent, useMemo, useEffect, useState } from 'react';
-import { Global, CSSObject } from '@storybook/theming';
+import { Button } from '@storybook/components';
+import { Global, CSSObject, styled } from '@storybook/theming';
 import { IFrame } from './iframe';
 import { FramesRendererProps } from './utils/types';
 import { stringifyQueryParams } from './utils/stringifyQueryParams';
@@ -12,6 +13,17 @@ const getActive = (refId: FramesRendererProps['refId']) => {
   return 'storybook-preview-iframe';
 };
 
+const SkipToContentLink = styled(Button)(({ theme }) => ({
+  position: 'absolute',
+  top: '10px',
+  right: '15px',
+  padding: '10px 15px',
+  fontSize: theme.typography.size.s1,
+  '&:focus': {
+    zIndex: 2,
+  },
+}));
+
 export const FramesRenderer: FunctionComponent<FramesRendererProps> = ({
   refs,
   story,
@@ -74,6 +86,9 @@ export const FramesRenderer: FunctionComponent<FramesRendererProps> = ({
       <Global styles={styles} />
       {Object.entries(frames).map(([id, src]) => (
         <Fragment key={id}>
+          <SkipToContentLink secondary isLink tabIndex={0} href={`#${storyId}`}>
+            Skip to sidebar
+          </SkipToContentLink>
           <IFrame
             active={id === active}
             key={refs[id] ? refs[id].url : id}
diff --git a/lib/ui/src/components/sidebar/Heading.stories.tsx b/lib/ui/src/components/sidebar/Heading.stories.tsx
index a0f2f1243a0..ed15c93a653 100644
--- a/lib/ui/src/components/sidebar/Heading.stories.tsx
+++ b/lib/ui/src/components/sidebar/Heading.stories.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { ThemeProvider, useTheme, Theme } from '@storybook/theming';
 import { action } from '@storybook/addon-actions';
+import { screen } from '@testing-library/dom';
 
 import { Heading } from './Heading';
 
@@ -185,3 +186,11 @@ export const noBrand = () => {
     </ThemeProvider>
   );
 };
+
+export const skipLinkFocused = {
+  args: { menu: menuItems },
+  decorators: [
+    (storyFn: any) => <div style={{ padding: '20px', maxWidth: '230px' }}>{storyFn()}</div>,
+  ],
+  play: () => screen.getByTestId('header-skip').focus(),
+};
diff --git a/lib/ui/src/components/sidebar/Heading.tsx b/lib/ui/src/components/sidebar/Heading.tsx
index 4aeb4c1dc11..8e0881d23cd 100644
--- a/lib/ui/src/components/sidebar/Heading.tsx
+++ b/lib/ui/src/components/sidebar/Heading.tsx
@@ -1,5 +1,6 @@
 import React, { FunctionComponent, ComponentProps } from 'react';
 import { styled } from '@storybook/theming';
+import { Button } from '@storybook/components';
 
 import { Brand } from './Brand';
 import { SidebarMenu, MenuList } from './Menu';
@@ -34,6 +35,18 @@ const HeadingWrapper = styled.div({
   position: 'relative',
 });
 
+const SkipToContentLink = styled(Button)(({ theme }) => ({
+  position: 'absolute',
+  width: '100%',
+  padding: '10px 15px',
+  fontSize: theme.typography.size.s1,
+  zIndex: 1,
+  transform: 'translate(0,-100px)',
+  '&:hover,&:focus': {
+    transform: 'translate(0,-10px)',
+  },
+}));
+
 export const Heading: FunctionComponent<HeadingProps & ComponentProps<typeof HeadingWrapper>> = ({
   menuHighlighted = false,
   menu,
@@ -45,6 +58,16 @@ export const Heading: FunctionComponent<HeadingProps & ComponentProps<typeof Hea
         <Brand />
       </BrandArea>
 
+      <SkipToContentLink
+        secondary
+        isLink
+        tabIndex={0}
+        data-testid="header-skip"
+        href="#storybook-preview-iframe"
+      >
+        Skip to story
+      </SkipToContentLink>
+
       <SidebarMenu menu={menu} isHighlighted={menuHighlighted} />
     </HeadingWrapper>
   );
diff --git a/lib/ui/src/components/sidebar/Tree.stories.tsx b/lib/ui/src/components/sidebar/Tree.stories.tsx
index 40d7fa161c0..a87cda9ffd6 100644
--- a/lib/ui/src/components/sidebar/Tree.stories.tsx
+++ b/lib/ui/src/components/sidebar/Tree.stories.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import type { StoriesHash } from '@storybook/api';
+import { screen } from '@testing-library/dom';
 
 import { Tree } from './Tree';
 import { stories } from './mockdata.large';
@@ -95,3 +96,21 @@ export const SingleStoryComponents = () => {
     />
   );
 };
+
+// node must be selected, highlighted, and focused
+// in order to tab to 'Skip to content' link
+export const SkipToContentInteraction = {
+  args: {
+    isBrowsing: true,
+    isMain: true,
+    refId,
+    data: stories,
+    highlightedRef: { current: { itemId: 'tooltip-tooltipbuildlist--default', refId } },
+    setHighlightedItemId: log,
+    selectedStoryId: 'tooltip-tooltipbuildlist--default',
+    onSelectStoryId: () => {},
+  },
+  play: () => {
+    screen.getByTestId('node--skip').focus();
+  },
+};
diff --git a/lib/ui/src/components/sidebar/Tree.tsx b/lib/ui/src/components/sidebar/Tree.tsx
index ec2b0c6b2c5..7b37b19a334 100644
--- a/lib/ui/src/components/sidebar/Tree.tsx
+++ b/lib/ui/src/components/sidebar/Tree.tsx
@@ -1,7 +1,7 @@
 import type { Group, Story, StoriesHash } from '@storybook/api';
 import { isRoot, isStory } from '@storybook/api';
 import { styled } from '@storybook/theming';
-import { Icons } from '@storybook/components';
+import { Button, Icons } from '@storybook/components';
 import { transparentize } from 'polished';
 import React, { MutableRefObject, useCallback, useMemo, useRef } from 'react';
 
@@ -98,6 +98,24 @@ const CollapseButton = styled.button(({ theme }) => ({
   },
 }));
 
+const LeafNodeStyleWrapper = styled.div(({ theme }) => ({
+  position: 'relative',
+}));
+
+const SkipToContentLink = styled(Button)(({ theme }) => ({
+  position: 'absolute',
+  top: 1,
+  right: 20,
+  zIndex: -1,
+  height: '20px',
+  fontSize: '10px',
+  padding: '5px 10px',
+  '&:focus': {
+    background: 'white',
+    zIndex: 1,
+  },
+}));
+
 interface NodeProps {
   item: Item;
   refId: string;
@@ -130,25 +148,39 @@ const Node = React.memo<NodeProps>(
     if (isStory(item)) {
       const LeafNode = item.isComponent ? DocumentNode : StoryNode;
       return (
-        <LeafNode
-          key={id}
-          id={id}
-          className="sidebar-item"
-          data-ref-id={refId}
-          data-item-id={item.id}
-          data-parent-id={item.parent}
-          data-nodetype={item.isComponent ? 'document' : 'story'}
-          data-selected={isSelected}
-          data-highlightable={isDisplayed}
-          depth={isOrphan ? item.depth : item.depth - 1}
-          href={getLink(item.id, refId)}
-          onClick={(event) => {
-            event.preventDefault();
-            onSelectStoryId(item.id);
-          }}
-        >
-          {item.renderLabel?.(item) || item.name}
-        </LeafNode>
+        <LeafNodeStyleWrapper>
+          <LeafNode
+            key={id}
+            id={id}
+            className="sidebar-item"
+            data-ref-id={refId}
+            data-item-id={item.id}
+            data-parent-id={item.parent}
+            data-nodetype={item.isComponent ? 'document' : 'story'}
+            data-selected={isSelected}
+            data-highlightable={isDisplayed}
+            depth={isOrphan ? item.depth : item.depth - 1}
+            href={getLink(item.id, refId)}
+            onClick={(event) => {
+              event.preventDefault();
+              onSelectStoryId(item.id);
+            }}
+          >
+            {item.renderLabel?.(item) || item.name}
+          </LeafNode>
+          {isSelected && (
+            <SkipToContentLink
+              secondary
+              outline
+              isLink
+              tabIndex={0}
+              href="#storybook-preview-iframe"
+              data-testid="node--skip"
+            >
+              Skip to content
+            </SkipToContentLink>
+          )}
+        </LeafNodeStyleWrapper>
       );
     }
 
diff --git a/lib/ui/src/components/sidebar/TreeNode.stories.tsx b/lib/ui/src/components/sidebar/TreeNode.stories.tsx
index 9ef79f3c468..e33ec2d67bd 100644
--- a/lib/ui/src/components/sidebar/TreeNode.stories.tsx
+++ b/lib/ui/src/components/sidebar/TreeNode.stories.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { screen } from '@testing-library/dom';
 import { HighlightStyles } from './HighlightStyles';
 
 import { ComponentNode, DocumentNode, GroupNode, StoryNode } from './TreeNode';
@@ -6,6 +8,7 @@ import { ComponentNode, DocumentNode, GroupNode, StoryNode } from './TreeNode';
 export default {
   title: 'UI/Sidebar/TreeNode',
   parameters: { layout: 'fullscreen' },
+  component: StoryNode,
 };
 
 export const Types = () => (
diff --git a/lib/ui/src/components/sidebar/TreeNode.tsx b/lib/ui/src/components/sidebar/TreeNode.tsx
index ca295f3356a..109ca245f5e 100644
--- a/lib/ui/src/components/sidebar/TreeNode.tsx
+++ b/lib/ui/src/components/sidebar/TreeNode.tsx
@@ -57,6 +57,7 @@ const BranchNode = styled.button<{
   isExpandable?: boolean;
   isExpanded?: boolean;
   isComponent?: boolean;
+  isSelected?: boolean;
 }>(({ theme, depth = 0, isExpandable = false }) => ({
   width: '100%',
   border: 'none',
@@ -151,7 +152,7 @@ export const GroupNode: FunctionComponent<
 ));
 
 export const ComponentNode: FunctionComponent<ComponentProps<typeof BranchNode>> = React.memo(
-  ({ theme, children, isExpanded, isExpandable, ...props }) => (
+  ({ theme, children, isExpanded, isExpandable, isSelected, ...props }) => (
     <BranchNode isExpandable={isExpandable} tabIndex={-1} {...props}>
       {isExpandable && <CollapseIcon isExpanded={isExpanded} />}
       <TypeIcon symbol="component" color="secondary" />

From 65513917453253807dbbd743b92b0c9b812e2826 Mon Sep 17 00:00:00 2001
From: Deen Denno <darleendenno@gmail.com>
Date: Mon, 26 Jul 2021 14:12:13 -0500
Subject: [PATCH 02/21] styles: update link text and positioning

---
 lib/ui/src/components/preview/FramesRenderer.tsx |  4 +++-
 lib/ui/src/components/sidebar/Heading.tsx        | 12 ++++++------
 lib/ui/src/components/sidebar/Tree.tsx           |  7 +++----
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/lib/ui/src/components/preview/FramesRenderer.tsx b/lib/ui/src/components/preview/FramesRenderer.tsx
index 9695b985146..d5bbaa71a5a 100644
--- a/lib/ui/src/components/preview/FramesRenderer.tsx
+++ b/lib/ui/src/components/preview/FramesRenderer.tsx
@@ -19,8 +19,10 @@ const SkipToContentLink = styled(Button)(({ theme }) => ({
   right: '15px',
   padding: '10px 15px',
   fontSize: theme.typography.size.s1,
+  transform: 'translateY(-100px)',
   '&:focus': {
-    zIndex: 2,
+    transform: 'translateY(0)',
+    zIndex: 1,
   },
 }));
 
diff --git a/lib/ui/src/components/sidebar/Heading.tsx b/lib/ui/src/components/sidebar/Heading.tsx
index 8e0881d23cd..ee80911bc92 100644
--- a/lib/ui/src/components/sidebar/Heading.tsx
+++ b/lib/ui/src/components/sidebar/Heading.tsx
@@ -42,7 +42,7 @@ const SkipToContentLink = styled(Button)(({ theme }) => ({
   fontSize: theme.typography.size.s1,
   zIndex: 1,
   transform: 'translate(0,-100px)',
-  '&:hover,&:focus': {
+  '&:focus': {
     transform: 'translate(0,-10px)',
   },
 }));
@@ -54,10 +54,6 @@ export const Heading: FunctionComponent<HeadingProps & ComponentProps<typeof Hea
 }) => {
   return (
     <HeadingWrapper {...props}>
-      <BrandArea>
-        <Brand />
-      </BrandArea>
-
       <SkipToContentLink
         secondary
         isLink
@@ -65,9 +61,13 @@ export const Heading: FunctionComponent<HeadingProps & ComponentProps<typeof Hea
         data-testid="header-skip"
         href="#storybook-preview-iframe"
       >
-        Skip to story
+        Skip to canvas
       </SkipToContentLink>
 
+      <BrandArea>
+        <Brand />
+      </BrandArea>
+
       <SidebarMenu menu={menu} isHighlighted={menuHighlighted} />
     </HeadingWrapper>
   );
diff --git a/lib/ui/src/components/sidebar/Tree.tsx b/lib/ui/src/components/sidebar/Tree.tsx
index 7b37b19a334..ce9ce35a672 100644
--- a/lib/ui/src/components/sidebar/Tree.tsx
+++ b/lib/ui/src/components/sidebar/Tree.tsx
@@ -106,13 +106,13 @@ const SkipToContentLink = styled(Button)(({ theme }) => ({
   position: 'absolute',
   top: 1,
   right: 20,
-  zIndex: -1,
   height: '20px',
   fontSize: '10px',
   padding: '5px 10px',
+  transform: 'translateX(100px)',
   '&:focus': {
     background: 'white',
-    zIndex: 1,
+    transform: 'translateX(0)',
   },
 }));
 
@@ -173,11 +173,10 @@ const Node = React.memo<NodeProps>(
               secondary
               outline
               isLink
-              tabIndex={0}
               href="#storybook-preview-iframe"
               data-testid="node--skip"
             >
-              Skip to content
+              Skip to canvas
             </SkipToContentLink>
           )}
         </LeafNodeStyleWrapper>

From 9ba5a6b2c5f59ca294a4334d5c609af02ad54b6a Mon Sep 17 00:00:00 2001
From: Deen Denno <darleendenno@gmail.com>
Date: Tue, 27 Jul 2021 09:35:09 -0500
Subject: [PATCH 03/21] refactor: respect enter event for skip links within
 tree nodes

---
 lib/ui/src/components/sidebar/Tree.tsx          |  1 +
 lib/ui/src/components/sidebar/useHighlighted.ts | 14 +++++++++++++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/lib/ui/src/components/sidebar/Tree.tsx b/lib/ui/src/components/sidebar/Tree.tsx
index ce9ce35a672..118ab698a69 100644
--- a/lib/ui/src/components/sidebar/Tree.tsx
+++ b/lib/ui/src/components/sidebar/Tree.tsx
@@ -173,6 +173,7 @@ const Node = React.memo<NodeProps>(
               secondary
               outline
               isLink
+              tabIndex={0}
               href="#storybook-preview-iframe"
               data-testid="node--skip"
             >
diff --git a/lib/ui/src/components/sidebar/useHighlighted.ts b/lib/ui/src/components/sidebar/useHighlighted.ts
index 8c87e56805a..f3df306e744 100644
--- a/lib/ui/src/components/sidebar/useHighlighted.ts
+++ b/lib/ui/src/components/sidebar/useHighlighted.ts
@@ -82,11 +82,24 @@ export const useHighlighted = ({
 
     let lastRequestId: number;
     const navigateTree = (event: KeyboardEvent) => {
+      const target = event.target as Element;
+
       if (isLoading || !isBrowsing || !containerRef.current) return; // allow event.repeat
       if (!matchesModifiers(false, event)) return;
 
       const isArrowUp = matchesKeyCode('ArrowUp', event);
       const isArrowDown = matchesKeyCode('ArrowDown', event);
+      const isEnter = matchesKeyCode('Enter', event);
+
+      // ensure skip-to-content links in tree nodes are respected
+      if (
+        !!isEnter &&
+        target.hasAttribute('data-testid') &&
+        target.getAttribute('data-testid') === 'node--skip' // move to constant?
+      ) {
+        globalWindow.location.href = target.getAttribute('href');
+      }
+
       if (!(isArrowUp || isArrowDown)) return;
       event.preventDefault();
 
@@ -94,7 +107,6 @@ export const useHighlighted = ({
         globalWindow.cancelAnimationFrame(lastRequestId);
         lastRequestId = requestId;
 
-        const target = event.target as Element;
         if (!isAncestor(menuElement, target) && !isAncestor(target, menuElement)) return;
         if (target.hasAttribute('data-action')) (target as HTMLButtonElement).blur();
 

From 69591b26e6866ec42889c9cb1f3f180a0ce4f25a Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Tue, 27 Jul 2021 23:11:01 +0200
Subject: [PATCH 04/21] fix: allow events to bubble up in sidebar items

- In order to allow better navigation, the events can't be prevented.
- One should be able to navigate from keyboard or voiceover without issues.
---
 lib/ui/src/components/sidebar/Tree.tsx          |  1 -
 lib/ui/src/components/sidebar/useExpanded.ts    |  2 --
 lib/ui/src/components/sidebar/useHighlighted.ts | 10 ----------
 3 files changed, 13 deletions(-)

diff --git a/lib/ui/src/components/sidebar/Tree.tsx b/lib/ui/src/components/sidebar/Tree.tsx
index 118ab698a69..ce9ce35a672 100644
--- a/lib/ui/src/components/sidebar/Tree.tsx
+++ b/lib/ui/src/components/sidebar/Tree.tsx
@@ -173,7 +173,6 @@ const Node = React.memo<NodeProps>(
               secondary
               outline
               isLink
-              tabIndex={0}
               href="#storybook-preview-iframe"
               data-testid="node--skip"
             >
diff --git a/lib/ui/src/components/sidebar/useExpanded.ts b/lib/ui/src/components/sidebar/useExpanded.ts
index a0098d7ecb7..cf97c8b0320 100644
--- a/lib/ui/src/components/sidebar/useExpanded.ts
+++ b/lib/ui/src/components/sidebar/useExpanded.ts
@@ -167,8 +167,6 @@ export const useExpanded = ({
         (target as HTMLButtonElement).blur();
       }
 
-      event.preventDefault();
-
       const type = highlightedElement.getAttribute('data-nodetype');
       if ((isEnter || isSpace) && ['component', 'story', 'document'].includes(type)) {
         onSelectStoryId(highlightedItemId);
diff --git a/lib/ui/src/components/sidebar/useHighlighted.ts b/lib/ui/src/components/sidebar/useHighlighted.ts
index f3df306e744..b5e89cbd1e9 100644
--- a/lib/ui/src/components/sidebar/useHighlighted.ts
+++ b/lib/ui/src/components/sidebar/useHighlighted.ts
@@ -89,16 +89,6 @@ export const useHighlighted = ({
 
       const isArrowUp = matchesKeyCode('ArrowUp', event);
       const isArrowDown = matchesKeyCode('ArrowDown', event);
-      const isEnter = matchesKeyCode('Enter', event);
-
-      // ensure skip-to-content links in tree nodes are respected
-      if (
-        !!isEnter &&
-        target.hasAttribute('data-testid') &&
-        target.getAttribute('data-testid') === 'node--skip' // move to constant?
-      ) {
-        globalWindow.location.href = target.getAttribute('href');
-      }
 
       if (!(isArrowUp || isArrowDown)) return;
       event.preventDefault();

From e873a3e98bf5c02e81ed83ccc06dbab5c0d8add4 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Tue, 27 Jul 2021 23:30:07 +0200
Subject: [PATCH 05/21] chore(heading): add story types

- also replace the decorator for a padded layout
---
 .../components/sidebar/Heading.stories.tsx    | 33 ++++++++++---------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/lib/ui/src/components/sidebar/Heading.stories.tsx b/lib/ui/src/components/sidebar/Heading.stories.tsx
index ed15c93a653..e3cab74664e 100644
--- a/lib/ui/src/components/sidebar/Heading.stories.tsx
+++ b/lib/ui/src/components/sidebar/Heading.stories.tsx
@@ -1,19 +1,22 @@
 import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { ThemeProvider, useTheme, Theme } from '@storybook/theming';
 import { action } from '@storybook/addon-actions';
 import { screen } from '@testing-library/dom';
 
 import { Heading } from './Heading';
 
+type Story = ComponentStory<typeof Heading>;
+
 export default {
   component: Heading,
   title: 'UI/Sidebar/Heading',
   excludeStories: /.*Data$/,
   parameters: { layout: 'fullscreen' },
   decorators: [
-    (storyFn: any) => <div style={{ padding: '0 20px', maxWidth: '230px' }}>{storyFn()}</div>,
+    (storyFn) => <div style={{ padding: '0 20px', maxWidth: '230px' }}>{storyFn()}</div>,
   ],
-};
+} as ComponentMeta<typeof Heading>;
 
 const menuItems = [
   { title: 'Menu Item 1', onClick: action('onActivateMenuItem'), id: '1' },
@@ -21,11 +24,11 @@ const menuItems = [
   { title: 'Menu Item 3', onClick: action('onActivateMenuItem'), id: '3' },
 ];
 
-export const menuHighlighted = () => <Heading menuHighlighted menu={menuItems} />;
+export const menuHighlighted: Story = () => <Heading menuHighlighted menu={menuItems} />;
 
 export const standardData = { menu: menuItems };
 
-export const standard = () => {
+export const standard: Story = () => {
   const theme = useTheme() as Theme;
   return (
     <ThemeProvider
@@ -43,7 +46,7 @@ export const standard = () => {
   );
 };
 
-export const standardNoLink = () => {
+export const standardNoLink: Story = () => {
   const theme = useTheme() as Theme;
   return (
     <ThemeProvider
@@ -61,7 +64,7 @@ export const standardNoLink = () => {
   );
 };
 
-export const linkAndText = () => {
+export const linkAndText: Story = () => {
   const theme = useTheme() as Theme;
   return (
     <ThemeProvider
@@ -79,7 +82,7 @@ export const linkAndText = () => {
   );
 };
 
-export const onlyText = () => {
+export const onlyText: Story = () => {
   const theme = useTheme() as Theme;
   return (
     <ThemeProvider
@@ -97,7 +100,7 @@ export const onlyText = () => {
   );
 };
 
-export const longText = () => {
+export const longText: Story = () => {
   const theme = useTheme() as Theme;
   return (
     <ThemeProvider
@@ -115,7 +118,7 @@ export const longText = () => {
   );
 };
 
-export const customBrandImage = () => {
+export const customBrandImage: Story = () => {
   const theme = useTheme() as Theme;
   return (
     <ThemeProvider
@@ -133,7 +136,7 @@ export const customBrandImage = () => {
   );
 };
 
-export const customBrandImageTall = () => {
+export const customBrandImageTall: Story = () => {
   const theme = useTheme() as Theme;
   return (
     <ThemeProvider
@@ -151,7 +154,7 @@ export const customBrandImageTall = () => {
   );
 };
 
-export const customBrandImageUnsizedSVG = () => {
+export const customBrandImageUnsizedSVG: Story = () => {
   const theme = useTheme() as Theme;
   return (
     <ThemeProvider
@@ -169,7 +172,7 @@ export const customBrandImageUnsizedSVG = () => {
   );
 };
 
-export const noBrand = () => {
+export const noBrand: Story = () => {
   const theme = useTheme() as Theme;
   return (
     <ThemeProvider
@@ -187,10 +190,8 @@ export const noBrand = () => {
   );
 };
 
-export const skipLinkFocused = {
+export const skipLinkFocused: Story = {
   args: { menu: menuItems },
-  decorators: [
-    (storyFn: any) => <div style={{ padding: '20px', maxWidth: '230px' }}>{storyFn()}</div>,
-  ],
+  parameters: { layout: 'padded' },
   play: () => screen.getByTestId('header-skip').focus(),
 };

From e9fd619b1bdf6d469bb71b01f2f5d91a8b2e9fdd Mon Sep 17 00:00:00 2001
From: Deen Denno <darleendenno@gmail.com>
Date: Thu, 29 Jul 2021 15:10:04 -0500
Subject: [PATCH 06/21] fix: tree node skip styles and destination links

---
 lib/ui/src/components/sidebar/Heading.stories.tsx | 2 +-
 lib/ui/src/components/sidebar/Heading.tsx         | 4 ++--
 lib/ui/src/components/sidebar/Tree.tsx            | 6 +++---
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/lib/ui/src/components/sidebar/Heading.stories.tsx b/lib/ui/src/components/sidebar/Heading.stories.tsx
index e3cab74664e..4bba57b1d3d 100644
--- a/lib/ui/src/components/sidebar/Heading.stories.tsx
+++ b/lib/ui/src/components/sidebar/Heading.stories.tsx
@@ -193,5 +193,5 @@ export const noBrand: Story = () => {
 export const skipLinkFocused: Story = {
   args: { menu: menuItems },
   parameters: { layout: 'padded' },
-  play: () => screen.getByTestId('header-skip').focus(),
+  play: () => screen.getByTestId('heading--skip').focus(),
 };
diff --git a/lib/ui/src/components/sidebar/Heading.tsx b/lib/ui/src/components/sidebar/Heading.tsx
index ee80911bc92..90f52838fb3 100644
--- a/lib/ui/src/components/sidebar/Heading.tsx
+++ b/lib/ui/src/components/sidebar/Heading.tsx
@@ -58,8 +58,8 @@ export const Heading: FunctionComponent<HeadingProps & ComponentProps<typeof Hea
         secondary
         isLink
         tabIndex={0}
-        data-testid="header-skip"
-        href="#storybook-preview-iframe"
+        data-testid="heading--skip"
+        href="#storybook-preview-wrapper"
       >
         Skip to canvas
       </SkipToContentLink>
diff --git a/lib/ui/src/components/sidebar/Tree.tsx b/lib/ui/src/components/sidebar/Tree.tsx
index ce9ce35a672..a6c0a50691c 100644
--- a/lib/ui/src/components/sidebar/Tree.tsx
+++ b/lib/ui/src/components/sidebar/Tree.tsx
@@ -103,16 +103,16 @@ const LeafNodeStyleWrapper = styled.div(({ theme }) => ({
 }));
 
 const SkipToContentLink = styled(Button)(({ theme }) => ({
+  zIndex: -1,
   position: 'absolute',
   top: 1,
   right: 20,
   height: '20px',
   fontSize: '10px',
   padding: '5px 10px',
-  transform: 'translateX(100px)',
   '&:focus': {
     background: 'white',
-    transform: 'translateX(0)',
+    zIndex: 1,
   },
 }));
 
@@ -173,7 +173,7 @@ const Node = React.memo<NodeProps>(
               secondary
               outline
               isLink
-              href="#storybook-preview-iframe"
+              href="#storybook-preview-wrapper"
               data-testid="node--skip"
             >
               Skip to canvas

From 23e9cd44a7f7c1c5671fe5a76ffbd19febabed30 Mon Sep 17 00:00:00 2001
From: Deen Denno <darleendenno@gmail.com>
Date: Thu, 29 Jul 2021 15:11:05 -0500
Subject: [PATCH 07/21] styles: hide preview skip to content link on mobile

---
 .../src/components/preview/FramesRenderer.tsx | 28 +++++++++++--------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/lib/ui/src/components/preview/FramesRenderer.tsx b/lib/ui/src/components/preview/FramesRenderer.tsx
index d5bbaa71a5a..c4049f829c8 100644
--- a/lib/ui/src/components/preview/FramesRenderer.tsx
+++ b/lib/ui/src/components/preview/FramesRenderer.tsx
@@ -13,18 +13,22 @@ const getActive = (refId: FramesRendererProps['refId']) => {
   return 'storybook-preview-iframe';
 };
 
-const SkipToContentLink = styled(Button)(({ theme }) => ({
-  position: 'absolute',
-  top: '10px',
-  right: '15px',
-  padding: '10px 15px',
-  fontSize: theme.typography.size.s1,
-  transform: 'translateY(-100px)',
-  '&:focus': {
-    transform: 'translateY(0)',
-    zIndex: 1,
-  },
-}));
+const SkipToContentLink = styled(Button)`
+  display: none;
+  @media (min-width: 600px) {
+    display: block;
+    position: absolute;
+    top: 10px;
+    right: 15px;
+    padding: 10px 15px;
+    font-size: ${(props) => props.theme.typography.size.s1};
+    transform: translateY(-100px);
+    &:focus {
+      transform: translateY(0);
+      z-index: 1;
+    }
+  }
+`;
 
 export const FramesRenderer: FunctionComponent<FramesRendererProps> = ({
   refs,

From 2b22a3aa27c2faa25abfe9241e75a20e491a2250 Mon Sep 17 00:00:00 2001
From: Deen Denno <darleendenno@gmail.com>
Date: Mon, 2 Aug 2021 22:42:32 -0500
Subject: [PATCH 08/21] refactor: revert useHighlighted updates

---
 lib/ui/src/components/sidebar/useHighlighted.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/lib/ui/src/components/sidebar/useHighlighted.ts b/lib/ui/src/components/sidebar/useHighlighted.ts
index b5e89cbd1e9..8c87e56805a 100644
--- a/lib/ui/src/components/sidebar/useHighlighted.ts
+++ b/lib/ui/src/components/sidebar/useHighlighted.ts
@@ -82,14 +82,11 @@ export const useHighlighted = ({
 
     let lastRequestId: number;
     const navigateTree = (event: KeyboardEvent) => {
-      const target = event.target as Element;
-
       if (isLoading || !isBrowsing || !containerRef.current) return; // allow event.repeat
       if (!matchesModifiers(false, event)) return;
 
       const isArrowUp = matchesKeyCode('ArrowUp', event);
       const isArrowDown = matchesKeyCode('ArrowDown', event);
-
       if (!(isArrowUp || isArrowDown)) return;
       event.preventDefault();
 
@@ -97,6 +94,7 @@ export const useHighlighted = ({
         globalWindow.cancelAnimationFrame(lastRequestId);
         lastRequestId = requestId;
 
+        const target = event.target as Element;
         if (!isAncestor(menuElement, target) && !isAncestor(target, menuElement)) return;
         if (target.hasAttribute('data-action')) (target as HTMLButtonElement).blur();
 

From 349eb16f2465035cd7bbbea63cf65997411f66bc Mon Sep 17 00:00:00 2001
From: Deen Denno <darleendenno@gmail.com>
Date: Mon, 2 Aug 2021 22:56:21 -0500
Subject: [PATCH 09/21] refactor: semantic naming for stories and components

---
 lib/ui/src/components/preview/FramesRenderer.tsx  | 6 +++---
 lib/ui/src/components/sidebar/Heading.stories.tsx | 2 +-
 lib/ui/src/components/sidebar/Heading.tsx         | 6 +++---
 lib/ui/src/components/sidebar/Tree.stories.tsx    | 4 ++--
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/lib/ui/src/components/preview/FramesRenderer.tsx b/lib/ui/src/components/preview/FramesRenderer.tsx
index c4049f829c8..63c51484127 100644
--- a/lib/ui/src/components/preview/FramesRenderer.tsx
+++ b/lib/ui/src/components/preview/FramesRenderer.tsx
@@ -13,7 +13,7 @@ const getActive = (refId: FramesRendererProps['refId']) => {
   return 'storybook-preview-iframe';
 };
 
-const SkipToContentLink = styled(Button)`
+const SkipToSidebarLink = styled(Button)`
   display: none;
   @media (min-width: 600px) {
     display: block;
@@ -92,9 +92,9 @@ export const FramesRenderer: FunctionComponent<FramesRendererProps> = ({
       <Global styles={styles} />
       {Object.entries(frames).map(([id, src]) => (
         <Fragment key={id}>
-          <SkipToContentLink secondary isLink tabIndex={0} href={`#${storyId}`}>
+          <SkipToSidebarLink secondary isLink tabIndex={0} href={`#${storyId}`}>
             Skip to sidebar
-          </SkipToContentLink>
+          </SkipToSidebarLink>
           <IFrame
             active={id === active}
             key={refs[id] ? refs[id].url : id}
diff --git a/lib/ui/src/components/sidebar/Heading.stories.tsx b/lib/ui/src/components/sidebar/Heading.stories.tsx
index 4bba57b1d3d..e24631bf18f 100644
--- a/lib/ui/src/components/sidebar/Heading.stories.tsx
+++ b/lib/ui/src/components/sidebar/Heading.stories.tsx
@@ -190,7 +190,7 @@ export const noBrand: Story = () => {
   );
 };
 
-export const skipLinkFocused: Story = {
+export const skipToCanvasLinkFocused: Story = {
   args: { menu: menuItems },
   parameters: { layout: 'padded' },
   play: () => screen.getByTestId('heading--skip').focus(),
diff --git a/lib/ui/src/components/sidebar/Heading.tsx b/lib/ui/src/components/sidebar/Heading.tsx
index 90f52838fb3..64ae253a9a9 100644
--- a/lib/ui/src/components/sidebar/Heading.tsx
+++ b/lib/ui/src/components/sidebar/Heading.tsx
@@ -35,7 +35,7 @@ const HeadingWrapper = styled.div({
   position: 'relative',
 });
 
-const SkipToContentLink = styled(Button)(({ theme }) => ({
+const SkipToCanvasLink = styled(Button)(({ theme }) => ({
   position: 'absolute',
   width: '100%',
   padding: '10px 15px',
@@ -54,7 +54,7 @@ export const Heading: FunctionComponent<HeadingProps & ComponentProps<typeof Hea
 }) => {
   return (
     <HeadingWrapper {...props}>
-      <SkipToContentLink
+      <SkipToCanvasLink
         secondary
         isLink
         tabIndex={0}
@@ -62,7 +62,7 @@ export const Heading: FunctionComponent<HeadingProps & ComponentProps<typeof Hea
         href="#storybook-preview-wrapper"
       >
         Skip to canvas
-      </SkipToContentLink>
+      </SkipToCanvasLink>
 
       <BrandArea>
         <Brand />
diff --git a/lib/ui/src/components/sidebar/Tree.stories.tsx b/lib/ui/src/components/sidebar/Tree.stories.tsx
index a87cda9ffd6..cccd9313bef 100644
--- a/lib/ui/src/components/sidebar/Tree.stories.tsx
+++ b/lib/ui/src/components/sidebar/Tree.stories.tsx
@@ -98,8 +98,8 @@ export const SingleStoryComponents = () => {
 };
 
 // node must be selected, highlighted, and focused
-// in order to tab to 'Skip to content' link
-export const SkipToContentInteraction = {
+// in order to tab to 'Skip to canvas' link
+export const SkipToCanvasLinkFocused = {
   args: {
     isBrowsing: true,
     isMain: true,

From 5004c0f2803d8e70b59421544d8a7425898bee54 Mon Sep 17 00:00:00 2001
From: Deen Denno <darleendenno@gmail.com>
Date: Mon, 2 Aug 2021 23:09:14 -0500
Subject: [PATCH 10/21] fix: remove unused imports

---
 lib/ui/src/components/sidebar/TreeNode.stories.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/lib/ui/src/components/sidebar/TreeNode.stories.tsx b/lib/ui/src/components/sidebar/TreeNode.stories.tsx
index e33ec2d67bd..e4067e26473 100644
--- a/lib/ui/src/components/sidebar/TreeNode.stories.tsx
+++ b/lib/ui/src/components/sidebar/TreeNode.stories.tsx
@@ -1,6 +1,4 @@
 import React from 'react';
-import userEvent from '@testing-library/user-event';
-import { screen } from '@testing-library/dom';
 import { HighlightStyles } from './HighlightStyles';
 
 import { ComponentNode, DocumentNode, GroupNode, StoryNode } from './TreeNode';

From bf76162ff53842d8204e9371e50081dac827c270 Mon Sep 17 00:00:00 2001
From: Deen Denno <darleendenno@gmail.com>
Date: Mon, 2 Aug 2021 23:19:31 -0500
Subject: [PATCH 11/21] refactor: style syntax consistency

---
 .../src/components/preview/FramesRenderer.tsx | 32 +++++++++----------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/lib/ui/src/components/preview/FramesRenderer.tsx b/lib/ui/src/components/preview/FramesRenderer.tsx
index 63c51484127..fe740e6aa96 100644
--- a/lib/ui/src/components/preview/FramesRenderer.tsx
+++ b/lib/ui/src/components/preview/FramesRenderer.tsx
@@ -13,22 +13,22 @@ const getActive = (refId: FramesRendererProps['refId']) => {
   return 'storybook-preview-iframe';
 };
 
-const SkipToSidebarLink = styled(Button)`
-  display: none;
-  @media (min-width: 600px) {
-    display: block;
-    position: absolute;
-    top: 10px;
-    right: 15px;
-    padding: 10px 15px;
-    font-size: ${(props) => props.theme.typography.size.s1};
-    transform: translateY(-100px);
-    &:focus {
-      transform: translateY(0);
-      z-index: 1;
-    }
-  }
-`;
+const SkipToSidebarLink = styled(Button)(({ theme }) => ({
+  display: 'none',
+  '@media (min-width: 600px)': {
+    display: 'block',
+    position: 'absolute',
+    top: '10px',
+    right: '15px',
+    padding: '10px 15px',
+    fontSize: theme.typography.size.s1,
+    transform: 'translateY(-100px)',
+    '&:focus': {
+      transform: 'translateY(0)',
+      zIndex: 1,
+    },
+  },
+}));
 
 export const FramesRenderer: FunctionComponent<FramesRendererProps> = ({
   refs,

From e5d595531a9901dc83526c4fc096505fe0cd6237 Mon Sep 17 00:00:00 2001
From: Deen Denno <darleendenno@gmail.com>
Date: Mon, 2 Aug 2021 23:26:53 -0500
Subject: [PATCH 12/21] styles: hide links on mobile

---
 lib/ui/src/components/sidebar/Heading.tsx | 20 +++++++++++--------
 lib/ui/src/components/sidebar/Tree.tsx    | 24 +++++++++++++----------
 2 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/lib/ui/src/components/sidebar/Heading.tsx b/lib/ui/src/components/sidebar/Heading.tsx
index 64ae253a9a9..4709c5fe881 100644
--- a/lib/ui/src/components/sidebar/Heading.tsx
+++ b/lib/ui/src/components/sidebar/Heading.tsx
@@ -36,14 +36,18 @@ const HeadingWrapper = styled.div({
 });
 
 const SkipToCanvasLink = styled(Button)(({ theme }) => ({
-  position: 'absolute',
-  width: '100%',
-  padding: '10px 15px',
-  fontSize: theme.typography.size.s1,
-  zIndex: 1,
-  transform: 'translate(0,-100px)',
-  '&:focus': {
-    transform: 'translate(0,-10px)',
+  display: 'none',
+  '@media (min-width: 600px)': {
+    display: 'block',
+    position: 'absolute',
+    width: '100%',
+    padding: '10px 15px',
+    fontSize: theme.typography.size.s1,
+    zIndex: 1,
+    transform: 'translate(0,-100px)',
+    '&:focus': {
+      transform: 'translate(0,-10px)',
+    },
   },
 }));
 
diff --git a/lib/ui/src/components/sidebar/Tree.tsx b/lib/ui/src/components/sidebar/Tree.tsx
index a6c0a50691c..c15b8800774 100644
--- a/lib/ui/src/components/sidebar/Tree.tsx
+++ b/lib/ui/src/components/sidebar/Tree.tsx
@@ -103,16 +103,20 @@ const LeafNodeStyleWrapper = styled.div(({ theme }) => ({
 }));
 
 const SkipToContentLink = styled(Button)(({ theme }) => ({
-  zIndex: -1,
-  position: 'absolute',
-  top: 1,
-  right: 20,
-  height: '20px',
-  fontSize: '10px',
-  padding: '5px 10px',
-  '&:focus': {
-    background: 'white',
-    zIndex: 1,
+  display: 'none',
+  '@media (min-width: 600px)': {
+    display: 'block',
+    zIndex: -1,
+    position: 'absolute',
+    top: 1,
+    right: 20,
+    height: '20px',
+    fontSize: '10px',
+    padding: '5px 10px',
+    '&:focus': {
+      background: 'white',
+      zIndex: 1,
+    },
   },
 }));
 

From 593e1b502b56aa430a6de495cacf0f1812092d34 Mon Sep 17 00:00:00 2001
From: Deen Denno <darleendenno@gmail.com>
Date: Tue, 3 Aug 2021 09:31:19 -0500
Subject: [PATCH 13/21] fix: canvas link dupe render

---
 lib/ui/src/components/preview/FramesRenderer.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/ui/src/components/preview/FramesRenderer.tsx b/lib/ui/src/components/preview/FramesRenderer.tsx
index fe740e6aa96..3b143e6e4d5 100644
--- a/lib/ui/src/components/preview/FramesRenderer.tsx
+++ b/lib/ui/src/components/preview/FramesRenderer.tsx
@@ -90,11 +90,11 @@ export const FramesRenderer: FunctionComponent<FramesRendererProps> = ({
   return (
     <Fragment>
       <Global styles={styles} />
+      <SkipToSidebarLink secondary isLink tabIndex={0} href={`#${storyId}`}>
+        Skip to sidebar
+      </SkipToSidebarLink>
       {Object.entries(frames).map(([id, src]) => (
         <Fragment key={id}>
-          <SkipToSidebarLink secondary isLink tabIndex={0} href={`#${storyId}`}>
-            Skip to sidebar
-          </SkipToSidebarLink>
           <IFrame
             active={id === active}
             key={refs[id] ? refs[id].url : id}

From 7c0c4082380cfb7d31b369b564dccf535ba9c3a2 Mon Sep 17 00:00:00 2001
From: Deen Denno <darleendenno@gmail.com>
Date: Tue, 3 Aug 2021 17:32:21 -0500
Subject: [PATCH 14/21] add delay, make interaction stories async

---
 lib/ui/src/components/sidebar/Heading.stories.tsx | 6 ++++--
 lib/ui/src/components/sidebar/Tree.stories.tsx    | 5 +++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/lib/ui/src/components/sidebar/Heading.stories.tsx b/lib/ui/src/components/sidebar/Heading.stories.tsx
index e24631bf18f..d0010f76d81 100644
--- a/lib/ui/src/components/sidebar/Heading.stories.tsx
+++ b/lib/ui/src/components/sidebar/Heading.stories.tsx
@@ -192,6 +192,8 @@ export const noBrand: Story = () => {
 
 export const skipToCanvasLinkFocused: Story = {
   args: { menu: menuItems },
-  parameters: { layout: 'padded' },
-  play: () => screen.getByTestId('heading--skip').focus(),
+  parameters: { layout: 'padded', chromatic: { delay: 300 } },
+  play: async () => {
+    await screen.getByTestId('heading--skip').focus();
+  },
 };
diff --git a/lib/ui/src/components/sidebar/Tree.stories.tsx b/lib/ui/src/components/sidebar/Tree.stories.tsx
index cccd9313bef..e1d2cadcdcb 100644
--- a/lib/ui/src/components/sidebar/Tree.stories.tsx
+++ b/lib/ui/src/components/sidebar/Tree.stories.tsx
@@ -110,7 +110,8 @@ export const SkipToCanvasLinkFocused = {
     selectedStoryId: 'tooltip-tooltipbuildlist--default',
     onSelectStoryId: () => {},
   },
-  play: () => {
-    screen.getByTestId('node--skip').focus();
+  parameters: { chromatic: { delay: 300 } },
+  play: async () => {
+    await screen.getByTestId('node--skip').focus();
   },
 };

From a53ada87b64330b2bd69ce1ba8f6c53650ae68ae Mon Sep 17 00:00:00 2001
From: Deen Denno <darleendenno@gmail.com>
Date: Thu, 5 Aug 2021 16:56:14 -0500
Subject: [PATCH 15/21] refactor: replace dataTestId with getAllByText

---
 lib/ui/src/components/sidebar/Heading.stories.tsx | 4 ++--
 lib/ui/src/components/sidebar/Heading.tsx         | 8 +-------
 lib/ui/src/components/sidebar/Tree.stories.tsx    | 4 ++--
 lib/ui/src/components/sidebar/Tree.tsx            | 8 +-------
 4 files changed, 6 insertions(+), 18 deletions(-)

diff --git a/lib/ui/src/components/sidebar/Heading.stories.tsx b/lib/ui/src/components/sidebar/Heading.stories.tsx
index d0010f76d81..f0b94942636 100644
--- a/lib/ui/src/components/sidebar/Heading.stories.tsx
+++ b/lib/ui/src/components/sidebar/Heading.stories.tsx
@@ -193,7 +193,7 @@ export const noBrand: Story = () => {
 export const skipToCanvasLinkFocused: Story = {
   args: { menu: menuItems },
   parameters: { layout: 'padded', chromatic: { delay: 300 } },
-  play: async () => {
-    await screen.getByTestId('heading--skip').focus();
+  play: () => {
+    screen.getAllByText('Skip to canvas')[0].focus();
   },
 };
diff --git a/lib/ui/src/components/sidebar/Heading.tsx b/lib/ui/src/components/sidebar/Heading.tsx
index 4709c5fe881..b3dbaa416ec 100644
--- a/lib/ui/src/components/sidebar/Heading.tsx
+++ b/lib/ui/src/components/sidebar/Heading.tsx
@@ -58,13 +58,7 @@ export const Heading: FunctionComponent<HeadingProps & ComponentProps<typeof Hea
 }) => {
   return (
     <HeadingWrapper {...props}>
-      <SkipToCanvasLink
-        secondary
-        isLink
-        tabIndex={0}
-        data-testid="heading--skip"
-        href="#storybook-preview-wrapper"
-      >
+      <SkipToCanvasLink secondary isLink tabIndex={0} href="#storybook-preview-wrapper">
         Skip to canvas
       </SkipToCanvasLink>
 
diff --git a/lib/ui/src/components/sidebar/Tree.stories.tsx b/lib/ui/src/components/sidebar/Tree.stories.tsx
index e1d2cadcdcb..4bba05057c3 100644
--- a/lib/ui/src/components/sidebar/Tree.stories.tsx
+++ b/lib/ui/src/components/sidebar/Tree.stories.tsx
@@ -111,7 +111,7 @@ export const SkipToCanvasLinkFocused = {
     onSelectStoryId: () => {},
   },
   parameters: { chromatic: { delay: 300 } },
-  play: async () => {
-    await screen.getByTestId('node--skip').focus();
+  play: () => {
+    screen.getAllByText('Skip to canvas')[0].focus();
   },
 };
diff --git a/lib/ui/src/components/sidebar/Tree.tsx b/lib/ui/src/components/sidebar/Tree.tsx
index c15b8800774..3d9984d8a24 100644
--- a/lib/ui/src/components/sidebar/Tree.tsx
+++ b/lib/ui/src/components/sidebar/Tree.tsx
@@ -173,13 +173,7 @@ const Node = React.memo<NodeProps>(
             {item.renderLabel?.(item) || item.name}
           </LeafNode>
           {isSelected && (
-            <SkipToContentLink
-              secondary
-              outline
-              isLink
-              href="#storybook-preview-wrapper"
-              data-testid="node--skip"
-            >
+            <SkipToContentLink secondary outline isLink href="#storybook-preview-wrapper">
               Skip to canvas
             </SkipToContentLink>
           )}

From 65d5e81d8ac80f6ead01d1484dfaf8a215d65d67 Mon Sep 17 00:00:00 2001
From: Deen Denno <darleendenno@gmail.com>
Date: Thu, 5 Aug 2021 17:01:35 -0500
Subject: [PATCH 16/21] styles: use numeric convention

---
 lib/ui/src/components/preview/FramesRenderer.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/ui/src/components/preview/FramesRenderer.tsx b/lib/ui/src/components/preview/FramesRenderer.tsx
index 3b143e6e4d5..b12869f191d 100644
--- a/lib/ui/src/components/preview/FramesRenderer.tsx
+++ b/lib/ui/src/components/preview/FramesRenderer.tsx
@@ -18,8 +18,8 @@ const SkipToSidebarLink = styled(Button)(({ theme }) => ({
   '@media (min-width: 600px)': {
     display: 'block',
     position: 'absolute',
-    top: '10px',
-    right: '15px',
+    top: 10,
+    right: 15,
     padding: '10px 15px',
     fontSize: theme.typography.size.s1,
     transform: 'translateY(-100px)',

From 6f715da17559a35335c47a03d38129d38630164e Mon Sep 17 00:00:00 2001
From: Deen Denno <darleendenno@gmail.com>
Date: Thu, 5 Aug 2021 22:08:24 -0500
Subject: [PATCH 17/21] refactor: chromatic theme default, add skipLinkHref
 prop to Heading

---
 examples/official-storybook/preview.js            |  3 ++-
 lib/ui/src/components/sidebar/Heading.stories.tsx |  6 +++---
 lib/ui/src/components/sidebar/Heading.tsx         | 10 +++++++---
 lib/ui/src/components/sidebar/Sidebar.tsx         |  7 ++++++-
 lib/ui/src/components/sidebar/Tree.stories.tsx    |  4 ++--
 5 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/examples/official-storybook/preview.js b/examples/official-storybook/preview.js
index f56a80fe7b0..2f67722d3ef 100644
--- a/examples/official-storybook/preview.js
+++ b/examples/official-storybook/preview.js
@@ -87,7 +87,8 @@ const ThemedSetRoot = () => {
 };
 
 export const decorators = [
-  (StoryFn, { globals: { theme = 'light' } }) => {
+  (StoryFn, { globals, parameters }) => {
+    const theme = parameters.theme || globals.theme || 'light';
     switch (theme) {
       case 'side-by-side': {
         return (
diff --git a/lib/ui/src/components/sidebar/Heading.stories.tsx b/lib/ui/src/components/sidebar/Heading.stories.tsx
index f0b94942636..f35e2a9524a 100644
--- a/lib/ui/src/components/sidebar/Heading.stories.tsx
+++ b/lib/ui/src/components/sidebar/Heading.stories.tsx
@@ -191,9 +191,9 @@ export const noBrand: Story = () => {
 };
 
 export const skipToCanvasLinkFocused: Story = {
-  args: { menu: menuItems },
-  parameters: { layout: 'padded', chromatic: { delay: 300 } },
+  args: { menu: menuItems, skipLinkHref: '#storybook-preview-wrapper' },
+  parameters: { layout: 'padded', theme: 'light', chromatic: { delay: 300 } },
   play: () => {
-    screen.getAllByText('Skip to canvas')[0].focus();
+    screen.getByText('Skip to canvas').focus();
   },
 };
diff --git a/lib/ui/src/components/sidebar/Heading.tsx b/lib/ui/src/components/sidebar/Heading.tsx
index b3dbaa416ec..249d7bb7f46 100644
--- a/lib/ui/src/components/sidebar/Heading.tsx
+++ b/lib/ui/src/components/sidebar/Heading.tsx
@@ -8,6 +8,7 @@ import { SidebarMenu, MenuList } from './Menu';
 export interface HeadingProps {
   menuHighlighted?: boolean;
   menu: MenuList;
+  skipLinkHref?: string;
 }
 
 const BrandArea = styled.div(({ theme }) => ({
@@ -54,13 +55,16 @@ const SkipToCanvasLink = styled(Button)(({ theme }) => ({
 export const Heading: FunctionComponent<HeadingProps & ComponentProps<typeof HeadingWrapper>> = ({
   menuHighlighted = false,
   menu,
+  skipLinkHref,
   ...props
 }) => {
   return (
     <HeadingWrapper {...props}>
-      <SkipToCanvasLink secondary isLink tabIndex={0} href="#storybook-preview-wrapper">
-        Skip to canvas
-      </SkipToCanvasLink>
+      {skipLinkHref && (
+        <SkipToCanvasLink secondary isLink tabIndex={0} href={skipLinkHref}>
+          Skip to canvas
+        </SkipToCanvasLink>
+      )}
 
       <BrandArea>
         <Brand />
diff --git a/lib/ui/src/components/sidebar/Sidebar.tsx b/lib/ui/src/components/sidebar/Sidebar.tsx
index 32ead4d69db..518eeb50c1f 100644
--- a/lib/ui/src/components/sidebar/Sidebar.tsx
+++ b/lib/ui/src/components/sidebar/Sidebar.tsx
@@ -113,7 +113,12 @@ export const Sidebar: FunctionComponent<SidebarProps> = React.memo(
       <Container className="container sidebar-container">
         <CustomScrollArea vertical>
           <StyledSpaced row={1.6}>
-            <Heading className="sidebar-header" menuHighlighted={menuHighlighted} menu={menu} />
+            <Heading
+              className="sidebar-header"
+              menuHighlighted={menuHighlighted}
+              menu={menu}
+              skipLinkHref="#storybook-preview-wrapper"
+            />
 
             <Search
               dataset={dataset}
diff --git a/lib/ui/src/components/sidebar/Tree.stories.tsx b/lib/ui/src/components/sidebar/Tree.stories.tsx
index 4bba05057c3..d28a7c4da7b 100644
--- a/lib/ui/src/components/sidebar/Tree.stories.tsx
+++ b/lib/ui/src/components/sidebar/Tree.stories.tsx
@@ -110,8 +110,8 @@ export const SkipToCanvasLinkFocused = {
     selectedStoryId: 'tooltip-tooltipbuildlist--default',
     onSelectStoryId: () => {},
   },
-  parameters: { chromatic: { delay: 300 } },
+  parameters: { theme: 'light', chromatic: { delay: 300 } },
   play: () => {
-    screen.getAllByText('Skip to canvas')[0].focus();
+    screen.getByText('Skip to canvas').focus();
   },
 };

From 78f3b4452ba732d249d131a837843363b6019708 Mon Sep 17 00:00:00 2001
From: Deen Denno <darleendenno@gmail.com>
Date: Thu, 5 Aug 2021 22:25:35 -0500
Subject: [PATCH 18/21] fix: hide skip to sidebar link when sidebar isn't
 available

---
 .../src/components/preview/FramesRenderer.tsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/lib/ui/src/components/preview/FramesRenderer.tsx b/lib/ui/src/components/preview/FramesRenderer.tsx
index b12869f191d..385fff5c260 100644
--- a/lib/ui/src/components/preview/FramesRenderer.tsx
+++ b/lib/ui/src/components/preview/FramesRenderer.tsx
@@ -1,4 +1,5 @@
 import React, { Fragment, FunctionComponent, useMemo, useEffect, useState } from 'react';
+import { Consumer, Combo } from '@storybook/api';
 import { Button } from '@storybook/components';
 import { Global, CSSObject, styled } from '@storybook/theming';
 import { IFrame } from './iframe';
@@ -30,6 +31,11 @@ const SkipToSidebarLink = styled(Button)(({ theme }) => ({
   },
 }));
 
+const whenSidebarIsVisible = ({ state }: Combo) => ({
+  isFullscreen: state.layout.isFullscreen,
+  showNav: state.layout.showNav,
+});
+
 export const FramesRenderer: FunctionComponent<FramesRendererProps> = ({
   refs,
   story,
@@ -90,9 +96,16 @@ export const FramesRenderer: FunctionComponent<FramesRendererProps> = ({
   return (
     <Fragment>
       <Global styles={styles} />
-      <SkipToSidebarLink secondary isLink tabIndex={0} href={`#${storyId}`}>
-        Skip to sidebar
-      </SkipToSidebarLink>
+      <Consumer filter={whenSidebarIsVisible}>
+        {({ isFullscreen, showNav }) =>
+          !isFullscreen &&
+          !!showNav && (
+            <SkipToSidebarLink secondary isLink tabIndex={0} href={`#${storyId}`}>
+              Skip to sidebar
+            </SkipToSidebarLink>
+          )
+        }
+      </Consumer>
       {Object.entries(frames).map(([id, src]) => (
         <Fragment key={id}>
           <IFrame

From a5c93ac8b2f96a172982af1281e356f9cf773112 Mon Sep 17 00:00:00 2001
From: Deen Denno <darleendenno@gmail.com>
Date: Thu, 12 Aug 2021 17:00:51 -0500
Subject: [PATCH 19/21] fix: revert single story chromatic theme override,
 modify interactions for chromatic

---
 examples/official-storybook/preview.js            | 3 +--
 lib/ui/src/components/sidebar/Heading.stories.tsx | 5 +++--
 lib/ui/src/components/sidebar/Tree.stories.tsx    | 5 +++--
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/examples/official-storybook/preview.js b/examples/official-storybook/preview.js
index 2f67722d3ef..f56a80fe7b0 100644
--- a/examples/official-storybook/preview.js
+++ b/examples/official-storybook/preview.js
@@ -87,8 +87,7 @@ const ThemedSetRoot = () => {
 };
 
 export const decorators = [
-  (StoryFn, { globals, parameters }) => {
-    const theme = parameters.theme || globals.theme || 'light';
+  (StoryFn, { globals: { theme = 'light' } }) => {
     switch (theme) {
       case 'side-by-side': {
         return (
diff --git a/lib/ui/src/components/sidebar/Heading.stories.tsx b/lib/ui/src/components/sidebar/Heading.stories.tsx
index f35e2a9524a..a938fa4f267 100644
--- a/lib/ui/src/components/sidebar/Heading.stories.tsx
+++ b/lib/ui/src/components/sidebar/Heading.stories.tsx
@@ -192,8 +192,9 @@ export const noBrand: Story = () => {
 
 export const skipToCanvasLinkFocused: Story = {
   args: { menu: menuItems, skipLinkHref: '#storybook-preview-wrapper' },
-  parameters: { layout: 'padded', theme: 'light', chromatic: { delay: 300 } },
+  parameters: { layout: 'padded', chromatic: { delay: 300 } },
   play: () => {
-    screen.getByText('Skip to canvas').focus();
+    // focus each instance for chromatic/storybook's stacked theme
+    screen.getAllByText('Skip to canvas').forEach((x) => x.focus());
   },
 };
diff --git a/lib/ui/src/components/sidebar/Tree.stories.tsx b/lib/ui/src/components/sidebar/Tree.stories.tsx
index d28a7c4da7b..bb511a4e1e8 100644
--- a/lib/ui/src/components/sidebar/Tree.stories.tsx
+++ b/lib/ui/src/components/sidebar/Tree.stories.tsx
@@ -110,8 +110,9 @@ export const SkipToCanvasLinkFocused = {
     selectedStoryId: 'tooltip-tooltipbuildlist--default',
     onSelectStoryId: () => {},
   },
-  parameters: { theme: 'light', chromatic: { delay: 300 } },
+  parameters: { chromatic: { delay: 300 } },
   play: () => {
-    screen.getByText('Skip to canvas').focus();
+    // focus each instance for chromatic/storybook's stacked theme
+    screen.getAllByText('Skip to canvas').forEach((x) => x.focus());
   },
 };

From 9b48cfc01e52aec9dcbb6ea74e4e07a31760dad6 Mon Sep 17 00:00:00 2001
From: Deen Denno <darleendenno@gmail.com>
Date: Thu, 19 Aug 2021 13:03:51 -0500
Subject: [PATCH 20/21] fix: initial render doesn't have storyId for href

---
 .../src/components/preview/FramesRenderer.tsx | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/lib/ui/src/components/preview/FramesRenderer.tsx b/lib/ui/src/components/preview/FramesRenderer.tsx
index 385fff5c260..701dae70992 100644
--- a/lib/ui/src/components/preview/FramesRenderer.tsx
+++ b/lib/ui/src/components/preview/FramesRenderer.tsx
@@ -34,6 +34,7 @@ const SkipToSidebarLink = styled(Button)(({ theme }) => ({
 const whenSidebarIsVisible = ({ state }: Combo) => ({
   isFullscreen: state.layout.isFullscreen,
   showNav: state.layout.showNav,
+  selectedStoryId: state.storyId,
 });
 
 export const FramesRenderer: FunctionComponent<FramesRendererProps> = ({
@@ -97,14 +98,16 @@ export const FramesRenderer: FunctionComponent<FramesRendererProps> = ({
     <Fragment>
       <Global styles={styles} />
       <Consumer filter={whenSidebarIsVisible}>
-        {({ isFullscreen, showNav }) =>
-          !isFullscreen &&
-          !!showNav && (
-            <SkipToSidebarLink secondary isLink tabIndex={0} href={`#${storyId}`}>
-              Skip to sidebar
-            </SkipToSidebarLink>
-          )
-        }
+        {({ isFullscreen, showNav, selectedStoryId }) => {
+          if (!isFullscreen && !!showNav && selectedStoryId) {
+            return (
+              <SkipToSidebarLink secondary isLink tabIndex={0} href={`#${selectedStoryId}`}>
+                Skip to sidebar
+              </SkipToSidebarLink>
+            );
+          }
+          return null;
+        }}
       </Consumer>
       {Object.entries(frames).map(([id, src]) => (
         <Fragment key={id}>

From 1980a36057173d7c9f3062eeacfc1243868c49a9 Mon Sep 17 00:00:00 2001
From: Deen Denno <darleendenno@gmail.com>
Date: Thu, 19 Aug 2021 15:38:56 -0500
Subject: [PATCH 21/21] styles: bump heading link down

---
 lib/ui/src/components/sidebar/Heading.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/ui/src/components/sidebar/Heading.tsx b/lib/ui/src/components/sidebar/Heading.tsx
index 249d7bb7f46..d897e080d7f 100644
--- a/lib/ui/src/components/sidebar/Heading.tsx
+++ b/lib/ui/src/components/sidebar/Heading.tsx
@@ -47,7 +47,7 @@ const SkipToCanvasLink = styled(Button)(({ theme }) => ({
     zIndex: 1,
     transform: 'translate(0,-100px)',
     '&:focus': {
-      transform: 'translate(0,-10px)',
+      transform: 'translate(0)',
     },
   },
 }));