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

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

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

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

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

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

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

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

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

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

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

0 commit comments

Comments
 (0)