Skip to content

Commit 0625602

Browse files
Mash707Mash707
authored
chore(page): updated examples to provide a11y labels (#11741)
* chore(page): updated examples to provide a11y labels * added a11y labels to examples * added a11y labels to examples * updated react-table demos * improved the usage of aria tags
1 parent c0ad0ec commit 0625602

34 files changed

+79
-68
lines changed

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -535,16 +535,16 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
535535
breadcrumb={PageBreadcrumb}
536536
mainContainerId={pageId}
537537
>
538-
<PageSection>
538+
<PageSection aria-labelledby="main-title">
539539
<Content>
540-
<h1>Main title</h1>
540+
<h1 id="main-title">Main title</h1>
541541
<p>
542542
Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
543543
of its relative line height of 1.5.
544544
</p>
545545
</Content>
546546
</PageSection>
547-
<PageSection>Panel section content</PageSection>
547+
<PageSection aria-label="Panel section">Panel section content</PageSection>
548548
</Page>
549549
</Fragment>
550550
);

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -770,16 +770,16 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
770770
breadcrumb={PageBreadcrumb}
771771
mainContainerId={pageId}
772772
>
773-
<PageSection>
773+
<PageSection aria-labelledby="main-title">
774774
<Content>
775-
<h1>Main title</h1>
775+
<h1 id="main-title">Main title</h1>
776776
<p>
777777
Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
778778
of its relative line height of 1.5.
779779
</p>
780780
</Content>
781781
</PageSection>
782-
<PageSection>Panel section content</PageSection>
782+
<PageSection aria-label="Panel section">Panel section content</PageSection>
783783
</Page>
784784
</Fragment>
785785
);

‎packages/react-core/src/demos/RTL/examples/PaginatedTable.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -444,9 +444,9 @@ export const PaginatedTableAction = () => {
444444
))}
445445
</Breadcrumb>
446446
</PageBreadcrumb>
447-
<PageSection variant="light">
447+
<PageSection variant="light" aria-labelledby='main-title' >
448448
<Content>
449-
<h1>{translation.title}</h1>
449+
<h1 id='main-title'>{translation.title}</h1>
450450
<p>{translation.body}</p>
451451
</Content>
452452
</PageSection>

‎packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -470,9 +470,9 @@ export const PaginatedTableAction: React.FunctionComponent = () => {
470470
))}
471471
</Breadcrumb>
472472
</PageBreadcrumb>
473-
<PageSection variant="light">
473+
<PageSection variant="light" aria-labelledby="main-title">
474474
<Content>
475-
<h1>{translation.title}</h1>
475+
<h1 id="main-title">{translation.title}</h1>
476476
<p>{translation.body}</p>
477477
</Content>
478478
</PageSection>

‎packages/react-core/src/demos/examples/Page/PageContextSelector.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -325,13 +325,15 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
325325
mainContainerId={mainContainerId}
326326
isBreadcrumbWidthLimited
327327
>
328-
<PageSection isWidthLimited>
328+
<PageSection isWidthLimited aria-labelledby="main-title">
329329
<Content>
330-
<Content component="h1">Main title</Content>
330+
<Content component="h1" id="main-title">
331+
Main title
332+
</Content>
331333
<Content component="p">This is a full page demo.</Content>
332334
</Content>
333335
</PageSection>
334-
<PageSection isWidthLimited>
336+
<PageSection isWidthLimited aria-label="Card gallery">
335337
<Gallery hasGutter>
336338
{Array.from({ length: 50 }).map((_value, index) => (
337339
<GalleryItem key={index}>

‎packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -282,13 +282,13 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
282282
}
283283
}}
284284
>
285-
<PageSection isWidthLimited>
285+
<PageSection isWidthLimited aria-labelledby="main-title">
286286
<Content>
287-
<h1>Main title</h1>
287+
<h1 id="main-title">Main title</h1>
288288
<p>This is a full page demo.</p>
289289
</Content>
290290
</PageSection>
291-
<PageSection isWidthLimited>
291+
<PageSection isWidthLimited aria-label="Card gallery">
292292
<Gallery hasGutter>
293293
{Array.from({ length: 50 }).map((_value, index) => (
294294
<GalleryItem key={index}>

‎packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -278,9 +278,9 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
278278
isBreadcrumbWidthLimited
279279
isBreadcrumbGrouped
280280
additionalGroupedContent={
281-
<PageSection isWidthLimited>
281+
<PageSection isWidthLimited aria-labelledby="main-title">
282282
<Content>
283-
<h1>Main title</h1>
283+
<h1 id="main-title">Main title</h1>
284284
<p>This is a full page demo.</p>
285285
</Content>
286286
</PageSection>
@@ -289,7 +289,7 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
289289
stickyOnBreakpoint: { default: 'top' }
290290
}}
291291
>
292-
<PageSection>
292+
<PageSection aria-label="Card gallery">
293293
<Gallery hasGutter>
294294
{Array.from({ length: 50 }).map((_value, index) => (
295295
<GalleryItem key={index}>

‎packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -278,14 +278,14 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
278278
</BreadcrumbItem>
279279
</Breadcrumb>
280280
</PageBreadcrumb>
281-
<PageSection isWidthLimited>
281+
<PageSection isWidthLimited aria-labelledby="main-title">
282282
<Content>
283-
<h1>Main title</h1>
283+
<h1 id="main-title">Main title</h1>
284284
<p>This is a full page demo.</p>
285285
</Content>
286286
</PageSection>{' '}
287287
</PageGroup>
288-
<PageSection>
288+
<PageSection aria-label="Card gallery">
289289
<Gallery hasGutter>
290290
{Array.from({ length: 50 }).map((_value, index) => (
291291
<GalleryItem key={index}>

‎packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx

+5-4
Original file line numberDiff line numberDiff line change
@@ -612,19 +612,19 @@ export const PrimaryDetailCardView: React.FunctionComponent = () => {
612612

613613
return (
614614
<DashboardWrapper mainContainerId="main-content-card-view-default-nav" breadcrumb={null}>
615-
<PageSection>
615+
<PageSection aria-labelledby="projects">
616616
<Content>
617-
<h1>Projects</h1>
617+
<h1 id="projects">Projects</h1>
618618
<p>This is a demo that showcases Patternfly cards.</p>
619619
</Content>
620620
</PageSection>
621-
<PageSection isFilled padding={{ default: 'noPadding' }}>
621+
<PageSection isFilled padding={{ default: 'noPadding' }} aria-label="Card filtering toolbar">
622622
<Toolbar id="card-view-data-toolbar-group-types" clearAllFilters={onDelete}>
623623
<ToolbarContent>{toolbarItems}</ToolbarContent>
624624
</Toolbar>
625625
<Divider component="div" />
626626
</PageSection>
627-
<PageSection isFilled padding={{ default: 'noPadding' }}>
627+
<PageSection isFilled padding={{ default: 'noPadding' }} aria-label="Card content area">
628628
<Drawer isExpanded={isDrawerExpanded} className={'pf-m-inline-on-2xl'}>
629629
<DrawerContent panelContent={panelContent}>
630630
<DrawerContentBody hasPadding>{drawerContent}</DrawerContentBody>
@@ -636,6 +636,7 @@ export const PrimaryDetailCardView: React.FunctionComponent = () => {
636636
stickyOnBreakpoint={{ default: 'bottom' }}
637637
padding={{ default: 'noPadding' }}
638638
variant="light"
639+
aria-label="Pagination controls"
639640
>
640641
<Pagination
641642
itemCount={filtered.length}

‎packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -417,17 +417,17 @@ export const PrimaryDetailContentPadding: React.FunctionComponent = () => {
417417

418418
return (
419419
<DashboardWrapper>
420-
<PageSection>
420+
<PageSection aria-labelledby="main-title">
421421
<Content>
422-
<h1>Main title</h1>
422+
<h1 id="main-title">Main title</h1>
423423
<p>
424424
Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
425425
of it's relative line height of 1.5.
426426
</p>
427427
</Content>
428428
</PageSection>
429429
<Divider component="div" />
430-
<PageSection padding={{ default: 'noPadding' }}>
430+
<PageSection padding={{ default: 'noPadding' }} aria-label="Drawer content section">
431431
<Drawer isExpanded={isDrawerExpanded}>
432432
<DrawerContent panelContent={panelContent} colorVariant="no-background">
433433
<DrawerContentBody hasPadding>{drawerContent}</DrawerContentBody>

‎packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -181,17 +181,17 @@ export const PrimaryDetailDataListInCard: React.FunctionComponent = () => {
181181

182182
return (
183183
<DashboardWrapper>
184-
<PageSection>
184+
<PageSection aria-labelledby="main-title">
185185
<Content>
186-
<h1>Main title</h1>
186+
<h1 id="main-title">Main title</h1>
187187
<p>
188188
Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
189189
of it’s relative line height of 1.5.
190190
</p>
191191
</Content>
192192
</PageSection>
193193
<Divider component="div" />
194-
<PageSection>
194+
<PageSection aria-label="Card with drawer content">
195195
<Card>
196196
<Drawer isStatic isExpanded={isExpanded}>
197197
<DrawerContent panelContent={panelContent}>

‎packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -417,17 +417,17 @@ export const PrimaryDetailFullPage: React.FunctionComponent = () => {
417417

418418
return (
419419
<DashboardWrapper mainContainerId="main-content-page-layout-default-nav">
420-
<PageSection>
420+
<PageSection aria-labelledby="main-title">
421421
<Content>
422-
<h1>Main title</h1>
422+
<h1 id="main-title">Main title</h1>
423423
<p>
424424
Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
425425
of it's relative line height of 1.5.
426426
</p>
427427
</Content>
428428
</PageSection>
429429
<Divider component="div" />
430-
<PageSection padding={{ default: 'noPadding' }}>
430+
<PageSection padding={{ default: 'noPadding' }} aria-label="Card with drawer content">
431431
<Drawer isExpanded={isDrawerExpanded}>
432432
<DrawerContent panelContent={panelContent}>
433433
<DrawerContentBody>{drawerContent}</DrawerContentBody>

‎packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -417,17 +417,17 @@ export const PrimaryDetailInlineModifier: React.FunctionComponent = () => {
417417

418418
return (
419419
<DashboardWrapper>
420-
<PageSection>
420+
<PageSection aria-labelledby="main-title">
421421
<Content>
422-
<h1>Main title</h1>
422+
<h1 id="main-title">Main title</h1>
423423
<p>
424424
Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
425425
of it's relative line height of 1.5.
426426
</p>
427427
</Content>
428428
</PageSection>
429429
<Divider component="div" />
430-
<PageSection padding={{ default: 'noPadding' }}>
430+
<PageSection padding={{ default: 'noPadding' }} aria-label="Card with drawer content">
431431
<Drawer isExpanded={isDrawerExpanded} isInline>
432432
<DrawerContent panelContent={panelContent}>
433433
<DrawerContentBody>{drawerContent}</DrawerContentBody>

‎packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -90,17 +90,17 @@ export const PrimaryDetailSimpleListInCard: React.FunctionComponent = () => {
9090

9191
return (
9292
<DashboardWrapper>
93-
<PageSection>
93+
<PageSection aria-labelledby="main-title">
9494
<Content>
95-
<h1>Main title</h1>
95+
<h1 id="main-title">Main title</h1>
9696
<p>
9797
Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
9898
of it’s relative line height of 1.5.
9999
</p>
100100
</Content>
101101
</PageSection>
102102
<Divider component="div" />
103-
<PageSection>
103+
<PageSection aria-label="Card with drawer content">
104104
<Card>
105105
<Drawer isStatic isExpanded={isExpanded}>
106106
<DrawerContent panelContent={panelContent}>

‎packages/react-core/src/demos/examples/Skeleton/SkeletonCard.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,13 @@ export const SkeletonCard: React.FunctionComponent = () => {
2727
);
2828
return (
2929
<DashboardWrapper isBreadcrumbWidthLimited>
30-
<PageSection isWidthLimited>
31-
<Content component="h1">Main title</Content>
30+
<PageSection isWidthLimited aria-label="main-title">
31+
<Content component="h1" id="main-title">
32+
Main title
33+
</Content>
3234
<Content component="p">This is a full page demo.</Content>
3335
</PageSection>
34-
<PageSection>
36+
<PageSection aria-label="Card gallery">
3537
<Gallery hasGutter>{Array.from({ length: 7 }).map((_value, index) => card(index))}</Gallery>
3638
</PageSection>
3739
</DashboardWrapper>

‎packages/react-core/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -486,7 +486,7 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
486486

487487
return (
488488
<DashboardWrapper sidebarNavOpen={!mobileView} onPageResize={onPageResize}>
489-
<PageSection>
489+
<PageSection aria-label="Log viewer controls">
490490
<Toolbar id="log-viewer-toolbar" inset={{ default: 'insetNone' }}>
491491
<ToolbarContent>{items}</ToolbarContent>
492492
</Toolbar>

‎packages/react-core/src/demos/examples/Wizard/InModal.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
1515
export const WizardInModalDemo: React.FunctionComponent = () => (
1616
<>
1717
<DashboardWrapper hasPageTemplateTitle>
18-
<PageSection isWidthLimited>
18+
<PageSection isWidthLimited aria-label="Card gallery">
1919
<Gallery hasGutter>
2020
{Array.from({ length: 10 }).map((_value, index) => (
2121
<GalleryItem key={index}>

‎packages/react-core/src/demos/examples/Wizard/InPage.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrap
55
export const WizardFullPage: React.FunctionComponent = () => (
66
<Fragment>
77
<DashboardWrapper hasPageTemplateTitle>
8-
<PageSection hasBodyWrapper={false} type={PageSectionTypes.wizard}>
8+
<PageSection hasBodyWrapper={false} type={PageSectionTypes.wizard} aria-label="Wizard container">
99
<Wizard>
1010
<WizardStep name="Information" id="wizard-step-1">
1111
<p>Step 1 content</p>

‎packages/react-core/src/demos/examples/Wizard/InPageWithDrawer.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -173,13 +173,13 @@ export const WizardFullPageWithDrawerDemo: React.FunctionComponent = () => {
173173
breadcrumb={PageBreadcrumb}
174174
mainContainerId={pageId}
175175
>
176-
<PageSection>
176+
<PageSection aria-labelledby="main-title">
177177
<Content>
178-
<h1>Main title</h1>
178+
<h1 id="main-title">Main title</h1>
179179
<p>A demo of a wizard in a page.</p>
180180
</Content>
181181
</PageSection>
182-
<PageSection hasBodyWrapper={false} type={PageSectionTypes.wizard}>
182+
<PageSection hasBodyWrapper={false} type={PageSectionTypes.wizard} aria-label="Wizard container">
183183
<Wizard>
184184
<WizardStep body={{ hasNoPadding: true }} name="Information" id="wizard-step-1">
185185
{createStepContentWithDrawer('Information step')}

‎packages/react-core/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -177,13 +177,13 @@ export const WizardFullPageWithDrawerInfoStepDemo: React.FunctionComponent = ()
177177
breadcrumb={PageBreadcrumb}
178178
mainContainerId={pageId}
179179
>
180-
<PageSection>
180+
<PageSection aria-labelledby="main-title">
181181
<Content>
182-
<h1>Main title</h1>
182+
<h1 id="main-title">Main title</h1>
183183
<p>A demo of a wizard in a page.</p>
184184
</Content>
185185
</PageSection>
186-
<PageSection hasBodyWrapper={false} type={PageSectionTypes.wizard} ß>
186+
<PageSection hasBodyWrapper={false} type={PageSectionTypes.wizard} ß aria-label="Wizard container">
187187
<Wizard>
188188
<WizardStep body={{ hasNoPadding: true }} name="Information" id="wizard-step-1">
189189
{createStepContentWithDrawer('Information step')}

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -107,9 +107,9 @@ export const DashboardBreadcrumb = (
107107
);
108108

109109
const PageTemplateTitle = (
110-
<PageSection>
110+
<PageSection aria-labelledby="main-title">
111111
<Content>
112-
<h1>Main title</h1>
112+
<h1 id="main-title">Main title</h1>
113113
<p>This is a full page demo.</p>
114114
</Content>
115115
</PageSection>

‎packages/react-table/src/demos/examples/TableBulkSelect.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,7 @@ export const TableBulkSelect: React.FunctionComponent = () => {
146146

147147
return (
148148
<DashboardWrapper hasPageTemplateTitle>
149-
<PageSection isWidthLimited>
149+
<PageSection isWidthLimited aria-label="Bulk select table data">
150150
{toolbar}
151151
<Table aria-label="Selectable table">
152152
<Thead>

‎packages/react-table/src/demos/examples/TableColumnManagement.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -437,7 +437,7 @@ export const TableColumnManagement: React.FunctionComponent = () => {
437437
return (
438438
<Fragment>
439439
<DashboardWrapper hasPageTemplateTitle>
440-
<PageSection isFilled>
440+
<PageSection isFilled aria-label="Column management table data">
441441
{toolbarItems}
442442
<Table variant="compact" aria-label="Column Management Table">
443443
<Thead>

‎packages/react-table/src/demos/examples/TableColumnManagementWithDraggable.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -336,7 +336,7 @@ export const TableColumnManagement: React.FunctionComponent = () => {
336336
return (
337337
<Fragment>
338338
<DashboardWrapper hasPageTemplateTitle>
339-
<PageSection isFilled>
339+
<PageSection isFilled aria-label="Draggable Column Management table data">
340340
{toolbarItems}
341341
<Table variant="compact" aria-label="Column Management Table">
342342
<Thead>

0 commit comments

Comments
 (0)