Skip to content

Commit d1fd5f0

Browse files
Mash707Mash707
committed
added a11y labels to examples
1 parent c2eefb8 commit d1fd5f0

File tree

14 files changed

+45
-40
lines changed

14 files changed

+45
-40
lines changed

‎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 section'>
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 section'>
126126
<Gallery hasGutter>
127127
{Array.from({ length: 30 }).map((_value, index) => (
128128
<GalleryItem key={index}>

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

Lines changed: 9 additions & 4 deletions
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-heading">
469469
<Content>
470-
<h1>Projects</h1>
470+
<h1 id="projects-heading">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 container">
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‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,13 @@ export const DataListActionable: React.FunctionComponent = () => {
3333

3434
return (
3535
<DashboardWrapper mainContainerId="main-content-datalist-view-actions" breadcrumb={null}>
36-
<PageSection>
36+
<PageSection aria-label="Projects">
3737
<Content>
3838
<Title headingLevel="h1">Projects</Title>
3939
<Content component="p">This is a demo that showcases PatternFly Data List</Content>
4040
</Content>
4141
</PageSection>
42-
<PageSection>
42+
<PageSection aria-label="Data list of projects">
4343
<DataList aria-label="single action data list example ">
4444
{!isDeleted && (
4545
<DataListItem aria-labelledby="single-action-item1">

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

Lines changed: 2 additions & 2 deletions
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-heading">
7373
<Content>
74-
<h1>Projects</h1>
74+
<h1 id="projects-heading">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‎

Lines changed: 2 additions & 2 deletions
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-heading">
137137
<Content>
138-
<h1>Projects</h1>
138+
<h1 id="projects-heading">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‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ export const DataListStaticBottomPagination: React.FunctionComponent = () => {
113113

114114
return (
115115
<DashboardWrapper mainContainerId="main-content-datalist-view-pagination" breadcrumb={null}>
116-
<PageSection>
116+
<PageSection aria-label="Projects">
117117
<Content>
118118
<Content component="h1">Projects</Content>
119119
<Content component="p">This is a demo that showcases PatternFly Data List</Content>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,13 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
1818

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

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -150,13 +150,13 @@ export const DescriptionListInDrawer: React.FunctionComponent = () => {
150150
isNotificationDrawerExpanded={isExpanded}
151151
onNotificationDrawerExpand={onExpand}
152152
>
153-
<PageSection>
153+
<PageSection aria-label="Main Title">
154154
<Content>
155155
<Content component="h1">Main title</Content>
156156
<Content component="p">This is a full page demo.</Content>
157157
</Content>
158158
</PageSection>
159-
<PageSection>{drawerContent}</PageSection>
159+
<PageSection aria-label="Drawer Content">{drawerContent}</PageSection>
160160
</DashboardWrapper>
161161
);
162162
};

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ ScrollspyH2 = () => {
7979

8080
return (
8181
<DashboardWrapper breadcrumb={null} mainContainerId="scrollable-element">
82-
<PageSection>
82+
<PageSection aria-label = 'Main title'>
8383
<Title headingLevel="h1" size="2xl">
8484
Main title
8585
</Title>
@@ -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' }}>

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@ TabsOpenDemo = () => {
159159
return (
160160
<DashboardWrapper hasNoBreadcrumb>
161161
{tabsBreadcrumb}
162-
<PageSection isWidthLimited>
162+
<PageSection isWidthLimited aria-label='Pod header'>
163163
<Flex
164164
spaceItems={{ default: 'spaceItemsMd' }}
165165
alignItems={{ default: 'alignItemsFlexStart' }}
@@ -178,7 +178,7 @@ TabsOpenDemo = () => {
178178
</FlexItem>
179179
</Flex>
180180
</PageSection>
181-
<PageSection type="tabs" isWidthLimited>
181+
<PageSection type="tabs" isWidthLimited aria-label='Pod navigation tabs'>
182182
<Tabs activeKey={activeTabKey} onSelect={handleTabClick} usePageInsets id="open-tabs-example-tabs-list">
183183
<Tab eventKey={0} title={<TabTitleText>Details</TabTitleText>} tabContentId={`tabContent${0}`} />
184184
<Tab eventKey={1} title={<TabTitleText>YAML</TabTitleText>} tabContentId={`tabContent${1}`} />
@@ -187,7 +187,7 @@ TabsOpenDemo = () => {
187187
<Tab eventKey={4} title={<TabTitleText>Terminal</TabTitleText>} tabContentId={`tabContent${4}`} />
188188
</Tabs>
189189
</PageSection>
190-
<PageSection isWidthLimited>
190+
<PageSection isWidthLimited aria-label='Pod content'>
191191
<TabContent key={0} eventKey={0} id={`tabContent${0}`} activeKey={activeTabKey} hidden={0 !== activeTabKey}>
192192
<TabContentBody>{tabContent}</TabContentBody>
193193
</TabContent>
@@ -355,7 +355,7 @@ TabsOpenWithSecondaryTabsDemo = () => {
355355
return (
356356
<DashboardWrapper hasNoBreadcrumb>
357357
{tabsBreadcrumb}
358-
<PageSection isWidthLimited>
358+
<PageSection isWidthLimited aria-label = 'Pod header'>
359359
<Flex
360360
spaceItems={{ default: 'spaceItemsMd' }}
361361
alignItems={{ default: 'alignItemsFlexStart' }}
@@ -374,7 +374,7 @@ TabsOpenWithSecondaryTabsDemo = () => {
374374
</FlexItem>
375375
</Flex>
376376
</PageSection>
377-
<PageSection type="tabs" isWidthLimited>
377+
<PageSection type="tabs" isWidthLimited aria-label='Pod navigation tabs'>
378378
<Tabs activeKey={activeTabKey} onSelect={handleTabClick} usePageInsets id="open-tabs-example-tabs-list">
379379
<Tab eventKey={0} title={<TabTitleText>Details</TabTitleText>} tabContentId={`tabContent${0}`} />
380380
<Tab eventKey={1} title={<TabTitleText>YAML</TabTitleText>} tabContentId={`tabContent${1}`} />
@@ -383,7 +383,7 @@ TabsOpenWithSecondaryTabsDemo = () => {
383383
<Tab eventKey={4} title={<TabTitleText>Terminal</TabTitleText>} tabContentId={`tabContent${4}`} />
384384
</Tabs>
385385
</PageSection>
386-
<PageSection isWidthLimited padding={{ default: 'noPadding' }}>
386+
<PageSection isWidthLimited padding={{ default: 'noPadding' }} aria-label='Pod content'>
387387
<TabContent key={0} eventKey={0} id={`tabContent${0}`} activeKey={activeTabKey} hidden={0 !== activeTabKey}>
388388
<TabContentBody>
389389
<Tabs

0 commit comments

Comments
 (0)