From af7608e58dbcaf7bc1c12b1ba917b2232b6ee9fd Mon Sep 17 00:00:00 2001
From: Juan Pablo Garcia Ripa <sarabadu@gmail.com>
Date: Thu, 9 Dec 2021 16:32:23 +0100
Subject: [PATCH] dont show skip if there is no content ref

Signed-off-by: Juan Pablo Garcia Ripa <sarabadu@gmail.com>
---
 .../layout/LayoutProvider/LayoutProvider.tsx  |  5 ++--
 .../src/layout/Sidebar/Bar.tsx                | 29 ++++++++++++++-----
 packages/core-components/src/layout/index.ts  |  1 +
 3 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/packages/core-components/src/layout/LayoutProvider/LayoutProvider.tsx b/packages/core-components/src/layout/LayoutProvider/LayoutProvider.tsx
index 53fc0aee59..1dcc91d817 100644
--- a/packages/core-components/src/layout/LayoutProvider/LayoutProvider.tsx
+++ b/packages/core-components/src/layout/LayoutProvider/LayoutProvider.tsx
@@ -17,6 +17,7 @@
 import React, {
   createContext,
   PropsWithChildren,
+  useCallback,
   useContext,
   useRef,
 } from 'react';
@@ -50,9 +51,9 @@ export function LayoutProvider(props: PropsWithChildren<{}>) {
 export function useLayoutContent() {
   const { content } = useContext(LayoutContext);
 
-  const focusContent = () => {
+  const focusContent = useCallback(() => {
     content.contentRef?.current?.focus();
-  };
+  }, [content]);
 
   return { focusContent, contentRef: content.contentRef };
 }
diff --git a/packages/core-components/src/layout/Sidebar/Bar.tsx b/packages/core-components/src/layout/Sidebar/Bar.tsx
index e134703f50..2243cfc10c 100644
--- a/packages/core-components/src/layout/Sidebar/Bar.tsx
+++ b/packages/core-components/src/layout/Sidebar/Bar.tsx
@@ -69,7 +69,7 @@ const useStyles = makeStyles<BackstageTheme>(
     visuallyHidden: {
       top: 0,
       position: 'absolute',
-      zIndex: 2,
+      zIndex: 1000,
       transform: 'translateY(-200%)',
       '&:focus': {
         transform: 'translateY(5px)',
@@ -176,13 +176,7 @@ const DesktopSidebar = (props: SidebarProps) => {
 
   return (
     <div style={{}}>
-      <Button
-        onClick={focusContent}
-        variant="contained"
-        className={classnames(classes.visuallyHidden)}
-      >
-        Skip to content
-      </Button>
+      <A11ySkipSidebar />
       <SidebarContext.Provider
         value={{
           isOpen,
@@ -235,6 +229,25 @@ export const Sidebar = (props: SidebarProps) => {
     </DesktopSidebar>
   );
 };
+
+function A11ySkipSidebar() {
+  const { focusContent, contentRef } = useLayoutContent();
+  const classes = useStyles();
+
+  if (!contentRef?.current) {
+    return null;
+  }
+  return (
+    <Button
+      onClick={focusContent}
+      variant="contained"
+      className={classnames(classes.visuallyHidden)}
+    >
+      Skip to content
+    </Button>
+  );
+}
+
 function ignoreChildEvent(handlerFn: (e?: any) => void) {
   // TODO type the event
   return (event: any) => {
diff --git a/packages/core-components/src/layout/index.ts b/packages/core-components/src/layout/index.ts
index 9bb7fbaa26..06ee5d1d4c 100644
--- a/packages/core-components/src/layout/index.ts
+++ b/packages/core-components/src/layout/index.ts
@@ -31,3 +31,4 @@ export * from './Sidebar';
 export * from './SignInPage';
 export * from './TabbedCard';
 export * from './Breadcrumbs';
+export * from './LayoutProvider';