From 418c66616bfd69b1e725eef922b1bbbe5f1d8887 Mon Sep 17 00:00:00 2001 From: Michael Spaxman Date: Mon, 15 Jul 2019 15:09:49 -0400 Subject: [PATCH 1/5] fix(page): skip to content should point to primary content container --- .../patternfly-4/react-core/src/components/Page/Page.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/patternfly-4/react-core/src/components/Page/Page.tsx b/packages/patternfly-4/react-core/src/components/Page/Page.tsx index faddc964e8e..d9e7b6acdf6 100644 --- a/packages/patternfly-4/react-core/src/components/Page/Page.tsx +++ b/packages/patternfly-4/react-core/src/components/Page/Page.tsx @@ -24,6 +24,8 @@ export interface PageProps extends React.HTMLProps { sidebar?: React.ReactNode; /** Skip to content component for the page */ skipToContent?: React.ReactElement; + /** an id to use for the [role="main"] element */ + mainContainerId?: string; /** * If true, manages the sidebar open/close state and there is no need to pass the isNavOpen boolean into * the sidebar component or add a callback onNavToggle function into the PageHeader component @@ -59,7 +61,8 @@ export class Page extends React.Component { sidebar: null as React.ReactNode, skipToContent: null as React.ReactElement, isManagedSidebar: false, - onPageResize: ():void => null + onPageResize: ():void => null, + mainContainerId: null as string }; componentDidMount() { @@ -110,6 +113,7 @@ export class Page extends React.Component { header, sidebar, skipToContent, + mainContainerId, isManagedSidebar, onPageResize, ...rest @@ -128,9 +132,8 @@ export class Page extends React.Component { {skipToContent} {header} {sidebar} -
+
{breadcrumb &&
{breadcrumb}
} - {skipToContent && } {children}
From 7363129277c188adf0b30684dc7eba2fd2fd428e Mon Sep 17 00:00:00 2001 From: Michael Spaxman Date: Mon, 15 Jul 2019 15:58:01 -0400 Subject: [PATCH 2/5] [cleanup] update snaps --- .../Page/__snapshots__/Page.test.tsx.snap | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/packages/patternfly-4/react-core/src/components/Page/__snapshots__/Page.test.tsx.snap b/packages/patternfly-4/react-core/src/components/Page/__snapshots__/Page.test.tsx.snap index 3465a921bc8..6a98c08dea1 100644 --- a/packages/patternfly-4/react-core/src/components/Page/__snapshots__/Page.test.tsx.snap +++ b/packages/patternfly-4/react-core/src/components/Page/__snapshots__/Page.test.tsx.snap @@ -15,6 +15,7 @@ exports[`Check page horizontal layout example against snapshot 1`] = ` } id="PageId" isManagedSidebar={false} + mainContainerId={null} onPageResize={[Function]} sidebar={
- @@ -577,6 +583,7 @@ exports[`Check page vertical layout example against snapshot 1`] = ` } id="PageId" isManagedSidebar={false} + mainContainerId={null} onPageResize={[Function]} sidebar={
Date: Tue, 23 Jul 2019 16:34:50 -0400 Subject: [PATCH 3/5] [cleanup] apply adjustments to demos and react-integration --- .../PageLayout/examples/PageLayoutDefaultNav.js | 4 +++- .../examples/PageLayoutExpandableNav.js | 4 +++- .../PageLayout/examples/PageLayoutGroupsNav.js | 5 +++-- .../examples/PageLayoutHorizontalNav.js | 6 +++--- .../PageLayout/examples/PageLayoutManualNav.js | 5 +++-- .../PageLayout/examples/PageLayoutSimpleNav.js | 5 +++-- .../react-integration/demo-app-ts/src/App.tsx | 14 ++++++++++++-- .../src/components/demos/PageDemo/PageDemo.tsx | 17 ++++++++++++++--- 8 files changed, 44 insertions(+), 16 deletions(-) diff --git a/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutDefaultNav.js b/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutDefaultNav.js index 4739ca3d746..693881d3c51 100644 --- a/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutDefaultNav.js +++ b/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutDefaultNav.js @@ -169,8 +169,9 @@ class PageLayoutDefaultNav extends React.Component { /> ); const Sidebar = ; + const pageId = 'main-content-page-layout-default-nav'; const PageSkipToContent = ( - Skip to Content + Skip to Content ); const PageBreadcrumb = ( @@ -192,6 +193,7 @@ class PageLayoutDefaultNav extends React.Component { isManagedSidebar skipToContent={PageSkipToContent} breadcrumb={PageBreadcrumb} + mainContainerId={pageId} > diff --git a/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutExpandableNav.js b/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutExpandableNav.js index 798a96fa236..d9f85784589 100644 --- a/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutExpandableNav.js +++ b/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutExpandableNav.js @@ -203,8 +203,9 @@ class PageLayoutExpandableNav extends React.Component { ); + const pageId = 'main-content-page-layout-expandable-nav'; const PageSkipToContent = ( - Skip to Content + Skip to Content ); return ( @@ -215,6 +216,7 @@ class PageLayoutExpandableNav extends React.Component { isManagedSidebar skipToContent={PageSkipToContent} breadcrumb={PageBreadcrumb} + mainContainerId={pageId} > diff --git a/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutGroupsNav.js b/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutGroupsNav.js index 50b0fe75fc4..75baa9159f3 100644 --- a/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutGroupsNav.js +++ b/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutGroupsNav.js @@ -177,11 +177,12 @@ class PageLayoutGroupsNav extends React.Component { /> ); const Sidebar = ; - const PageSkipToContent = Skip to Content; + const pageId = 'main-content-page-layout-group-nav'; + const PageSkipToContent = Skip to Content; return ( - + Main Title diff --git a/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutHorizontalNav.js b/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutHorizontalNav.js index 816331beb89..d46a5380225 100644 --- a/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutHorizontalNav.js +++ b/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutHorizontalNav.js @@ -179,14 +179,14 @@ class PageLayoutHorizontalNav extends React.Component { ); - + const pageId = 'main-content-page-layout-horizontal-nav' const PageSkipToContent = ( - Skip to Content + Skip to Content ); return ( - + Main Title diff --git a/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutManualNav.js b/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutManualNav.js index c67c2b3510a..78c54f430ea 100644 --- a/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutManualNav.js +++ b/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutManualNav.js @@ -197,13 +197,14 @@ class PageLayoutManualNav extends React.Component { /> ); const Sidebar = ; + const pageId = 'main-content-page-layout-manual-nav'; const PageSkipToContent = ( - Skip to Content + Skip to Content ); return ( - + Main Title diff --git a/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutSimpleNav.js b/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutSimpleNav.js index fee944a28b0..58111155fc2 100644 --- a/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutSimpleNav.js +++ b/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutSimpleNav.js @@ -167,13 +167,14 @@ class PageLayoutSimpleNav extends React.Component { /> ); const Sidebar = ; + const pageId = 'main-content-page-layout-simple-nav'; const PageSkipToContent = ( - Skip to Content + Skip to Content ); return ( - + Main Title diff --git a/packages/patternfly-4/react-integration/demo-app-ts/src/App.tsx b/packages/patternfly-4/react-integration/demo-app-ts/src/App.tsx index 0c53170b79a..7493dbe90e3 100755 --- a/packages/patternfly-4/react-integration/demo-app-ts/src/App.tsx +++ b/packages/patternfly-4/react-integration/demo-app-ts/src/App.tsx @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { Page, Nav, NavList, NavItem, NavVariants, PageSection } from '@patternfly/react-core'; +import { Page, Nav, NavList, NavItem, NavVariants, PageSection, SkipToContent } from '@patternfly/react-core'; import { AppHeader, AppSidebar } from './components'; import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; import Demos from './Demos'; @@ -46,10 +46,20 @@ class App extends React.Component { ); }; + private pageId = 'ts-demo-app-page-id'; + private getSkipToContentLink = () => ( + Skip to Content + ); + render() { return ( - } sidebar={} isManagedSidebar> + } + sidebar={} + skipToContent={this.getSkipToContentLink()} + isManagedSidebar + mainContainerId={this.pageId}> {this.getPages()} diff --git a/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/PageDemo/PageDemo.tsx b/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/PageDemo/PageDemo.tsx index 3544fe78c68..d85ec900ab2 100644 --- a/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/PageDemo/PageDemo.tsx +++ b/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/PageDemo/PageDemo.tsx @@ -1,5 +1,12 @@ import React from 'react'; -import { Page, PageHeader, PageSidebar, PageSection, PageSectionVariants } from '@patternfly/react-core'; +import { + Page, + PageHeader, + PageSidebar, + PageSection, + PageSectionVariants, + SkipToContent +} from '@patternfly/react-core'; export class PageDemo extends React.Component { state = { @@ -35,10 +42,14 @@ export class PageDemo extends React.Component { logoComponent={'div'} /> ); - const Sidebar = ; + const pageId = 'page-demo-page-id'; + const PageSkipToContent = ( + Skip to Content + ); + const Sidebar = ; return ( - + Section with darker background Section with dark background Section with light background From e5d1c892776d6163252b3cd61cf9a4cb5b96f017 Mon Sep 17 00:00:00 2001 From: Michael Spaxman Date: Tue, 23 Jul 2019 16:49:24 -0400 Subject: [PATCH 4/5] [cleanup] fix lint errors --- .../PageLayout/examples/PageLayoutDefaultNav.js | 4 +--- .../PageLayout/examples/PageLayoutExpandableNav.js | 4 +--- .../demos/PageLayout/examples/PageLayoutGroupsNav.js | 8 +++++++- .../PageLayout/examples/PageLayoutHorizontalNav.js | 6 ++---- .../demos/PageLayout/examples/PageLayoutManualNav.js | 12 ++++++++---- .../demos/PageLayout/examples/PageLayoutSimpleNav.js | 12 ++++++++---- 6 files changed, 27 insertions(+), 19 deletions(-) diff --git a/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutDefaultNav.js b/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutDefaultNav.js index 693881d3c51..e43d09e91a4 100644 --- a/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutDefaultNav.js +++ b/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutDefaultNav.js @@ -170,9 +170,7 @@ class PageLayoutDefaultNav extends React.Component { ); const Sidebar = ; const pageId = 'main-content-page-layout-default-nav'; - const PageSkipToContent = ( - Skip to Content - ); + const PageSkipToContent = Skip to Content; const PageBreadcrumb = ( diff --git a/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutExpandableNav.js b/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutExpandableNav.js index d9f85784589..2ab82375276 100644 --- a/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutExpandableNav.js +++ b/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutExpandableNav.js @@ -204,9 +204,7 @@ class PageLayoutExpandableNav extends React.Component { ); const pageId = 'main-content-page-layout-expandable-nav'; - const PageSkipToContent = ( - Skip to Content - ); + const PageSkipToContent = Skip to Content; return ( diff --git a/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutGroupsNav.js b/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutGroupsNav.js index 75baa9159f3..234daadd94a 100644 --- a/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutGroupsNav.js +++ b/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutGroupsNav.js @@ -182,7 +182,13 @@ class PageLayoutGroupsNav extends React.Component { return ( - + Main Title diff --git a/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutHorizontalNav.js b/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutHorizontalNav.js index d46a5380225..7950b4608c1 100644 --- a/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutHorizontalNav.js +++ b/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutHorizontalNav.js @@ -179,10 +179,8 @@ class PageLayoutHorizontalNav extends React.Component { ); - const pageId = 'main-content-page-layout-horizontal-nav' - const PageSkipToContent = ( - Skip to Content - ); + const pageId = 'main-content-page-layout-horizontal-nav'; + const PageSkipToContent = Skip to Content; return ( diff --git a/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutManualNav.js b/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutManualNav.js index 78c54f430ea..1dfc68ede7a 100644 --- a/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutManualNav.js +++ b/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutManualNav.js @@ -198,13 +198,17 @@ class PageLayoutManualNav extends React.Component { ); const Sidebar = ; const pageId = 'main-content-page-layout-manual-nav'; - const PageSkipToContent = ( - Skip to Content - ); + const PageSkipToContent = Skip to Content; return ( - + Main Title diff --git a/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutSimpleNav.js b/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutSimpleNav.js index 58111155fc2..fe1b3b0feb1 100644 --- a/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutSimpleNav.js +++ b/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutSimpleNav.js @@ -168,13 +168,17 @@ class PageLayoutSimpleNav extends React.Component { ); const Sidebar = ; const pageId = 'main-content-page-layout-simple-nav'; - const PageSkipToContent = ( - Skip to Content - ); + const PageSkipToContent = Skip to Content; return ( - + Main Title From 15b8282847b9c135b907aed42b73c1e108cb1162 Mon Sep 17 00:00:00 2001 From: Michael Spaxman Date: Thu, 25 Jul 2019 13:48:21 -0400 Subject: [PATCH 5/5] [cleanup] update tests/snaps for Page --- .../src/components/Page/Page.test.tsx | 11 +- .../Page/__snapshots__/Page.test.tsx.snap | 172 +++++++++++++++++- 2 files changed, 172 insertions(+), 11 deletions(-) diff --git a/packages/patternfly-4/react-core/src/components/Page/Page.test.tsx b/packages/patternfly-4/react-core/src/components/Page/Page.test.tsx index 35b1be0b77d..bb519b65314 100644 --- a/packages/patternfly-4/react-core/src/components/Page/Page.test.tsx +++ b/packages/patternfly-4/react-core/src/components/Page/Page.test.tsx @@ -55,7 +55,7 @@ test('Check page to verify breadcrumb is created', () => { ); const view = mount( - + }> Section with default background Section with light background Section with dark background @@ -63,9 +63,10 @@ test('Check page to verify breadcrumb is created', () => { ); expect(view).toMatchSnapshot(); + expect(view.find(`.pf-c-page__main`).getDOMNode().id).toBe(''); }); -test('Check page to verify skip to content is created', () => { +test('Check page to verify skip to content points to main content region', () => { const Header = ; const Sidebar = ; const PageBreadcrumb = ( @@ -78,7 +79,8 @@ test('Check page to verify skip to content is created', () => { ); - const PageSkipToContent = Skip to Content; + const mainId = 'main-content-page-layout-test-nav'; + const PageSkipToContent = Skip to Content; const view = mount( { sidebar={Sidebar} breadcrumb={PageBreadcrumb} skipToContent={PageSkipToContent} + mainContainerId={mainId} > Section with default background Section with light background @@ -94,4 +97,6 @@ test('Check page to verify skip to content is created', () => { ); expect(view).toMatchSnapshot(); + expect(view.find(`.pf-c-page`).getDOMNode().id).toBe(props.id); + expect(view.find(`.pf-c-page__main`).getDOMNode().id).toBe(mainId); }); diff --git a/packages/patternfly-4/react-core/src/components/Page/__snapshots__/Page.test.tsx.snap b/packages/patternfly-4/react-core/src/components/Page/__snapshots__/Page.test.tsx.snap index 6a98c08dea1..e6d02c80f5f 100644 --- a/packages/patternfly-4/react-core/src/components/Page/__snapshots__/Page.test.tsx.snap +++ b/packages/patternfly-4/react-core/src/components/Page/__snapshots__/Page.test.tsx.snap @@ -123,7 +123,7 @@ exports[`Check page horizontal layout example against snapshot 1`] = ` exports[`Check page to verify breadcrumb is created 1`] = ` } className="my-page-class" header={ - + + + + +
`; -exports[`Check page to verify skip to content is created 1`] = ` +exports[`Check page to verify skip to content points to main content region 1`] = ` Skip to Content @@ -308,12 +464,12 @@ exports[`Check page to verify skip to content is created 1`] = ` Skip to Content @@ -364,7 +520,7 @@ exports[`Check page to verify skip to content is created 1`] = `