chore(docs): Add onClick to SkipToContent in demos

SkipToContent does not work in the context of the PatternFly page. Using document.getElementById sidesteps this issue and allows them to work as usual. I tried using refs, but because Page is an older class component, the refs were not compatible. We'd likely need to rewrite page as a function component. This is good enough for now, in my opinion. SkipToContentBasic works as advertised, so I am not touching that, and I also did not touch react-integration or unit tests.

Author: rebeccaalpert

packages/react-core/src/demos/DashboardWrapper.tsx

@@ -98,8 +98,19 @@ export const DashboardWrapper: React.FC<DashboardWrapperProps> = ({
     </PageSidebar>
   );
 
+  const defaultContainerId = 'main-content-page-layout-default-nav';
+
+  const handleClick = (event: React.MouseEvent) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(mainContainerId ?? defaultContainerId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
   const PageSkipToContent = (
-    <SkipToContent href={`#${mainContainerId ?? 'main-content-page-layout-default-nav'}`}>
+    <SkipToContent onClick={handleClick} href={`#${mainContainerId ?? defaultContainerId}`}>
       Skip to content
     </SkipToContent>
   );
@@ -112,7 +123,7 @@ export const DashboardWrapper: React.FC<DashboardWrapperProps> = ({
       skipToContent={PageSkipToContent}
       banner={banner}
       breadcrumb={renderedBreadcrumb}
-      mainContainerId={mainContainerId ?? 'main-content-page-layout-default-nav'}
+      mainContainerId={mainContainerId ?? defaultContainerId}
       notificationDrawer={notificationDrawer}
       isNotificationDrawerExpanded={isNotificationDrawerExpanded}
       {...(typeof onPageResize === 'function' && {

packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx

@@ -279,7 +279,21 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
     </PageSidebar>
   );
   const pageId = 'main-content-page-layout-default-nav';
-  const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
+
+  const handleClick = (event) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(pageId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
+  const PageSkipToContent = (
+    <SkipToContent onClick={handleClick} href={`#${pageId}`}>
+      Skip to content
+    </SkipToContent>
+  );
 
   const PageBreadcrumb = (
     <Breadcrumb>

packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx

@@ -329,7 +329,21 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
     </PageSidebar>
   );
   const pageId = 'main-content-page-layout-default-nav';
-  const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
+
+  const handleClick = (event) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(pageId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
+  const PageSkipToContent = (
+    <SkipToContent onClick={handleClick} href={`#${pageId}`}>
+      Skip to content
+    </SkipToContent>
+  );
 
   const PageBreadcrumb = (
     <Breadcrumb>

packages/react-core/src/demos/examples/DashboardWrapper.js

@@ -282,7 +282,20 @@ export const MastheadWithHorizontalNav: React.FunctionComponent = () => {
 
   const mainContainerId = 'main-content-page-layout-tertiary-nav';
 
-  const pageSkipToContent = <SkipToContent href={`#${mainContainerId}`}>Skip to content</SkipToContent>;
+  const handleClick = (event) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(mainContainerId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
+  const pageSkipToContent = (
+    <SkipToContent onClick={handleClick} href={`#${mainContainerId}`}>
+      Skip to content
+    </SkipToContent>
+  );
 
   return (
     <Page

packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx

@@ -515,7 +515,20 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
 
   const mainContainerId = 'main-content-page-layout-tertiary-nav';
 
-  const pageSkipToContent = <SkipToContent href={`#${mainContainerId}`}>Skip to content</SkipToContent>;
+  const handleClick = (event) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(mainContainerId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
+  const pageSkipToContent = (
+    <SkipToContent onClick={handleClick} href={`#${mainContainerId}`}>
+      Skip to content
+    </SkipToContent>
+  );
 
   return (
     <Page

packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx

@@ -58,7 +58,21 @@ export const NavDefault: React.FunctionComponent = () => {
     </PageSidebar>
   );
   const pageId = 'main-content-page-layout-default-nav';
-  const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
+
+  const handleClick = (event) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(pageId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
+  const PageSkipToContent = (
+    <SkipToContent onClick={handleClick} href={`#${pageId}`}>
+      Skip to content
+    </SkipToContent>
+  );
 
   return (
     <>

packages/react-core/src/demos/examples/Nav/NavDefault.tsx

@@ -84,7 +84,21 @@ export const NavExpandableDemo: React.FunctionComponent = () => {
     </PageSidebar>
   );
   const pageId = 'main-content-page-layout-expandable-nav';
-  const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
+
+  const handleClick = (event) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(pageId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
+  const PageSkipToContent = (
+    <SkipToContent onClick={handleClick} href={`#${pageId}`}>
+      Skip to content
+    </SkipToContent>
+  );
 
   return (
     <React.Fragment>

packages/react-core/src/demos/examples/Nav/NavExpandable.tsx

@@ -259,7 +259,21 @@ export const NavFlyout: React.FunctionComponent = () => {
   );
 
   const pageId = 'main-content-page-layout-flyout-nav';
-  const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to Content</SkipToContent>;
+
+  const handleClick = (event) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(pageId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
+  const PageSkipToContent = (
+    <SkipToContent onClick={handleClick} href={`#${pageId}`}>
+      Skip to content
+    </SkipToContent>
+  );
 
   return (
     <Page

packages/react-core/src/demos/examples/Nav/NavFlyout.tsx

@@ -67,7 +67,21 @@ export const NavGrouped: React.FunctionComponent = () => {
     </PageSidebar>
   );
   const pageId = 'main-content-page-layout-group-nav';
-  const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to Content</SkipToContent>;
+
+  const handleClick = (event) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(pageId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
+  const PageSkipToContent = (
+    <SkipToContent onClick={handleClick} href={`#${pageId}`}>
+      Skip to content
+    </SkipToContent>
+  );
 
   return (
     <>