Skip to content

Commit 6411961

Browse files
rebeccaalpertrebeccaalpert
authored
chore(docs): Add onClick to SkipToContent in demos (#11297)
* 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. * chore(SkipToContent): Update demo Use refs in demo to match other demos.
1 parent 9206fc5 commit 6411961

22 files changed

+430
-273
lines changed

‎packages/react-core/src/components/SkipToContent/examples/SkipToContentBasic.tsx‎

Lines changed: 144 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -1,128 +1,146 @@
11
import React from 'react';
2-
import { SkipToContent } from '@patternfly/react-core';
2+
import { Content, SkipToContent } from '@patternfly/react-core';
33

4-
export const SkipToContentBasic: React.FunctionComponent = () => (
5-
<React.Fragment>
6-
<SkipToContent href="#main-content">Skip to content</SkipToContent>
7-
<p>Press tab to skip to content at the bottom of the page.</p>
8-
<div style={{ height: '2000px' }}></div>
9-
<h1 id="main-content">Main content</h1>
10-
<p>
11-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla
12-
nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel
13-
erat vel, interdum mattis neque. Sub works as well!
14-
</p>
15-
<h2>Second level</h2>
16-
<p>
17-
Curabitur accumsan turpis pharetra
18-
<strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin
19-
pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at
20-
dignissim dui. Ut et neque nisl.
21-
</p>
22-
<ul>
23-
<li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
24-
<li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
25-
<li>
26-
Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
27-
<ul>
28-
<li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
29-
<li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
30-
<li>
31-
Ut venenatis, nisl scelerisque.
32-
<ol>
33-
<li>Donec blandit a lorem id convallis.</li>
34-
<li>Cras gravida arcu at diam gravida gravida.</li>
35-
<li>Integer in volutpat libero.</li>
36-
</ol>
37-
</li>
38-
</ul>
39-
</li>
40-
<li>Ut non enim metus.</li>
41-
</ul>
42-
<h3>Third level</h3>
43-
<p>
44-
Quisque ante lacus, malesuada ac auctor vitae, congue
45-
<a href="#">non ante</a>. Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum
46-
tellus.
47-
</p>
48-
<ol>
49-
<li>Donec blandit a lorem id convallis.</li>
50-
<li>Cras gravida arcu at diam gravida gravida.</li>
51-
<li>Integer in volutpat libero.</li>
52-
<li>Donec a diam tellus.</li>
53-
<li>
54-
Etiam auctor nisl et.
55-
<ul>
56-
<li>Donec blandit a lorem id convallis.</li>
57-
<li>Cras gravida arcu at diam gravida gravida.</li>
58-
<li>
59-
Integer in volutpat libero.
60-
<ol>
61-
<li>Donec blandit a lorem id convallis.</li>
62-
<li>Cras gravida arcu at diam gravida gravida.</li>
63-
</ol>
64-
</li>
65-
</ul>
66-
</li>
67-
<li>Aenean nec tortor orci.</li>
68-
<li>Quisque aliquam cursus urna, non bibendum massa viverra eget.</li>
69-
<li>Vivamus maximus ultricies pulvinar.</li>
70-
</ol>
71-
<blockquote>
72-
Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet
73-
turpis.
74-
</blockquote>
75-
<p>
76-
Quisque at semper enim, eu hendrerit odio. Etiam auctor nisl et
77-
<em>justo sodales</em> elementum. Maecenas ultrices lacus quis neque consectetur, et lobortis nisi molestie.
78-
</p>
79-
<hr />
80-
<p>
81-
Sed sagittis enim ac tortor maximus rutrum. Nulla facilisi. Donec mattis vulputate risus in luctus. Maecenas
82-
vestibulum interdum commodo.
83-
</p>
84-
<dl>
85-
<dt>Web</dt>
86-
<dd>The part of the internet that contains websites and web pages</dd>
87-
<dt>HTML</dt>
88-
<dd>A markup language for creating web pages</dd>
89-
<dt>CSS</dt>
90-
<dd>A technology to make HTML look better</dd>
91-
</dl>
92-
<p>
93-
Suspendisse egestas sapien non felis placerat elementum. Morbi tortor nisl, suscipit sed mi sit amet, mollis
94-
malesuada nulla. Nulla facilisi. Nullam ac erat ante.
95-
</p>
96-
<h4>Fourth level</h4>
97-
<p>
98-
Nulla efficitur eleifend nisi, sit amet bibendum sapien fringilla ac. Mauris euismod metus a tellus laoreet, at
99-
elementum ex efficitur.
100-
</p>
101-
<p>
102-
Maecenas eleifend sollicitudin dui, faucibus sollicitudin augue cursus non. Ut finibus eleifend arcu ut vehicula.
103-
Mauris eu est maximus est porta condimentum in eu justo. Nulla id iaculis sapien.
104-
</p>
105-
<small>Sometimes you need small text to display things like date created</small>
106-
<p>
107-
Phasellus porttitor enim id metus volutpat ultricies. Ut nisi nunc, blandit sed dapibus at, vestibulum in felis.
108-
Etiam iaculis lorem ac nibh bibendum rhoncus. Nam interdum efficitur ligula sit amet ullamcorper. Etiam tristique,
109-
leo vitae porta faucibus, mi lacus laoreet metus, at cursus leo est vel tellus. Sed ac posuere est. Nunc ultricies
110-
nunc neque, vitae ultricies ex sodales quis. Aliquam eu nibh in libero accumsan pulvinar. Nullam nec nisl
111-
placerat, pretium metus vel, euismod ipsum. Proin tempor cursus nisl vel condimentum. Nam pharetra varius metus
112-
non pellentesque.
113-
</p>
114-
<h5>Fifth level</h5>
115-
<p>
116-
Aliquam sagittis rhoncus vulputate. Cras non luctus sem, sed tincidunt ligula. Vestibulum at nunc elit. Praesent
117-
aliquet ligula mi, in luctus elit volutpat porta. Phasellus molestie diam vel nisi sodales, a eleifend augue
118-
laoreet. Sed nec eleifend justo. Nam et sollicitudin odio.
119-
</p>
120-
<h6>Sixth level</h6>
121-
<p>
122-
Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus sed diam dignissim, ut eleifend eros
123-
accumsan. Phasellus non tortor eros. Ut sed rutrum lacus. Etiam purus nunc, scelerisque quis enim vitae, malesuada
124-
ultrices turpis. Nunc vitae maximus purus, nec consectetur dui. Suspendisse euismod, elit vel rutrum commodo,
125-
ipsum tortor maximus dui, sed varius sapien odio vitae est. Etiam at cursus metus.
126-
</p>
127-
</React.Fragment>
128-
);
4+
export const SkipToContentBasic: React.FunctionComponent = () => {
5+
const mainContentId = 'main-content';
6+
const handleClick = (e) => {
7+
e.preventDefault();
8+
const mainContentElement = document.getElementById(mainContentId);
9+
if (mainContentElement) {
10+
mainContentElement.focus();
11+
mainContentElement.scrollIntoView();
12+
}
13+
};
14+
15+
return (
16+
<React.Fragment>
17+
<SkipToContent onClick={handleClick} href={`#${mainContentId}`}>
18+
Skip to content
19+
</SkipToContent>
20+
<p>Press tab to skip to content at the bottom of the page.</p>
21+
<div style={{ height: '2000px' }}></div>
22+
<div tabIndex={-1} id={mainContentId}>
23+
<Content>
24+
<h1>Main content</h1>
25+
<p>
26+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida,
27+
nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio,
28+
sollicitudin vel erat vel, interdum mattis neque. Sub works as well!
29+
</p>
30+
<h2>Second level</h2>
31+
<p>
32+
Curabitur accumsan turpis pharetra
33+
<strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id.
34+
Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus
35+
facilisis. Donec at dignissim dui. Ut et neque nisl.
36+
</p>
37+
<ul>
38+
<li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
39+
<li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
40+
<li>
41+
Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
42+
<ul>
43+
<li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
44+
<li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
45+
<li>
46+
Ut venenatis, nisl scelerisque.
47+
<ol>
48+
<li>Donec blandit a lorem id convallis.</li>
49+
<li>Cras gravida arcu at diam gravida gravida.</li>
50+
<li>Integer in volutpat libero.</li>
51+
</ol>
52+
</li>
53+
</ul>
54+
</li>
55+
<li>Ut non enim metus.</li>
56+
</ul>
57+
<h3>Third level</h3>
58+
<p>
59+
Quisque ante lacus, malesuada ac auctor vitae, congue
60+
<a href="#">non ante</a>. Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu
61+
rutrum tellus.
62+
</p>
63+
<ol>
64+
<li>Donec blandit a lorem id convallis.</li>
65+
<li>Cras gravida arcu at diam gravida gravida.</li>
66+
<li>Integer in volutpat libero.</li>
67+
<li>Donec a diam tellus.</li>
68+
<li>
69+
Etiam auctor nisl et.
70+
<ul>
71+
<li>Donec blandit a lorem id convallis.</li>
72+
<li>Cras gravida arcu at diam gravida gravida.</li>
73+
<li>
74+
Integer in volutpat libero.
75+
<ol>
76+
<li>Donec blandit a lorem id convallis.</li>
77+
<li>Cras gravida arcu at diam gravida gravida.</li>
78+
</ol>
79+
</li>
80+
</ul>
81+
</li>
82+
<li>Aenean nec tortor orci.</li>
83+
<li>Quisque aliquam cursus urna, non bibendum massa viverra eget.</li>
84+
<li>Vivamus maximus ultricies pulvinar.</li>
85+
</ol>
86+
<blockquote>
87+
Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus
88+
sit amet turpis.
89+
</blockquote>
90+
<p>
91+
Quisque at semper enim, eu hendrerit odio. Etiam auctor nisl et
92+
<em>justo sodales</em> elementum. Maecenas ultrices lacus quis neque consectetur, et lobortis nisi molestie.
93+
</p>
94+
<hr />
95+
<p>
96+
Sed sagittis enim ac tortor maximus rutrum. Nulla facilisi. Donec mattis vulputate risus in luctus. Maecenas
97+
vestibulum interdum commodo.
98+
</p>
99+
<dl>
100+
<dt>Web</dt>
101+
<dd>The part of the internet that contains websites and web pages</dd>
102+
<dt>HTML</dt>
103+
<dd>A markup language for creating web pages</dd>
104+
<dt>CSS</dt>
105+
<dd>A technology to make HTML look better</dd>
106+
</dl>
107+
<p>
108+
Suspendisse egestas sapien non felis placerat elementum. Morbi tortor nisl, suscipit sed mi sit amet, mollis
109+
malesuada nulla. Nulla facilisi. Nullam ac erat ante.
110+
</p>
111+
<h4>Fourth level</h4>
112+
<p>
113+
Nulla efficitur eleifend nisi, sit amet bibendum sapien fringilla ac. Mauris euismod metus a tellus laoreet,
114+
at elementum ex efficitur.
115+
</p>
116+
<p>
117+
Maecenas eleifend sollicitudin dui, faucibus sollicitudin augue cursus non. Ut finibus eleifend arcu ut
118+
vehicula. Mauris eu est maximus est porta condimentum in eu justo. Nulla id iaculis sapien.
119+
</p>
120+
<small>Sometimes you need small text to display things like date created</small>
121+
<p>
122+
Phasellus porttitor enim id metus volutpat ultricies. Ut nisi nunc, blandit sed dapibus at, vestibulum in
123+
felis. Etiam iaculis lorem ac nibh bibendum rhoncus. Nam interdum efficitur ligula sit amet ullamcorper.
124+
Etiam tristique, leo vitae porta faucibus, mi lacus laoreet metus, at cursus leo est vel tellus. Sed ac
125+
posuere est. Nunc ultricies nunc neque, vitae ultricies ex sodales quis. Aliquam eu nibh in libero accumsan
126+
pulvinar. Nullam nec nisl placerat, pretium metus vel, euismod ipsum. Proin tempor cursus nisl vel
127+
condimentum. Nam pharetra varius metus non pellentesque.
128+
</p>
129+
<h5>Fifth level</h5>
130+
<p>
131+
Aliquam sagittis rhoncus vulputate. Cras non luctus sem, sed tincidunt ligula. Vestibulum at nunc elit.
132+
Praesent aliquet ligula mi, in luctus elit volutpat porta. Phasellus molestie diam vel nisi sodales, a
133+
eleifend augue laoreet. Sed nec eleifend justo. Nam et sollicitudin odio.
134+
</p>
135+
<h6>Sixth level</h6>
136+
<p>
137+
Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus sed diam dignissim, ut eleifend
138+
eros accumsan. Phasellus non tortor eros. Ut sed rutrum lacus. Etiam purus nunc, scelerisque quis enim
139+
vitae, malesuada ultrices turpis. Nunc vitae maximus purus, nec consectetur dui. Suspendisse euismod, elit
140+
vel rutrum commodo, ipsum tortor maximus dui, sed varius sapien odio vitae est. Etiam at cursus metus.
141+
</p>
142+
</Content>
143+
</div>
144+
</React.Fragment>
145+
);
146+
};

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

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -98,8 +98,19 @@ export const DashboardWrapper: React.FC<DashboardWrapperProps> = ({
9898
</PageSidebar>
9999
);
100100

101+
const defaultContainerId = 'main-content-page-layout-default-nav';
102+
103+
const handleClick = (event: React.MouseEvent) => {
104+
event.preventDefault();
105+
106+
const mainContentElement = document.getElementById(mainContainerId ?? defaultContainerId);
107+
if (mainContentElement) {
108+
mainContentElement.focus();
109+
}
110+
};
111+
101112
const PageSkipToContent = (
102-
<SkipToContent href={`#${mainContainerId ?? 'main-content-page-layout-default-nav'}`}>
113+
<SkipToContent onClick={handleClick} href={`#${mainContainerId ?? defaultContainerId}`}>
103114
Skip to content
104115
</SkipToContent>
105116
);
@@ -112,7 +123,7 @@ export const DashboardWrapper: React.FC<DashboardWrapperProps> = ({
112123
skipToContent={PageSkipToContent}
113124
banner={banner}
114125
breadcrumb={renderedBreadcrumb}
115-
mainContainerId={mainContainerId ?? 'main-content-page-layout-default-nav'}
126+
mainContainerId={mainContainerId ?? defaultContainerId}
116127
notificationDrawer={notificationDrawer}
117128
isNotificationDrawerExpanded={isNotificationDrawerExpanded}
118129
{...(typeof onPageResize === 'function' && {

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

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -279,7 +279,21 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
279279
</PageSidebar>
280280
);
281281
const pageId = 'main-content-page-layout-default-nav';
282-
const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
282+
283+
const handleClick = (event) => {
284+
event.preventDefault();
285+
286+
const mainContentElement = document.getElementById(pageId);
287+
if (mainContentElement) {
288+
mainContentElement.focus();
289+
}
290+
};
291+
292+
const PageSkipToContent = (
293+
<SkipToContent onClick={handleClick} href={`#${pageId}`}>
294+
Skip to content
295+
</SkipToContent>
296+
);
283297

284298
const PageBreadcrumb = (
285299
<Breadcrumb>

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

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -329,7 +329,21 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
329329
</PageSidebar>
330330
);
331331
const pageId = 'main-content-page-layout-default-nav';
332-
const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
332+
333+
const handleClick = (event) => {
334+
event.preventDefault();
335+
336+
const mainContentElement = document.getElementById(pageId);
337+
if (mainContentElement) {
338+
mainContentElement.focus();
339+
}
340+
};
341+
342+
const PageSkipToContent = (
343+
<SkipToContent onClick={handleClick} href={`#${pageId}`}>
344+
Skip to content
345+
</SkipToContent>
346+
);
333347

334348
const PageBreadcrumb = (
335349
<Breadcrumb>

0 commit comments

Comments
 (0)