Skip to content

Commit 61767ab

Browse files
Mash707Mash707
authored
chore(page): updated examples to provide a11y labels (#11740)
1 parent 026f3f2 commit 61767ab

36 files changed

+192
-123
lines changed

‎packages/react-core/src/components/Page/examples/PageCenteredSection.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ export const PageCenteredSection: React.FunctionComponent = () => {
6868

6969
return (
7070
<Page masthead={masthead} sidebar={sidebar}>
71-
<PageSection isWidthLimited isCenterAligned>
71+
<PageSection isWidthLimited isCenterAligned aria-label="width limited page section">
7272
<Card>
7373
<CardBody>
7474
When a width limited page section is wider than the value of

‎packages/react-core/src/components/Page/examples/PageGroupSection.tsx

+9-3
Original file line numberDiff line numberDiff line change
@@ -101,10 +101,16 @@ export const PageGroupSection: React.FunctionComponent = () => {
101101
</BreadcrumbItem>
102102
</Breadcrumb>
103103
</PageBreadcrumb>
104-
<PageSection>Grouped section</PageSection>
104+
<PageSection aria-labelledby="grouped-section">
105+
<h2 id="grouped-section">Grouped section</h2>
106+
</PageSection>
105107
</PageGroup>
106-
<PageSection>Section 1</PageSection>
107-
<PageSection>Section 2</PageSection>
108+
<PageSection aria-labelledby="section-1">
109+
<h2 id="section-1">Grouped example section 1</h2>
110+
</PageSection>
111+
<PageSection aria-labelledby="section-2">
112+
<h2 id="section-2">Grouped example section 2</h2>
113+
</PageSection>
108114
</Page>
109115
);
110116
};

‎packages/react-core/src/components/Page/examples/PageHorizontalNav.tsx

+9-3
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,15 @@ export const PageHorizontalNav: React.FunctionComponent = () => {
3636

3737
return (
3838
<Page masthead={masthead}>
39-
<PageSection>Section 1</PageSection>
40-
<PageSection variant="secondary">Section 2 with secondary variant styling</PageSection>
41-
<PageSection>Section 3</PageSection>
39+
<PageSection aria-labelledby="section-1">
40+
<h2 id="section-1">Horizontal nav example section 1</h2>
41+
</PageSection>
42+
<PageSection variant="secondary" aria-labelledby="section-2">
43+
<h2 id="section-2">Horizontal nav example section 2 with secondary variant styling</h2>
44+
</PageSection>
45+
<PageSection aria-labelledby="section-3">
46+
<h2 id="section-3">Horizontal nav example section 3</h2>
47+
</PageSection>
4248
</Page>
4349
);
4450
};

‎packages/react-core/src/components/Page/examples/PageMainSectionPadding.tsx

+12-4
Original file line numberDiff line numberDiff line change
@@ -64,10 +64,18 @@ export const PageMainSectionPadding: React.FunctionComponent = () => {
6464

6565
return (
6666
<Page masthead={masthead} sidebar={sidebar}>
67-
<PageSection>Section with default padding</PageSection>
68-
<PageSection padding={{ default: 'noPadding' }}>Section with no padding</PageSection>
69-
<PageSection padding={{ default: 'noPadding', md: 'padding' }}>Section with padding on medium</PageSection>
70-
<PageSection padding={{ md: 'noPadding' }}>Section with no padding on medium</PageSection>
67+
<PageSection aria-labelledby="section-1">
68+
<h2 id="section-1">Section with default padding</h2>
69+
</PageSection>
70+
<PageSection padding={{ default: 'noPadding' }} aria-labelledby="section-2">
71+
<h2 id="section-2">Section with no padding</h2>
72+
</PageSection>
73+
<PageSection padding={{ default: 'noPadding', md: 'padding' }} aria-labelledby="section-3">
74+
<h2 id="section-3">Section with padding on medium</h2>
75+
</PageSection>
76+
<PageSection padding={{ md: 'noPadding' }} aria-labelledby="section-4">
77+
<h2 id="section-4">Section with no padding on medium</h2>
78+
</PageSection>
7179
</Page>
7280
);
7381
};

‎packages/react-core/src/components/Page/examples/PageMainSectionVariations.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -64,22 +64,22 @@ export const PageMainSectionPadding: React.FunctionComponent = () => {
6464

6565
return (
6666
<Page header={header} sidebar={sidebar}>
67-
<PageSection type="subnav">
67+
<PageSection type="subnav" aria-label="With subnav type">
6868
Section with <code>type="subnav"</code> for horizontal subnav navigation
6969
</PageSection>
70-
<PageSection type="nav">
70+
<PageSection type="nav" aria-label="With nav type">
7171
Section with <code>type="nav"</code> for tertiary navigation
7272
</PageSection>
73-
<PageSection type="tabs">
73+
<PageSection type="tabs" aria-label="With tabs type">
7474
Section with <code>type="tabs"</code> for tabs
7575
</PageSection>
76-
<PageSection type="breadcrumb">
76+
<PageSection type="breadcrumb" aria-label="With breadcrumb type">
7777
Section with <code>type="breadcrumb"</code> for breadcrumbs
7878
</PageSection>
79-
<PageSection>
79+
<PageSection aria-label="With default type">
8080
Section without <code>type</code> prop or <code>type="default"</code> for main sections
8181
</PageSection>
82-
<PageSection type="wizard">
82+
<PageSection type="wizard" aria-label="With wizard type">
8383
Section with <code>type="wizard"</code> for wizards
8484
</PageSection>
8585
</Page>

‎packages/react-core/src/components/Page/examples/PageMultipleSidebarBody.tsx

+9-3
Original file line numberDiff line numberDiff line change
@@ -71,9 +71,15 @@ export const PageMultipleSidebarBody: React.FunctionComponent = () => {
7171

7272
return (
7373
<Page masthead={masthead} sidebar={sidebar}>
74-
<PageSection>Section 1</PageSection>
75-
<PageSection>Section 2</PageSection>
76-
<PageSection>Section 3</PageSection>
74+
<PageSection aria-labelledby="section-1">
75+
<h2 id="section-1">Multiple sidebar body example section 1</h2>
76+
</PageSection>
77+
<PageSection aria-labelledby="section-2">
78+
<h2 id="section-2">Multiple sidebar body example section 2</h2>
79+
</PageSection>
80+
<PageSection aria-labelledby="section-3">
81+
<h2 id="section-3">Multiple sidebar body example section 3</h2>
82+
</PageSection>
7783
</Page>
7884
);
7985
};

‎packages/react-core/src/components/Page/examples/PageUncontrolledNav.tsx

+9-3
Original file line numberDiff line numberDiff line change
@@ -51,9 +51,15 @@ export const PageUncontrolledNav: React.FunctionComponent = () => {
5151

5252
return (
5353
<Page isManagedSidebar masthead={masthead} sidebar={sidebar}>
54-
<PageSection>Section 1</PageSection>
55-
<PageSection>Section 2</PageSection>
56-
<PageSection>Section 3</PageSection>
54+
<PageSection aria-labelledby="section-1">
55+
<h2 id="section-1">Uncontrolled nav example section 1</h2>
56+
</PageSection>
57+
<PageSection aria-labelledby="section-2">
58+
<h2 id="section-2">Uncontrolled nav example section 2</h2>
59+
</PageSection>
60+
<PageSection aria-labelledby="section-3">
61+
<h2 id="section-3">Uncontrolled nav example section 3</h2>
62+
</PageSection>
5763
</Page>
5864
);
5965
};

‎packages/react-core/src/components/Page/examples/PageVerticalNav.tsx

+9-3
Original file line numberDiff line numberDiff line change
@@ -64,9 +64,15 @@ export const PageVerticalNav: React.FunctionComponent = () => {
6464

6565
return (
6666
<Page masthead={masthead} sidebar={sidebar}>
67-
<PageSection>Section 1</PageSection>
68-
<PageSection variant="secondary">Section 2 with secondary variant styling</PageSection>
69-
<PageSection>Section 3</PageSection>
67+
<PageSection aria-labelledby="section-1">
68+
<h2 id="section-1">Vertical nav example section 1</h2>
69+
</PageSection>
70+
<PageSection variant="secondary" aria-labelledby="section-2">
71+
<h2 id="section-2">Vertical nav example section 2 with secondary variant styling</h2>
72+
</PageSection>
73+
<PageSection aria-labelledby="section-3">
74+
<h2 id="section-3">Vertical nav example section 3</h2>
75+
</PageSection>
7076
</Page>
7177
);
7278
};

‎packages/react-core/src/components/Page/examples/PageWithOrWithoutFill.tsx

+8-4
Original file line numberDiff line numberDiff line change
@@ -64,11 +64,15 @@ export const PageWithOrWithoutFill: React.FunctionComponent = () => {
6464

6565
return (
6666
<Page isContentFilled masthead={masthead} sidebar={sidebar}>
67-
<PageSection>A default page section</PageSection>
68-
<PageSection isFilled={true} variant="secondary">
69-
This section fills the available space.
67+
<PageSection aria-labelledby="section-1">
68+
<h2 id="section-1">Section without fill</h2>
69+
</PageSection>
70+
<PageSection isFilled={true} variant="secondary" aria-labelledby="section-2">
71+
<h2 id="section-2">Section with fill</h2>
72+
</PageSection>
73+
<PageSection aria-labelledby="section-3">
74+
<h2 id="section-3">Another section without fill</h2>
7075
</PageSection>
71-
<PageSection>A default page section</PageSection>
7276
</Page>
7377
);
7478
};

‎packages/react-core/src/demos/Banner.md

+6-6
Original file line numberDiff line numberDiff line change
@@ -39,16 +39,16 @@ class BannerDemo extends React.Component {
3939
return (
4040
<Fragment>
4141
<DashboardWrapper banner={banner} breadcrumb={null}>
42-
<PageSection>
42+
<PageSection aria-labelledby="main-title">
4343
<Content>
44-
<h1>Main title</h1>
44+
<h1 id="main-title">Main title</h1>
4545
<p>
4646
Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
4747
of it’s relative line height of 1.5.
4848
</p>
4949
</Content>
5050
</PageSection>
51-
<PageSection>
51+
<PageSection aria-label='Cards gallery'>
5252
<Gallery hasGutter>
5353
{Array.from({ length: 30 }).map((_value, index) => (
5454
<GalleryItem key={index}>
@@ -112,17 +112,17 @@ class BannerDemo extends React.Component {
112112
</FlexItem>
113113
<FlexItem grow={{ default: 'grow' }} style={{ minHeight: 0 }}>
114114
<DashboardWrapper breadcrumb={null}>
115-
<PageSection>
115+
<PageSection aria-labelledby="main-title">
116116
<Content>
117-
<h1>Main title</h1>
117+
<h1 id='main-title'>Main title</h1>
118118
<p>
119119
Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because{' '}
120120
<br />
121121
of it’s relative line height of 1.5.
122122
</p>
123123
</Content>
124124
</PageSection>
125-
<PageSection>
125+
<PageSection aria-label='Cards gallery'>
126126
<Gallery hasGutter>
127127
{Array.from({ length: 30 }).map((_value, index) => (
128128
<GalleryItem key={index}>

‎packages/react-core/src/demos/CardView/examples/CardView.tsx

+9-4
Original file line numberDiff line numberDiff line change
@@ -465,16 +465,16 @@ export const CardViewBasic: React.FunctionComponent = () => {
465465
return (
466466
<Fragment>
467467
<DashboardWrapper mainContainerId="main-content-card-view-default-nav" breadcrumb={null}>
468-
<PageSection>
468+
<PageSection aria-labelledby="projects">
469469
<Content>
470-
<h1>Projects</h1>
470+
<h1 id="projects">Projects</h1>
471471
<p>This is a demo that showcases PatternFly cards.</p>
472472
</Content>
473473
<Toolbar id="toolbar-group-types" clearAllFilters={onDelete}>
474474
<ToolbarContent>{toolbarItems}</ToolbarContent>
475475
</Toolbar>
476476
</PageSection>
477-
<PageSection isFilled>
477+
<PageSection isFilled aria-label="Selectable card gallery">
478478
<Gallery hasGutter aria-label="Selectable card container">
479479
<Card isCompact>
480480
<Bullseye>
@@ -546,7 +546,12 @@ export const CardViewBasic: React.FunctionComponent = () => {
546546
))}
547547
</Gallery>
548548
</PageSection>
549-
<PageSection isFilled={false} stickyOnBreakpoint={{ default: 'bottom' }} padding={{ default: 'noPadding' }}>
549+
<PageSection
550+
isFilled={false}
551+
stickyOnBreakpoint={{ default: 'bottom' }}
552+
padding={{ default: 'noPadding' }}
553+
aria-label="Pagination controls"
554+
>
550555
<Pagination
551556
itemCount={totalItemCount}
552557
page={page}

‎packages/react-core/src/demos/DataList/examples/DataListActionable.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,15 @@ export const DataListActionable: React.FunctionComponent = () => {
3333

3434
return (
3535
<DashboardWrapper mainContainerId="main-content-datalist-view-actions" breadcrumb={null}>
36-
<PageSection>
36+
<PageSection aria-labelledby="projects">
3737
<Content>
38-
<Title headingLevel="h1">Projects</Title>
38+
<Title headingLevel="h1" id="projects">
39+
Projects
40+
</Title>
3941
<Content component="p">This is a demo that showcases PatternFly Data List</Content>
4042
</Content>
4143
</PageSection>
42-
<PageSection>
44+
<PageSection aria-label="Data list of projects">
4345
<DataList aria-label="single action data list example ">
4446
{!isDeleted && (
4547
<DataListItem aria-labelledby="single-action-item1">

‎packages/react-core/src/demos/DataList/examples/DataListBasic.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -69,9 +69,9 @@ export const DataListBasic: React.FunctionComponent = () => {
6969
return (
7070
<Fragment>
7171
<DashboardWrapper mainContainerId="main-content-datalist-view-default-nav" breadcrumb={null}>
72-
<PageSection>
72+
<PageSection aria-labelledby="projects">
7373
<Content>
74-
<h1>Projects</h1>
74+
<h1 id="projects">Projects</h1>
7575
<p>This is a demo that showcases PatternFly data list</p>
7676
</Content>
7777
</PageSection>

‎packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -133,9 +133,9 @@ export const DataListExpandableControlInToolbar: React.FunctionComponent = () =>
133133
return (
134134
<Fragment>
135135
<DashboardWrapper mainContainerId="main-content-datalist-view-default-nav" breadcrumb={null}>
136-
<PageSection>
136+
<PageSection aria-labelledby="projects">
137137
<Content>
138-
<h1>Projects</h1>
138+
<h1 id="projects">Projects</h1>
139139
<p>This is a demo that showcases PatternFly data list</p>
140140
</Content>
141141
</PageSection>

‎packages/react-core/src/demos/DataList/examples/DataListStaticBottomPagination.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -113,9 +113,11 @@ export const DataListStaticBottomPagination: React.FunctionComponent = () => {
113113

114114
return (
115115
<DashboardWrapper mainContainerId="main-content-datalist-view-pagination" breadcrumb={null}>
116-
<PageSection>
116+
<PageSection aria-labelledby="projects">
117117
<Content>
118-
<Content component="h1">Projects</Content>
118+
<Content component="h1" id="projects">
119+
Projects
120+
</Content>
119121
<Content component="p">This is a demo that showcases PatternFly Data List</Content>
120122
</Content>
121123
</PageSection>

‎packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -18,16 +18,16 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
1818

1919
export const DescriptionListBasic: React.FunctionComponent = () => (
2020
<DashboardWrapper>
21-
<PageSection>
21+
<PageSection aria-labelledby="projects">
2222
<Content>
23-
<Content component="h1">Projects</Content>
23+
<h1 id="projects">Projects</h1>
2424
<Content component="p">This is a full page demo</Content>
2525
</Content>
2626
</PageSection>
27-
<PageSection>
27+
<PageSection aria-labelledby="details">
2828
<Card>
2929
<CardHeader>
30-
<Title headingLevel="h2" size="lg">
30+
<Title headingLevel="h2" size="lg" id="details">
3131
Details
3232
</Title>
3333
</CardHeader>

‎packages/react-core/src/demos/DescriptionList/examples/DescriptionListInDrawer.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -150,13 +150,15 @@ export const DescriptionListInDrawer: React.FunctionComponent = () => {
150150
isNotificationDrawerExpanded={isExpanded}
151151
onNotificationDrawerExpand={onExpand}
152152
>
153-
<PageSection>
153+
<PageSection aria-labelledby="main-title">
154154
<Content>
155-
<Content component="h1">Main title</Content>
155+
<Content component="h1" id="main-title">
156+
Main title
157+
</Content>
156158
<Content component="p">This is a full page demo.</Content>
157159
</Content>
158160
</PageSection>
159-
<PageSection>{drawerContent}</PageSection>
161+
<PageSection aria-label="Drawer Content">{drawerContent}</PageSection>
160162
</DashboardWrapper>
161163
);
162164
};

‎packages/react-core/src/demos/JumpLinks.md

+5-5
Original file line numberDiff line numberDiff line change
@@ -79,8 +79,8 @@ ScrollspyH2 = () => {
7979

8080
return (
8181
<DashboardWrapper breadcrumb={null} mainContainerId="scrollable-element">
82-
<PageSection>
83-
<Title headingLevel="h1" size="2xl">
82+
<PageSection aria-labelledby='main-title'>
83+
<Title headingLevel="h1" size="2xl" id='main-title'>
8484
Main title
8585
</Title>
8686
<Switch
@@ -90,10 +90,10 @@ ScrollspyH2 = () => {
9090
onChange={(_event, check) => setIsVertical(check)}
9191
/>
9292
</PageSection>
93-
<PageSection padding={{ default: 'noPadding' }}>
93+
<PageSection padding={{ default: 'noPadding' }} >
9494
<Sidebar hasGutter orientation={!isVertical && 'stack'}>
9595
<SidebarPanel variant="sticky">
96-
<PageSection>
96+
<PageSection aria-label='Jump links navigation'>
9797
<JumpLinks
9898
isVertical={isVertical}
9999
isCentered={!isVertical}
@@ -113,7 +113,7 @@ ScrollspyH2 = () => {
113113
</PageSection>
114114
</SidebarPanel>
115115
<SidebarContent hasNoBackground>
116-
<PageSection>
116+
<PageSection aria-label='Main content'>
117117
<Content>
118118
{headings.map(i => (
119119
<div key={i} style={{ maxWidth: '800px', marginBottom: '32px' }}>

0 commit comments

Comments
 (0)