From a574b5f3f437e990cccbf9fe9883ddec0c53b0d5 Mon Sep 17 00:00:00 2001 From: Rebecca Alpert Date: Mon, 2 Dec 2024 16:26:09 -0500 Subject: [PATCH 1/2] 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. --- .../react-core/src/demos/DashboardWrapper.tsx | 15 ++- .../examples/NotificationDrawerBasic.tsx | 16 ++- .../examples/NotificationDrawerGrouped.tsx | 16 ++- .../src/demos/examples/DashboardWrapper.js | 126 ------------------ .../Masthead/MastheadWithHorizontalNav.tsx | 15 ++- ...stheadWithUtilitiesAndUserDropdownMenu.tsx | 15 ++- .../src/demos/examples/Nav/NavDefault.tsx | 16 ++- .../src/demos/examples/Nav/NavExpandable.tsx | 16 ++- .../src/demos/examples/Nav/NavFlyout.tsx | 16 ++- .../src/demos/examples/Nav/NavGrouped.tsx | 16 ++- .../src/demos/examples/Nav/NavHorizontal.tsx | 16 ++- .../examples/Nav/NavHorizontalWithSubnav.tsx | 16 ++- .../src/demos/examples/Nav/NavManual.tsx | 16 ++- .../src/demos/examples/Nav/NavWithSubnav.tsx | 16 ++- .../examples/Page/PageContextSelector.tsx | 15 ++- .../Page/PageStickySectionBreadcrumb.tsx | 15 ++- .../examples/Page/PageStickySectionGroup.tsx | 15 ++- .../Page/PageStickySectionGroupAlternate.tsx | 15 ++- .../examples/Wizard/InPageWithDrawer.tsx | 16 ++- .../InPageWithDrawerInformationalStep.tsx | 15 ++- .../src/demos/DashboardWrapper.tsx | 11 +- 21 files changed, 286 insertions(+), 147 deletions(-) delete mode 100644 packages/react-core/src/demos/examples/DashboardWrapper.js diff --git a/packages/react-core/src/demos/DashboardWrapper.tsx b/packages/react-core/src/demos/DashboardWrapper.tsx index 2d3898dbdea..bfc9c34c74b 100644 --- a/packages/react-core/src/demos/DashboardWrapper.tsx +++ b/packages/react-core/src/demos/DashboardWrapper.tsx @@ -98,8 +98,19 @@ export const DashboardWrapper: React.FC = ({ ); + 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 = ( - + Skip to content ); @@ -112,7 +123,7 @@ export const DashboardWrapper: React.FC = ({ skipToContent={PageSkipToContent} banner={banner} breadcrumb={renderedBreadcrumb} - mainContainerId={mainContainerId ?? 'main-content-page-layout-default-nav'} + mainContainerId={mainContainerId ?? defaultContainerId} notificationDrawer={notificationDrawer} isNotificationDrawerExpanded={isNotificationDrawerExpanded} {...(typeof onPageResize === 'function' && { diff --git a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx index 3a867c8ce3e..aa9814233b2 100644 --- a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx +++ b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx @@ -279,7 +279,21 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => { ); const pageId = 'main-content-page-layout-default-nav'; - const PageSkipToContent = Skip to content; + + const handleClick = (event) => { + event.preventDefault(); + + const mainContentElement = document.getElementById(pageId); + if (mainContentElement) { + mainContentElement.focus(); + } + }; + + const PageSkipToContent = ( + + Skip to content + + ); const PageBreadcrumb = ( diff --git a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx index d532a19a055..2d1d41deeb7 100644 --- a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx +++ b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx @@ -329,7 +329,21 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => { ); const pageId = 'main-content-page-layout-default-nav'; - const PageSkipToContent = Skip to content; + + const handleClick = (event) => { + event.preventDefault(); + + const mainContentElement = document.getElementById(pageId); + if (mainContentElement) { + mainContentElement.focus(); + } + }; + + const PageSkipToContent = ( + + Skip to content + + ); const PageBreadcrumb = ( diff --git a/packages/react-core/src/demos/examples/DashboardWrapper.js b/packages/react-core/src/demos/examples/DashboardWrapper.js deleted file mode 100644 index 3f5cf63976a..00000000000 --- a/packages/react-core/src/demos/examples/DashboardWrapper.js +++ /dev/null @@ -1,126 +0,0 @@ -import React from 'react'; -import { - Breadcrumb, - BreadcrumbItem, - Content, - Nav, - NavItem, - NavList, - Page, - PageSection, - PageSidebar, - PageSidebarBody, - SkipToContent -} from '@patternfly/react-core'; -import DashboardHeader from '@patternfly/react-core/src/demos/examples/DashboardHeader'; - -export const DashboardBreadcrumb = ( - - Section home - Section title - Section title - - Section landing - - -); - -export const PageTemplateTitle = ( - - -

Main title

-

This is a full page demo.

- - -); - -export default class DashboardWrapper extends React.Component { - constructor(props) { - super(props); - this.state = { - activeItem: 1 - }; - - this.onNavSelect = (_event, result) => { - this.setState({ - activeItem: result.itemId - }); - }; - } - - render() { - const { activeItem } = this.state; - const { - children, - mainContainerId, - breadcrumb, - masthead, - sidebar, - sidebarNavOpen, - onPageResize = () => {}, - hasNoBreadcrumb, - notificationDrawer, - isNotificationDrawerExpanded, - hasPageTemplateTitle, - ...pageProps - } = this.props; - - let renderedBreadcrumb; - if (!hasNoBreadcrumb) { - renderedBreadcrumb = breadcrumb !== undefined ? breadcrumb : DashboardBreadcrumb; - } - - const PageNav = ( - - ); - - const _sidebar = ( - - {PageNav} - - ); - const PageSkipToContent = ( - - Skip to content - - ); - - return ( - } - sidebar={sidebar !== undefined ? sidebar : _sidebar} - isManagedSidebar - skipToContent={PageSkipToContent} - breadcrumb={renderedBreadcrumb} - mainContainerId={mainContainerId ? mainContainerId : 'main-content-page-layout-default-nav'} - notificationDrawer={notificationDrawer} - isNotificationDrawerExpanded={isNotificationDrawerExpanded} - {...(typeof onPageResize === 'function' && { - onPageResize: (event, resizeObject) => onPageResize(event, resizeObject) - })} - {...pageProps} - > - {hasPageTemplateTitle && PageTemplateTitle} - {children} - - ); - } -} diff --git a/packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx b/packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx index f1e15d82c78..5c122b74acd 100644 --- a/packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx +++ b/packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx @@ -282,7 +282,20 @@ export const MastheadWithHorizontalNav: React.FunctionComponent = () => { const mainContainerId = 'main-content-page-layout-tertiary-nav'; - const pageSkipToContent = Skip to content; + const handleClick = (event) => { + event.preventDefault(); + + const mainContentElement = document.getElementById(mainContainerId); + if (mainContentElement) { + mainContentElement.focus(); + } + }; + + const pageSkipToContent = ( + + Skip to content + + ); return ( Skip to content; + const handleClick = (event) => { + event.preventDefault(); + + const mainContentElement = document.getElementById(mainContainerId); + if (mainContentElement) { + mainContentElement.focus(); + } + }; + + const pageSkipToContent = ( + + Skip to content + + ); return ( { ); const pageId = 'main-content-page-layout-default-nav'; - const PageSkipToContent = Skip to content; + + const handleClick = (event) => { + event.preventDefault(); + + const mainContentElement = document.getElementById(pageId); + if (mainContentElement) { + mainContentElement.focus(); + } + }; + + const PageSkipToContent = ( + + Skip to content + + ); return ( <> diff --git a/packages/react-core/src/demos/examples/Nav/NavExpandable.tsx b/packages/react-core/src/demos/examples/Nav/NavExpandable.tsx index e1526a2b228..115323bf352 100644 --- a/packages/react-core/src/demos/examples/Nav/NavExpandable.tsx +++ b/packages/react-core/src/demos/examples/Nav/NavExpandable.tsx @@ -84,7 +84,21 @@ export const NavExpandableDemo: React.FunctionComponent = () => { ); const pageId = 'main-content-page-layout-expandable-nav'; - const PageSkipToContent = Skip to content; + + const handleClick = (event) => { + event.preventDefault(); + + const mainContentElement = document.getElementById(pageId); + if (mainContentElement) { + mainContentElement.focus(); + } + }; + + const PageSkipToContent = ( + + Skip to content + + ); return ( diff --git a/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx b/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx index 36fa4b0268d..e8492ddbd60 100644 --- a/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx +++ b/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx @@ -259,7 +259,21 @@ export const NavFlyout: React.FunctionComponent = () => { ); const pageId = 'main-content-page-layout-flyout-nav'; - const PageSkipToContent = Skip to Content; + + const handleClick = (event) => { + event.preventDefault(); + + const mainContentElement = document.getElementById(pageId); + if (mainContentElement) { + mainContentElement.focus(); + } + }; + + const PageSkipToContent = ( + + Skip to content + + ); return ( { ); const pageId = 'main-content-page-layout-group-nav'; - const PageSkipToContent = Skip to Content; + + const handleClick = (event) => { + event.preventDefault(); + + const mainContentElement = document.getElementById(pageId); + if (mainContentElement) { + mainContentElement.focus(); + } + }; + + const PageSkipToContent = ( + + Skip to content + + ); return ( <> diff --git a/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx b/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx index 0ecf9507295..f9b9d2b4b99 100644 --- a/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx +++ b/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx @@ -204,7 +204,21 @@ export const NavHorizontal: React.FunctionComponent = () => { ); const pageId = 'main-content-page-layout-horizontal-nav'; - const PageSkipToContent = Skip to content; + + const handleClick = (event) => { + event.preventDefault(); + + const mainContentElement = document.getElementById(pageId); + if (mainContentElement) { + mainContentElement.focus(); + } + }; + + const PageSkipToContent = ( + + Skip to content + + ); return ( diff --git a/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx b/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx index 1cd49e20205..0d261dcc144 100644 --- a/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx +++ b/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx @@ -258,7 +258,21 @@ export const NavHorizontalWithSubnav: React.FunctionComponent = () => { ); const pageId = 'main-content-page-layout-horizontal-nav'; - const PageSkipToContent = Skip to content; + + const handleClick = (event) => { + event.preventDefault(); + + const mainContentElement = document.getElementById(pageId); + if (mainContentElement) { + mainContentElement.focus(); + } + }; + + const PageSkipToContent = ( + + Skip to content + + ); return ( diff --git a/packages/react-core/src/demos/examples/Nav/NavManual.tsx b/packages/react-core/src/demos/examples/Nav/NavManual.tsx index cd660483a43..a6e21b61199 100644 --- a/packages/react-core/src/demos/examples/Nav/NavManual.tsx +++ b/packages/react-core/src/demos/examples/Nav/NavManual.tsx @@ -234,7 +234,21 @@ export const NavManual: React.FunctionComponent = () => { ); const pageId = 'main-content-page-layout-manual-nav'; - const PageSkipToContent = Skip to Content; + + const handleClick = (event) => { + event.preventDefault(); + + const mainContentElement = document.getElementById(pageId); + if (mainContentElement) { + mainContentElement.focus(); + } + }; + + const PageSkipToContent = ( + + Skip to content + + ); return ( diff --git a/packages/react-core/src/demos/examples/Nav/NavWithSubnav.tsx b/packages/react-core/src/demos/examples/Nav/NavWithSubnav.tsx index e10d9de83ed..a16ff3f045a 100644 --- a/packages/react-core/src/demos/examples/Nav/NavWithSubnav.tsx +++ b/packages/react-core/src/demos/examples/Nav/NavWithSubnav.tsx @@ -69,7 +69,21 @@ export const NavWithSubnav: React.FunctionComponent = () => { ); const pageId = 'main-content-page-layout-default-nav'; - const PageSkipToContent = Skip to content; + + const handleClick = (event) => { + event.preventDefault(); + + const mainContentElement = document.getElementById(pageId); + if (mainContentElement) { + mainContentElement.focus(); + } + }; + + const PageSkipToContent = ( + + Skip to content + + ); const SubNav = (