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‎

Lines changed: 1 addition & 1 deletion
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‎

Lines changed: 9 additions & 3 deletions
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‎

Lines changed: 9 additions & 3 deletions
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‎

Lines changed: 12 additions & 4 deletions
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‎

Lines changed: 6 additions & 6 deletions
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‎

Lines changed: 9 additions & 3 deletions
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‎

Lines changed: 9 additions & 3 deletions
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‎

Lines changed: 9 additions & 3 deletions
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‎

Lines changed: 8 additions & 4 deletions
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‎

Lines changed: 6 additions & 6 deletions
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}>

0 commit comments

Comments
 (0)