Skip to content

Commit 2009a4f

Browse files
Mash707Mash707
committed
improved the usage of aria tags
1 parent a03bb1d commit 2009a4f

18 files changed

+113
-58
lines changed

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

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -101,10 +101,16 @@ export const PageGroupSection: React.FunctionComponent = () => {
101101
</BreadcrumbItem>
102102
</Breadcrumb>
103103
</PageBreadcrumb>
104-
<PageSection aria-label="Grouped Section">Grouped section</PageSection>
104+
<PageSection aria-labelledby="grouped-section">
105+
<h2 id="grouped-section">Grouped section</h2>
106+
</PageSection>
105107
</PageGroup>
106-
<PageSection aria-label="Section 1">Section 1</PageSection>
107-
<PageSection aria-label="Section 2">Section 2</PageSection>
108+
<PageSection aria-labelledby="section-1">
109+
<h2 id="section-1">Grouped example section 1</h2>
110+
</PageSection>
111+
<PageSection aria-labelledby="section-2">
112+
<h2 id="section-2">Grouped example section 2</h2>
113+
</PageSection>
108114
</Page>
109115
);
110116
};

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

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,15 @@ export const PageHorizontalNav: React.FunctionComponent = () => {
3636

3737
return (
3838
<Page masthead={masthead}>
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
39+
<PageSection aria-labelledby="section-1">
40+
<h2 id="section-1">Horizontal nav example section 1</h2>
41+
</PageSection>
42+
<PageSection variant="secondary" aria-labelledby="section-2">
43+
<h2 id="section-2">Horizontal nav example section 2 with secondary variant styling</h2>
44+
</PageSection>
45+
<PageSection aria-labelledby="section-3">
46+
<h2 id="section-3">Horizontal nav example section 3</h2>
4247
</PageSection>
43-
<PageSection aria-label="Section 3">Section 3</PageSection>
4448
</Page>
4549
);
4650
};

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

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -64,15 +64,17 @@ export const PageMainSectionPadding: React.FunctionComponent = () => {
6464

6565
return (
6666
<Page masthead={masthead} sidebar={sidebar}>
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
67+
<PageSection aria-labelledby="section-1">
68+
<h2 id="section-1">Section with default padding</h2>
7069
</PageSection>
71-
<PageSection padding={{ default: 'noPadding', md: 'padding' }} aria-label="Section with padding on medium">
72-
Section with padding on medium
70+
<PageSection padding={{ default: 'noPadding' }} aria-labelledby="section-2">
71+
<h2 id="section-2">Section with no padding</h2>
7372
</PageSection>
74-
<PageSection padding={{ md: 'noPadding' }} aria-label="Section with no padding on medium">
75-
Section with no padding on medium
73+
<PageSection padding={{ default: 'noPadding', md: 'padding' }} aria-labelledby="section-3">
74+
<h2 id="section-3">Section with padding on medium</h2>
75+
</PageSection>
76+
<PageSection padding={{ md: 'noPadding' }} aria-labelledby="section-4">
77+
<h2 id="section-4">Section with no padding on medium</h2>
7678
</PageSection>
7779
</Page>
7880
);

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

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

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -71,9 +71,15 @@ export const PageMultipleSidebarBody: React.FunctionComponent = () => {
7171

7272
return (
7373
<Page masthead={masthead} sidebar={sidebar}>
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>
74+
<PageSection aria-labelledby="section-1">
75+
<h2 id="section-1">Multiple sidebar body example section 1</h2>
76+
</PageSection>
77+
<PageSection aria-labelledby="section-2">
78+
<h2 id="section-2">Multiple sidebar body example section 2</h2>
79+
</PageSection>
80+
<PageSection aria-labelledby="section-3">
81+
<h2 id="section-3">Multiple sidebar body example section 3</h2>
82+
</PageSection>
7783
</Page>
7884
);
7985
};

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

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,9 +51,15 @@ export const PageUncontrolledNav: React.FunctionComponent = () => {
5151

5252
return (
5353
<Page isManagedSidebar masthead={masthead} sidebar={sidebar}>
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>
54+
<PageSection aria-labelledby="section-1">
55+
<h2 id="section-1">Uncontrolled nav example section 1</h2>
56+
</PageSection>
57+
<PageSection aria-labelledby="section-2">
58+
<h2 id="section-2">Uncontrolled nav example section 2</h2>
59+
</PageSection>
60+
<PageSection aria-labelledby="section-3">
61+
<h2 id="section-3">Uncontrolled nav example section 3</h2>
62+
</PageSection>
5763
</Page>
5864
);
5965
};

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

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -64,11 +64,16 @@ export const PageVerticalNav: React.FunctionComponent = () => {
6464

6565
return (
6666
<Page masthead={masthead} sidebar={sidebar}>
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
67+
<PageSection aria-labelledby="section-1">
68+
<h2 id="section-1"></h2>Vertical nav example section 1
69+
</PageSection>
70+
<PageSection variant="secondary" aria-labelledby="section-2">
71+
<h2 id="section-2"></h2>
72+
Vertical nav example section 2 with secondary variant styling
73+
</PageSection>
74+
<PageSection aria-labelledby="section-3">
75+
<h2 id="section-3"></h2>Vertical nav example section 3
7076
</PageSection>
71-
<PageSection aria-label="Section 3">Section 3</PageSection>
7277
</Page>
7378
);
7479
};

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

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -64,11 +64,15 @@ export const PageWithOrWithoutFill: React.FunctionComponent = () => {
6464

6565
return (
6666
<Page isContentFilled masthead={masthead} sidebar={sidebar}>
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">
69-
This section fills the available space.
67+
<PageSection aria-labelledby="section-1">
68+
<h2 id="section-1">Section without fill</h2>
69+
</PageSection>
70+
<PageSection isFilled={true} variant="secondary" aria-labelledby="section-2">
71+
<h2 id="section-2">Section with fill</h2>
72+
</PageSection>
73+
<PageSection aria-labelledby="section-3">
74+
<h2 id="section-3">Another section without fill</h2>
7075
</PageSection>
71-
<PageSection aria-label="Default page section">A default page section</PageSection>
7276
</Page>
7377
);
7478
};

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

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

3434
return (
3535
<DashboardWrapper mainContainerId="main-content-datalist-view-actions" breadcrumb={null}>
36-
<PageSection aria-label="Projects">
36+
<PageSection aria-labelledby="projects">
3737
<Content>
38-
<Title headingLevel="h1">Projects</Title>
38+
<Title headingLevel="h1" id="projects">
39+
Projects
40+
</Title>
3941
<Content component="p">This is a demo that showcases PatternFly Data List</Content>
4042
</Content>
4143
</PageSection>

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -113,9 +113,11 @@ export const DataListStaticBottomPagination: React.FunctionComponent = () => {
113113

114114
return (
115115
<DashboardWrapper mainContainerId="main-content-datalist-view-pagination" breadcrumb={null}>
116-
<PageSection aria-label="Projects">
116+
<PageSection aria-labelledby="projects">
117117
<Content>
118-
<Content component="h1">Projects</Content>
118+
<Content component="h1" id="projects">
119+
Projects
120+
</Content>
119121
<Content component="p">This is a demo that showcases PatternFly Data List</Content>
120122
</Content>
121123
</PageSection>

0 commit comments

Comments
 (0)