Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(page): skip to content should point to primary content container #2519

Merged
merged 5 commits into from Jul 26, 2019
Merged

fix(page): skip to content should point to primary content container #2519

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
418c666
fix(page): skip to content should point to primary content container
seanforyou23 Jul 15, 2019
7363129
[cleanup] update snaps
seanforyou23 Jul 15, 2019
6a1458f
[cleanup] apply adjustments to demos and react-integration
seanforyou23 Jul 23, 2019
e5d1c89
[cleanup] fix lint errors
seanforyou23 Jul 23, 2019
15b8282
[cleanup] update tests/snaps for Page
seanforyou23 Jul 25, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
9 changes: 6 additions & 3 deletions packages/patternfly-4/react-core/src/components/Page/Page.tsx
View file
Open in desktop
Expand Up @@ -24,6 +24,8 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
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
Expand Down Expand Up @@ -59,7 +61,8 @@ export class Page extends React.Component<PageProps, PageState> {
sidebar: null as React.ReactNode,
skipToContent: null as React.ReactElement,
isManagedSidebar: false,
onPageResize: ():void => null
onPageResize: ():void => null,
mainContainerId: null as string
};

componentDidMount() {
Expand Down Expand Up @@ -110,6 +113,7 @@ export class Page extends React.Component<PageProps, PageState> {
header,
sidebar,
skipToContent,
mainContainerId,
isManagedSidebar,
onPageResize,
...rest
Expand All @@ -128,9 +132,8 @@ export class Page extends React.Component<PageProps, PageState> {
{skipToContent}
{header}
{sidebar}
<main role="main" className={css(styles.pageMain)}>
<main role="main" id={mainContainerId} className={css(styles.pageMain)} tabIndex={-1}>
{breadcrumb && <section className={css(styles.pageMainBreadcrumb)}>{breadcrumb}</section>}
{skipToContent && <a id={skipToContent.props.href.replace(/#*/, '')} />}
{children}
</main>
</div>
Expand Down
15 changes: 12 additions & 3 deletions packages/patternfly-4/react-core/src/components/Page/__snapshots__/Page.test.tsx.snap
View file
Open in desktop
Expand Up @@ -15,6 +15,7 @@ exports[`Check page horizontal layout example against snapshot 1`] = `
}
id="PageId"
isManagedSidebar={false}
mainContainerId={null}
onPageResize={[Function]}
sidebar={
<Unknown
Expand Down Expand Up @@ -74,7 +75,9 @@ exports[`Check page horizontal layout example against snapshot 1`] = `
</Component>
<main
className="pf-c-page__main"
id={null}
role="main"
tabIndex={-1}
>
<Component
variant="default"
Expand Down Expand Up @@ -132,6 +135,7 @@ exports[`Check page to verify breadcrumb is created 1`] = `
}
id="PageId"
isManagedSidebar={false}
mainContainerId={null}
onPageResize={[Function]}
sidebar={
<Unknown
Expand Down Expand Up @@ -191,7 +195,9 @@ exports[`Check page to verify breadcrumb is created 1`] = `
</Component>
<main
className="pf-c-page__main"
id={null}
role="main"
tabIndex={-1}
>
<section
className="pf-c-page__main-breadcrumb"
Expand Down Expand Up @@ -276,6 +282,7 @@ exports[`Check page to verify skip to content is created 1`] = `
}
id="PageId"
isManagedSidebar={false}
mainContainerId={null}
onPageResize={[Function]}
sidebar={
<Unknown
Expand Down Expand Up @@ -357,7 +364,9 @@ exports[`Check page to verify skip to content is created 1`] = `
</Component>
<main
className="pf-c-page__main"
id={null}
role="main"
tabIndex={-1}
>
<section
className="pf-c-page__main-breadcrumb"
Expand Down Expand Up @@ -518,9 +527,6 @@ exports[`Check page to verify skip to content is created 1`] = `
</nav>
</Component>
</section>
<a
id="main-content-page-layout-default-nav"
/>
<Component
variant="default"
>
Expand Down Expand Up @@ -577,6 +583,7 @@ exports[`Check page vertical layout example against snapshot 1`] = `
}
id="PageId"
isManagedSidebar={false}
mainContainerId={null}
onPageResize={[Function]}
sidebar={
<Unknown
Expand Down Expand Up @@ -635,7 +642,9 @@ exports[`Check page vertical layout example against snapshot 1`] = `
</Component>
<main
className="pf-c-page__main"
id={null}
role="main"
tabIndex={-1}
>
<Component
variant="default"
Expand Down
6 changes: 3 additions & 3 deletions packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutDefaultNav.js
View file
Open in desktop
Expand Up @@ -169,9 +169,8 @@ class PageLayoutDefaultNav extends React.Component {
/>
);
const Sidebar = <PageSidebar nav={PageNav} />;
const PageSkipToContent = (
<SkipToContent href="#main-content-page-layout-default-nav"> Skip to Content</SkipToContent>
);
const pageId = 'main-content-page-layout-default-nav';
const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to Content</SkipToContent>;

const PageBreadcrumb = (
<Breadcrumb>
Expand All @@ -192,6 +191,7 @@ class PageLayoutDefaultNav extends React.Component {
isManagedSidebar
skipToContent={PageSkipToContent}
breadcrumb={PageBreadcrumb}
mainContainerId={pageId}
>
<PageSection variant={PageSectionVariants.light}>
<TextContent>
Expand Down
6 changes: 3 additions & 3 deletions packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutExpandableNav.js
View file
Open in desktop
Expand Up @@ -203,9 +203,8 @@ class PageLayoutExpandableNav extends React.Component {
</BreadcrumbItem>
</Breadcrumb>
);
const PageSkipToContent = (
<SkipToContent href="#main-content-page-layout-expandable-nav">Skip to Content</SkipToContent>
);
const pageId = 'main-content-page-layout-expandable-nav';
const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to Content</SkipToContent>;

return (
<React.Fragment>
Expand All @@ -215,6 +214,7 @@ class PageLayoutExpandableNav extends React.Component {
isManagedSidebar
skipToContent={PageSkipToContent}
breadcrumb={PageBreadcrumb}
mainContainerId={pageId}
>
<PageSection variant={PageSectionVariants.light}>
<TextContent>
Expand Down
11 changes: 9 additions & 2 deletions packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutGroupsNav.js
View file
Open in desktop
Expand Up @@ -177,11 +177,18 @@ class PageLayoutGroupsNav extends React.Component {
/>
);
const Sidebar = <PageSidebar nav={PageNav} />;
const PageSkipToContent = <SkipToContent href="#main-content-page-layout-group-nav">Skip to Content</SkipToContent>;
const pageId = 'main-content-page-layout-group-nav';
const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to Content</SkipToContent>;

return (
<React.Fragment>
<Page header={Header} sidebar={Sidebar} isManagedSidebar skipToContent={PageSkipToContent}>
<Page
header={Header}
sidebar={Sidebar}
isManagedSidebar
skipToContent={PageSkipToContent}
mainContainerId={pageId}
>
<PageSection variant={PageSectionVariants.light}>
<TextContent>
<Text component="h1">Main Title</Text>
Expand Down
8 changes: 3 additions & 5 deletions packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutHorizontalNav.js
View file
Open in desktop
Expand Up @@ -179,14 +179,12 @@ class PageLayoutHorizontalNav extends React.Component {
</BreadcrumbItem>
</Breadcrumb>
);

const PageSkipToContent = (
<SkipToContent href="#main-content-page-layout-default-nav">Skip to Content</SkipToContent>
);
const pageId = 'main-content-page-layout-horizontal-nav';
const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to Content</SkipToContent>;

return (
<React.Fragment>
<Page header={Header} skipToContent={PageSkipToContent} breadcrumb={PageBreadcrumb}>
<Page header={Header} skipToContent={PageSkipToContent} breadcrumb={PageBreadcrumb} mainContainerId={pageId}>
<PageSection variant={PageSectionVariants.light}>
<TextContent>
<Text component="h1">Main Title</Text>
Expand Down
13 changes: 9 additions & 4 deletions packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutManualNav.js
View file
Open in desktop
Expand Up @@ -197,13 +197,18 @@ class PageLayoutManualNav extends React.Component {
/>
);
const Sidebar = <PageSidebar nav={PageNav} isNavOpen={isMobileView ? isNavOpenMobile : isNavOpenDesktop} />;
const PageSkipToContent = (
<SkipToContent href="#main-content-page-layout-default-nav">Skip to Content</SkipToContent>
);
const pageId = 'main-content-page-layout-manual-nav';
const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to Content</SkipToContent>;

return (
<React.Fragment>
<Page header={Header} sidebar={Sidebar} onPageResize={this.onPageResize} skipToContent={PageSkipToContent}>
<Page
header={Header}
sidebar={Sidebar}
onPageResize={this.onPageResize}
skipToContent={PageSkipToContent}
mainContainerId={pageId}
>
<PageSection variant={PageSectionVariants.light}>
<TextContent>
<Text component="h1">Main Title</Text>
Expand Down
13 changes: 9 additions & 4 deletions packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutSimpleNav.js
View file
Open in desktop
Expand Up @@ -167,13 +167,18 @@ class PageLayoutSimpleNav extends React.Component {
/>
);
const Sidebar = <PageSidebar nav={PageNav} />;
const PageSkipToContent = (
<SkipToContent href="#main-content-page-layout-default-nav">Skip to Content</SkipToContent>
);
const pageId = 'main-content-page-layout-simple-nav';
const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to Content</SkipToContent>;

return (
<React.Fragment>
<Page header={Header} sidebar={Sidebar} isManagedSidebar skipToContent={PageSkipToContent}>
<Page
header={Header}
sidebar={Sidebar}
isManagedSidebar
skipToContent={PageSkipToContent}
mainContainerId={pageId}
>
<PageSection variant={PageSectionVariants.light}>
<TextContent>
<Text component="h1">Main Title</Text>
Expand Down
14 changes: 12 additions & 2 deletions packages/patternfly-4/react-integration/demo-app-ts/src/App.tsx
View file
Open in desktop
@@ -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';
Expand Down Expand Up @@ -46,10 +46,20 @@ class App extends React.Component {
);
};

private pageId = 'ts-demo-app-page-id';
private getSkipToContentLink = () => (
<SkipToContent href={`#${this.pageId}`}>Skip to Content</SkipToContent>
);

render() {
return (
<Router>
<Page header={<AppHeader />} sidebar={<AppSidebar nav={this.getNav()} />} isManagedSidebar>
<Page
header={<AppHeader />}
sidebar={<AppSidebar nav={this.getNav()} />}
skipToContent={this.getSkipToContentLink()}
isManagedSidebar
mainContainerId={this.pageId}>
{this.getPages()}
</Page>
</Router>
Expand Down
17 changes: 14 additions & 3 deletions ...ges/patternfly-4/react-integration/demo-app-ts/src/components/demos/PageDemo/PageDemo.tsx
View file
Open in desktop
@@ -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 = {
Expand Down Expand Up @@ -35,10 +42,14 @@ export class PageDemo extends React.Component {
logoComponent={'div'}
/>
);
const Sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} />;
const pageId = 'page-demo-page-id';
const PageSkipToContent = (
<SkipToContent href={`#${pageId}`}>Skip to Content</SkipToContent>
);
const Sidebar = <PageSidebar id="page-demo-sidebar" nav="Navigation" isNavOpen={isNavOpen} />;

return (
<Page header={Header} sidebar={Sidebar}>
<Page header={Header} sidebar={Sidebar} mainContainerId={pageId} skipToContent={PageSkipToContent}>
<PageSection variant={PageSectionVariants.darker}>Section with darker background</PageSection>
<PageSection variant={PageSectionVariants.dark}>Section with dark background</PageSection>
<PageSection variant={PageSectionVariants.light}>Section with light background</PageSection>
Expand Down