Skip to content

Commit c2eefb8

Browse files
Mash707Mash707
committed
chore(page): updated examples to provide a11y labels
1 parent 31a4c28 commit c2eefb8

File tree

9 files changed

+39
-29
lines changed

9 files changed

+39
-29
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: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -101,10 +101,10 @@ export const PageGroupSection: React.FunctionComponent = () => {
101101
</BreadcrumbItem>
102102
</Breadcrumb>
103103
</PageBreadcrumb>
104-
<PageSection>Grouped section</PageSection>
104+
<PageSection aria-label="Grouped Section">Grouped section</PageSection>
105105
</PageGroup>
106-
<PageSection>Section 1</PageSection>
107-
<PageSection>Section 2</PageSection>
106+
<PageSection aria-label="Section 1">Section 1</PageSection>
107+
<PageSection aria-label="Section 2">Section 2</PageSection>
108108
</Page>
109109
);
110110
};

‎packages/react-core/src/components/Page/examples/PageHorizontalNav.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,11 @@ 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-label="Section 1">Section 1</PageSection>
40+
<PageSection variant="secondary" aria-label="Section 2 with secondary variant styling">
41+
Section 2 with secondary variant styling
42+
</PageSection>
43+
<PageSection aria-label="Section 3">Section 3</PageSection>
4244
</Page>
4345
);
4446
};

‎packages/react-core/src/components/Page/examples/PageMainSectionPadding.tsx‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -64,10 +64,16 @@ 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-label="Section with default padding">Section with default padding</PageSection>
68+
<PageSection padding={{ default: 'noPadding' }} aria-label="Section with no padding">
69+
Section with no padding
70+
</PageSection>
71+
<PageSection padding={{ default: 'noPadding', md: 'padding' }} aria-label="Section with padding on medium">
72+
Section with padding on medium
73+
</PageSection>
74+
<PageSection padding={{ md: 'noPadding' }} aria-label="Section with no padding on medium">
75+
Section with no padding on medium
76+
</PageSection>
7177
</Page>
7278
);
7379
};

‎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="Horizontal subnavigation">
6868
Section with <code>type="subnav"</code> for horizontal subnav navigation
6969
</PageSection>
70-
<PageSection type="nav">
70+
<PageSection type="nav" aria-label="Tertiary navigation">
7171
Section with <code>type="nav"</code> for tertiary navigation
7272
</PageSection>
73-
<PageSection type="tabs">
73+
<PageSection type="tabs" aria-label="Tab navigation">
7474
Section with <code>type="tabs"</code> for tabs
7575
</PageSection>
76-
<PageSection type="breadcrumb">
76+
<PageSection type="breadcrumb" aria-label="Breadcrumb navigation">
7777
Section with <code>type="breadcrumb"</code> for breadcrumbs
7878
</PageSection>
79-
<PageSection>
79+
<PageSection aria-label="Default navigation">
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="Wizard navigation">
8383
Section with <code>type="wizard"</code> for wizards
8484
</PageSection>
8585
</Page>

‎packages/react-core/src/components/Page/examples/PageMultipleSidebarBody.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -71,9 +71,9 @@ 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-label="Section 1">Section 1</PageSection>
75+
<PageSection aria-label="Section 2">Section 2</PageSection>
76+
<PageSection aria-label="Section 3">Section 3</PageSection>
7777
</Page>
7878
);
7979
};

‎packages/react-core/src/components/Page/examples/PageUncontrolledNav.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,9 +51,9 @@ 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-label="Section 1">Section 1</PageSection>
55+
<PageSection aria-label="Section 2">Section 2</PageSection>
56+
<PageSection aria-label="Section 3">Section 3</PageSection>
5757
</Page>
5858
);
5959
};

‎packages/react-core/src/components/Page/examples/PageVerticalNav.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -64,9 +64,11 @@ 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-label="Section 1">Section 1</PageSection>
68+
<PageSection variant="secondary" aria-label="Section 2 with secondary variant styling">
69+
Section 2 with secondary variant styling
70+
</PageSection>
71+
<PageSection aria-label="Section 3">Section 3</PageSection>
7072
</Page>
7173
);
7274
};

‎packages/react-core/src/components/Page/examples/PageWithOrWithoutFill.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -64,11 +64,11 @@ 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">
67+
<PageSection aria-label="Default page section">A default page section</PageSection>
68+
<PageSection isFilled={true} variant="secondary" aria-label="Section fills the available space">
6969
This section fills the available space.
7070
</PageSection>
71-
<PageSection>A default page section</PageSection>
71+
<PageSection aria-label="Default page section">A default page section</PageSection>
7272
</Page>
7373
);
7474
};

0 commit comments

Comments
 (0)