Skip to content

Commit eb837cb

Browse files
Mash707Mash707
committed
added a11y labels to examples
1 parent 727933e commit eb837cb

13 files changed

+45
-45
lines changed

‎packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -312,9 +312,9 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
312312
notificationDrawer={notificationDrawer}
313313
isNotificationDrawerExpanded={isDrawerExpanded}
314314
>
315-
<PageSection>
315+
<PageSection aria-labelledby="alert-group-title">
316316
<Content>
317-
<h1>Alert group with notification drawer demo</h1>
317+
<h1 id="alert-group-title">Alert group with notification drawer demo</h1>
318318
<p>
319319
New alerts can be added with the following buttons. Each alert has a timeout of 7 seconds, however, even
320320
after the timeout expires, all alerts are still visible in the notification drawer. By default, only 3
@@ -324,7 +324,7 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
324324
</Content>
325325
</PageSection>
326326

327-
<PageSection>
327+
<PageSection aria-label="Alert Buttons">
328328
<Button variant="secondary" onClick={() => addNewNotification('success')} style={alertButtonStyle}>
329329
Add toast success alert
330330
</Button>
@@ -344,10 +344,10 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
344344
</Button>
345345
</PageSection>
346346

347-
<PageSection>
347+
<PageSection aria-labelledby="max-displayed-alerts-title">
348348
<Content>
349349
<br />
350-
<h2>Max displayed alerts</h2>
350+
<h2 id="max-displayed-alerts-title">Max displayed alerts</h2>
351351
<p>Adjust the maximum number of displayed alerts.</p>
352352
</Content>
353353
<NumberInput
@@ -364,7 +364,7 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
364364
style={{ margin: '12px 0' }}
365365
/>
366366
</PageSection>
367-
<PageSection>
367+
<PageSection aria-label="Alert Group">
368368
<AlertGroup
369369
hasAnimations
370370
isToast

‎packages/react-core/src/demos/examples/BackToTop/BackToTopNameDemo.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@ export const Name = () => {
1111

1212
return (
1313
<DashboardWrapper breadcrumb={null}>
14-
<PageSection>
14+
<PageSection aria-labelledby="main-title">
1515
<Content>
16-
<h1>Main title</h1>
16+
<h1 id="main-title">Main title</h1>
1717
<p>
1818
Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
1919
of it’s relative line height of 1.5.

‎packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -308,15 +308,15 @@ export const MastheadWithHorizontalNav: React.FunctionComponent = () => {
308308
isBreadcrumbWidthLimited
309309
isBreadcrumbGrouped
310310
additionalGroupedContent={
311-
<PageSection>
311+
<PageSection aria-label="Main Title">
312312
<Content>
313313
<Content component="h1">Main title</Content>
314314
<Content component="p">This is a full page demo.</Content>
315315
</Content>
316316
</PageSection>
317317
}
318318
>
319-
<PageSection>
319+
<PageSection aria-label="Card gallery">
320320
<Gallery hasGutter>
321321
{Array.from({ length: 10 }).map((_value, index) => (
322322
<GalleryItem key={index}>

‎packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -544,15 +544,15 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
544544
isBreadcrumbWidthLimited
545545
isBreadcrumbGrouped
546546
additionalGroupedContent={
547-
<PageSection>
547+
<PageSection aria-labelledby="main-title">
548548
<Content>
549-
<h1>Main title</h1>
549+
<h1 id="main-title">Main title</h1>
550550
<p>This is a full page demo.</p>
551551
</Content>
552552
</PageSection>
553553
}
554554
>
555-
<PageSection>
555+
<PageSection aria-label="Card gallery">
556556
<Gallery hasGutter>
557557
{Array.from({ length: 10 }).map((_value, index) => (
558558
<GalleryItem key={index}>

‎packages/react-core/src/demos/examples/Nav/NavDefault.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -84,16 +84,16 @@ export const NavDefault: React.FunctionComponent = () => {
8484
breadcrumb={DashboardBreadcrumb}
8585
mainContainerId={pageId}
8686
>
87-
<PageSection>
87+
<PageSection aria-labelledby="main-title">
8888
<Content>
89-
<h1>Main title</h1>
89+
<h1 id="main-title">Main title</h1>
9090
<p>
9191
Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
9292
of its relative line height of 1.5.
9393
</p>
9494
</Content>
9595
</PageSection>
96-
<PageSection>
96+
<PageSection aria-label="Card gallery">
9797
<Gallery hasGutter>
9898
{Array.from({ length: 10 }).map((_value, index) => (
9999
<GalleryItem key={index}>

‎packages/react-core/src/demos/examples/Nav/NavDrilldown.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@ export const NavDrilldown: React.FunctionComponent = () => {
129129

130130
return (
131131
<Page masthead={<DashboardHeader />} sidebar={sidebar}>
132-
<PageSection>
132+
<PageSection aria-label="Navigation layer">
133133
<strong>Nav Layer: </strong>
134134
{navLayer}
135135
</PageSection>

‎packages/react-core/src/demos/examples/Nav/NavExpandable.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -110,16 +110,16 @@ export const NavExpandableDemo: React.FunctionComponent = () => {
110110
breadcrumb={DashboardBreadcrumb}
111111
mainContainerId={pageId}
112112
>
113-
<PageSection>
113+
<PageSection aria-labelledby="main-title">
114114
<Content>
115-
<h1>Main title</h1>
115+
<h1 id="main-title">Main title</h1>
116116
<p>
117117
Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
118118
of its relative line height of 1.5.
119119
</p>
120120
</Content>
121121
</PageSection>
122-
<PageSection>
122+
<PageSection aria-label="Card gallery">
123123
<Gallery hasGutter>
124124
{Array.from({ length: 10 }).map((_value, index) => (
125125
<GalleryItem key={index}>

‎packages/react-core/src/demos/examples/Nav/NavFlyout.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -284,9 +284,9 @@ export const NavFlyout: React.FunctionComponent = () => {
284284
skipToContent={PageSkipToContent}
285285
mainContainerId={pageId}
286286
>
287-
<PageSection>Section 1</PageSection>
288-
<PageSection>Section 2</PageSection>
289-
<PageSection>Section 3</PageSection>
287+
<PageSection aria-label="Section 1">Section 1</PageSection>
288+
<PageSection aria-label="Section 2">Section 2</PageSection>
289+
<PageSection aria-label="Section 3">Section 3</PageSection>
290290
</Page>
291291
);
292292
};

‎packages/react-core/src/demos/examples/Nav/NavGrouped.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -92,19 +92,19 @@ export const NavGrouped: React.FunctionComponent = () => {
9292
skipToContent={PageSkipToContent}
9393
mainContainerId={pageId}
9494
>
95-
<PageSection>
95+
<PageSection aria-labelledby="main-title">
9696
<Content>
97-
<h1>Main title</h1>
97+
<h1 id="main-title">Main title</h1>
9898
<p>
9999
Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
100100
of its relative line height of 1.5.
101101
</p>
102102
</Content>
103103
</PageSection>
104-
<PageSection>Section 1</PageSection>
105-
<PageSection>Section 2</PageSection>
106-
<PageSection>Section 3</PageSection>
107-
<PageSection>Content</PageSection>
104+
<PageSection aria-label="Section 1">Section 1</PageSection>
105+
<PageSection aria-label="Section 2">Section 2</PageSection>
106+
<PageSection aria-label="Section 3">Section 3</PageSection>
107+
<PageSection aria-label="Content">Content</PageSection>
108108
</Page>
109109
</>
110110
);

‎packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -229,16 +229,16 @@ export const NavHorizontal: React.FunctionComponent = () => {
229229
breadcrumb={DashboardBreadcrumb}
230230
mainContainerId={pageId}
231231
>
232-
<PageSection>
232+
<PageSection aria-labelledby="main-title">
233233
<Content>
234-
<h1>Main title</h1>
234+
<h1 id="main-title">Main title</h1>
235235
<p>
236236
Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
237237
of its relative line height of 1.5.
238238
</p>
239239
</Content>
240240
</PageSection>
241-
<PageSection>
241+
<PageSection aria-label="Card gallery">
242242
<Gallery hasGutter>
243243
{Array.from({ length: 10 }).map((_value, index) => (
244244
<GalleryItem key={index}>

‎packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -278,22 +278,22 @@ export const NavHorizontalWithSubnav: React.FunctionComponent = () => {
278278
return (
279279
<Fragment>
280280
<Page masthead={masthead} skipToContent={PageSkipToContent} mainContainerId={pageId}>
281-
<PageSection type={PageSectionTypes.subNav} isWidthLimited>
281+
<PageSection type={PageSectionTypes.subNav} isWidthLimited aria-label="Subnav">
282282
{SubNav}
283283
</PageSection>
284-
<PageSection type={PageSectionTypes.breadcrumb} isWidthLimited>
284+
<PageSection type={PageSectionTypes.breadcrumb} isWidthLimited aria-label="Breadcrumb">
285285
{DashboardBreadcrumb}
286286
</PageSection>
287-
<PageSection>
287+
<PageSection aria-labelledby="main-title">
288288
<Content>
289-
<h1>Main title</h1>
289+
<h1 id="main-title">Main title</h1>
290290
<p>
291291
Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
292292
of it’s relative line height of 1.5.
293293
</p>
294294
</Content>
295295
</PageSection>
296-
<PageSection>
296+
<PageSection aria-label="Card gallery">
297297
<Gallery hasGutter>
298298
{Array.from({ length: 10 }).map((_value, index) => (
299299
<GalleryItem key={index}>

‎packages/react-core/src/demos/examples/Nav/NavManual.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -260,16 +260,16 @@ export const NavManual: React.FunctionComponent = () => {
260260
skipToContent={PageSkipToContent}
261261
mainContainerId={pageId}
262262
>
263-
<PageSection>
263+
<PageSection aria-labelledby="main-title">
264264
<Content>
265-
<h1>Main title</h1>
265+
<h1 id="main-title">Main title</h1>
266266
<p>
267267
Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
268268
of its relative line height of 1.5.
269269
</p>
270270
</Content>
271271
</PageSection>
272-
<PageSection>
272+
<PageSection aria-label="Card gallery">
273273
<Gallery hasGutter>
274274
{Array.from({ length: 10 }).map((_value, index) => (
275275
<GalleryItem key={index}>

‎packages/react-core/src/demos/examples/Nav/NavWithSubnav.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -122,22 +122,22 @@ export const NavWithSubnav: React.FunctionComponent = () => {
122122
skipToContent={PageSkipToContent}
123123
mainContainerId={pageId}
124124
>
125-
<PageSection type={PageSectionTypes.subNav} isWidthLimited>
125+
<PageSection type={PageSectionTypes.subNav} isWidthLimited aria-label="Subnav">
126126
{SubNav}
127127
</PageSection>
128-
<PageSection type={PageSectionTypes.breadcrumb} isWidthLimited>
128+
<PageSection type={PageSectionTypes.breadcrumb} isWidthLimited aria-label="Breadcrumb">
129129
{DashboardBreadcrumb}
130130
</PageSection>
131-
<PageSection>
131+
<PageSection aria-labelledby="main-title">
132132
<Content>
133-
<h1>Main title</h1>
133+
<h1 id="main-title">Main title</h1>
134134
<p>
135135
Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
136136
of it’s relative line height of 1.5.
137137
</p>
138138
</Content>
139139
</PageSection>
140-
<PageSection>
140+
<PageSection aria-label="Card gallery">
141141
<Gallery hasGutter>
142142
{Array.from({ length: 10 }).map((_value, index) => (
143143
<GalleryItem key={index}>

0 commit comments

Comments
 (0)