Skip to content

Commit d60ac8a

Browse files
Mash707Mash707
committed
added aria-labels to demos
1 parent 0d2c20a commit d60ac8a

File tree

10 files changed

+40
-18
lines changed

10 files changed

+40
-18
lines changed

‎packages/react-core/src/components/Progress/examples/ProgressTitleOutsideOfProgressBar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
} from '@patternfly/react-core';
1010

1111
export const ProgressTitleOutsideOfProgressBar: React.FunctionComponent = () => (
12-
<DescriptionList>
12+
<DescriptionList aria-label="Progress Title outside of progress bar">
1313
<DescriptionListGroup>
1414
<DescriptionListTerm id="title-outside-progress-example-label">Title outside of progress bar</DescriptionListTerm>
1515
<DescriptionListDescription>

‎packages/react-core/src/components/Wizard/examples/WizardGetCurrentStep.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
} from '@patternfly/react-core';
1111

1212
const CurrentStepDescriptionList = ({ currentStep }: { currentStep: WizardStepType | undefined }) => (
13-
<DescriptionList isHorizontal isCompact>
13+
<DescriptionList isHorizontal isCompact aria-label="Current step description list">
1414
<DescriptionListGroup>
1515
<DescriptionListTerm>Index</DescriptionListTerm>
1616
<DescriptionListDescription>{currentStep?.index}</DescriptionListDescription>

‎packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export const DescriptionListBasic: React.FunctionComponent = () => (
3434
</CardHeader>
3535
<Divider />
3636
<CardBody>
37-
<DescriptionList isAutoFit>
37+
<DescriptionList isAutoFit aria-label="Full page demo of description list">
3838
<DescriptionListGroup>
3939
<DescriptionListTerm>Name</DescriptionListTerm>
4040
<DescriptionListDescription>mary-test</DescriptionListDescription>

‎packages/react-core/src/demos/DescriptionList/examples/DescriptionListInDrawer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export const DescriptionListInDrawer: React.FunctionComponent = () => {
5151
</DrawerActions>
5252
</DrawerHead>
5353
<DrawerPanelBody>
54-
<DescriptionList isFillColumns columnModifier={{ default: '2Col', lg: '2Col' }}>
54+
<DescriptionList isFillColumns columnModifier={{ default: '2Col', lg: '2Col' }} aria-label="Demo details list">
5555
<DescriptionListGroup>
5656
<DescriptionListTerm>Name</DescriptionListTerm>
5757
<DescriptionListDescription>test</DescriptionListDescription>

‎packages/react-core/src/demos/examples/Card/CardDetails.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export const CardDetailsDemo: React.FunctionComponent = () => (
2424
</Title>
2525
</CardTitle>
2626
<CardBody>
27-
<DescriptionList>
27+
<DescriptionList aria-label="Cluster details for API1">
2828
<DescriptionListGroup>
2929
<DescriptionListTerm>Cluster API Address</DescriptionListTerm>
3030
<DescriptionListDescription>
@@ -61,7 +61,7 @@ export const CardDetailsDemo: React.FunctionComponent = () => (
6161
</Title>
6262
</CardTitle>
6363
<CardBody>
64-
<DescriptionList>
64+
<DescriptionList aria-label="Cluster details for API2">
6565
<DescriptionListGroup>
6666
<DescriptionListTerm>Cluster API Address</DescriptionListTerm>
6767
<DescriptionListDescription>

‎packages/react-core/src/demos/examples/Card/CardEventsView.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export const CardEventsView: React.FunctionComponent = () => {
7272
</CardTitle>
7373
</CardHeader>
7474
<CardBody>
75-
<DescriptionList>
75+
<DescriptionList aria-label="List of event details">
7676
<DescriptionListGroup>
7777
<DescriptionListTerm>
7878
<Flex flexWrap={{ default: 'nowrap' }}>

‎packages/react-core/src/demos/examples/Card/CardLogView.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ export const CardLogView: React.FunctionComponent = () => {
7171
</CardTitle>
7272
</CardHeader>
7373
<CardBody>
74-
<DescriptionList>
74+
<DescriptionList aria-label="Activity logs">
7575
<DescriptionListGroup>
7676
<DescriptionListTerm>Readiness probe failed</DescriptionListTerm>
7777
<DescriptionListDescription>

‎packages/react-core/src/demos/examples/Card/CardStatusTabbed.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ export const CardStatusTabbed: React.FunctionComponent = () => {
6969
};
7070

7171
const tabContent = (
72-
<DescriptionList isHorizontal columnModifier={{ lg: '2Col' }}>
72+
<DescriptionList isHorizontal columnModifier={{ lg: '2Col' }} aria-label="Status list">
7373
{descriptionListData.map(({ status, resourceName, detail, icon }, index) => (
7474
<DescriptionListGroup key={index}>
7575
<DescriptionListTerm>

‎packages/react-integration/demo-app-ts/src/components/demos/DescriptionListDemo/DescriptionListBreakpointsDemo.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ export class DescriptionListBreakpointsDemo extends Component {
3030
<DescriptionList
3131
id="1-col-description-list"
3232
columnModifier={{ default: '1Col', md: '1Col', lg: '1Col', xl: '1Col', '2xl': '1Col' }}
33+
aria-label="One-column description list"
3334
>
3435
<DescriptionListGroup>
3536
<DescriptionListTerm>Name</DescriptionListTerm>
@@ -76,6 +77,7 @@ export class DescriptionListBreakpointsDemo extends Component {
7677
<DescriptionList
7778
id="2-col-description-list"
7879
columnModifier={{ default: '2Col', md: '2Col', lg: '2Col', xl: '2Col', '2xl': '2Col' }}
80+
aria-label="Two-column description list"
7981
>
8082
<DescriptionListGroup>
8183
<DescriptionListTerm>Name</DescriptionListTerm>
@@ -122,6 +124,7 @@ export class DescriptionListBreakpointsDemo extends Component {
122124
<DescriptionList
123125
id="3-col-description-list"
124126
columnModifier={{ default: '3Col', md: '3Col', lg: '3Col', xl: '3Col', '2xl': '3Col' }}
127+
aria-label="Three-column description list"
125128
>
126129
<DescriptionListGroup>
127130
<DescriptionListTerm>Name</DescriptionListTerm>
@@ -174,6 +177,7 @@ export class DescriptionListBreakpointsDemo extends Component {
174177
xl: 'vertical',
175178
'2xl': 'horizontal'
176179
}}
180+
aria-label="Responsive layout based on orientation"
177181
>
178182
<DescriptionListGroup>
179183
<DescriptionListTerm>Name</DescriptionListTerm>

‎packages/react-integration/demo-app-ts/src/components/demos/DescriptionListDemo/DescriptionListDemo.tsx‎

Lines changed: 27 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export class DescriptionListDemo extends Component {
2929
<Divider component="div" />
3030
<br />
3131
<div className="example">
32-
<DescriptionList id="simple-description-list">
32+
<DescriptionList id="simple-description-list" aria-label="Basic description list">
3333
<DescriptionListGroup>
3434
<DescriptionListTerm>Name</DescriptionListTerm>
3535
<DescriptionListDescription>Example</DescriptionListDescription>
@@ -71,7 +71,7 @@ export class DescriptionListDemo extends Component {
7171
<Divider component="div" />
7272
<br />
7373
<div className="example">
74-
<DescriptionList id="description-list-help-text">
74+
<DescriptionList id="description-list-help-text" aria-label="Description list with term help text">
7575
<DescriptionListGroup>
7676
<DescriptionListTermHelpText>
7777
<Popover headerContent={<div>Name</div>} bodyContent={<div>Additional name info</div>}>
@@ -134,7 +134,11 @@ export class DescriptionListDemo extends Component {
134134
<Divider component="div" />
135135
<br />
136136
<div className="example">
137-
<DescriptionList id="2-col-description-list" columnModifier={{ default: '2Col' }}>
137+
<DescriptionList
138+
id="2-col-description-list"
139+
columnModifier={{ default: '2Col' }}
140+
aria-label="Two-column description list"
141+
>
138142
<DescriptionListGroup>
139143
<DescriptionListTerm>Name</DescriptionListTerm>
140144
<DescriptionListDescription>Example</DescriptionListDescription>
@@ -177,7 +181,11 @@ export class DescriptionListDemo extends Component {
177181
<Divider component="div" />
178182
<br />
179183
<div className="example">
180-
<DescriptionList id="responsive-description-list" columnModifier={{ lg: '2Col', xl: '3Col' }}>
184+
<DescriptionList
185+
id="responsive-description-list"
186+
columnModifier={{ lg: '2Col', xl: '3Col' }}
187+
aria-label="Responsive columns based on screen size"
188+
>
181189
<DescriptionListGroup>
182190
<DescriptionListTerm>Name</DescriptionListTerm>
183191
<DescriptionListDescription>Example</DescriptionListDescription>
@@ -220,7 +228,7 @@ export class DescriptionListDemo extends Component {
220228
<Divider component="div" />
221229
<br />
222230
<div className="example">
223-
<DescriptionList id="horizontal-description-list" isHorizontal>
231+
<DescriptionList id="horizontal-description-list" isHorizontal aria-label="Horizontal description list">
224232
<DescriptionListGroup>
225233
<DescriptionListTerm>Name</DescriptionListTerm>
226234
<DescriptionListDescription>Example</DescriptionListDescription>
@@ -264,7 +272,7 @@ export class DescriptionListDemo extends Component {
264272
<Divider component="div" />
265273
<br />
266274
<div className="example">
267-
<DescriptionList id="auto-col-widths-description-list" isAutoColumnWidths>
275+
<DescriptionList id="auto-col-widths-description-list" isAutoColumnWidths aria-label="Auto column width">
268276
<DescriptionListGroup>
269277
<DescriptionListTerm>Name</DescriptionListTerm>
270278
<DescriptionListDescription>Example</DescriptionListDescription>
@@ -307,7 +315,11 @@ export class DescriptionListDemo extends Component {
307315
<Divider component="div" />
308316
<br />
309317
<div className="example">
310-
<DescriptionList id="inline-grid-description-list" isInlineGrid>
318+
<DescriptionList
319+
id="inline-grid-description-list"
320+
isInlineGrid
321+
aria-label="Default inline grid description list"
322+
>
311323
<DescriptionListGroup>
312324
<DescriptionListTerm>Name</DescriptionListTerm>
313325
<DescriptionListDescription>Example</DescriptionListDescription>
@@ -353,6 +365,7 @@ export class DescriptionListDemo extends Component {
353365
autoFitMinModifier={{ md: '100px', lg: '150px', xl: '200px', '2xl': '300px' }}
354366
id="auto-fit-description-list"
355367
isAutoFit
368+
aria-label="Responsive auto-fit grid with minimum width"
356369
>
357370
<DescriptionListGroup>
358371
<DescriptionListTerm>Name</DescriptionListTerm>
@@ -394,7 +407,7 @@ export class DescriptionListDemo extends Component {
394407
<Divider component="div" />
395408
<br />
396409
<div className="example">
397-
<DescriptionList id="compact-description-list" isCompact>
410+
<DescriptionList id="compact-description-list" isCompact aria-label="Compact description list">
398411
<DescriptionListGroup>
399412
<DescriptionListTerm>Name</DescriptionListTerm>
400413
<DescriptionListDescription>Example</DescriptionListDescription>
@@ -435,7 +448,12 @@ export class DescriptionListDemo extends Component {
435448
<Divider component="div" />
436449
<br />
437450
<div className="example">
438-
<DescriptionList id="fluid-description-list" isFluid isHorizontal>
451+
<DescriptionList
452+
id="fluid-description-list"
453+
isFluid
454+
isHorizontal
455+
aria-label="Fluid horizontal description list"
456+
>
439457
<DescriptionListGroup>
440458
<DescriptionListTerm>Name</DescriptionListTerm>
441459
<DescriptionListDescription>Example</DescriptionListDescription>

0 commit comments

Comments
 (0)