Skip to content

Commit cfbeb9e

Browse files
EugeniyKiyashkoEugeniyKiyashko
authored
Stepper: improve accessibility of Step Template demo (DevExpress#29574)
1 parent 581d7c1 commit cfbeb9e

File tree

6 files changed

+45
-15
lines changed

6 files changed

+45
-15
lines changed

‎apps/demos/Demos/Stepper/StepTemplate/Angular/app/app.component.html‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
<div class="stepper-label">Custom Step Shape</div>
1+
<div id="label-customStepShape" class="stepper-label">Custom Step Shape</div>
22
<dx-stepper
33
id="customStepShape"
44
[dataSource]="steps"
55
[selectedIndex]="2"
66
[linear]="false"
7+
[elementAttr]="{ 'aria-labelledby': 'label-customStepShape' }"
78
>
89
<div *dxTemplate="let data of 'item'">
910
<div class="dx-step-indicator">
@@ -15,25 +16,27 @@
1516
</div>
1617
</div>
1718
</dx-stepper>
18-
<div class="stepper-label">Title Only</div>
19+
<div id="label-titleOnly" class="stepper-label">Title Only</div>
1920
<dx-stepper
2021
id="titleOnly"
2122
[dataSource]="steps"
2223
[selectedIndex]="2"
2324
[linear]="false"
25+
[elementAttr]="{ 'aria-labelledby': 'label-titleOnly' }"
2426
>
2527
<div *dxTemplate="let data of 'item'">
2628
<div class="dx-step-label">
2729
<div class="dx-step-title">{{ data.title }}</div>
2830
</div>
2931
</div>
3032
</dx-stepper>
31-
<div class="stepper-label">Icon Only</div>
33+
<div id="label-iconOnly" class="stepper-label">Icon Only</div>
3234
<dx-stepper
3335
id="iconOnly"
3436
[dataSource]="steps"
3537
[selectedIndex]="2"
3638
[linear]="false"
39+
[elementAttr]="{ 'aria-labelledby': 'label-iconOnly' }"
3740
>
3841
<div *dxTemplate="let data of 'item'">
3942
<i class="dx-icon" [ngClass]="'dx-icon-' + data.icon"></i>

‎apps/demos/Demos/Stepper/StepTemplate/React/App.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,25 +9,28 @@ import IconOnly from './IconOnly.tsx';
99
export default function App() {
1010
return (
1111
<>
12-
<div className="stepper-label">Custom Step Shape</div>
12+
<div id="label-customStepShape" className="stepper-label">Custom Step Shape</div>
1313
<Stepper
1414
id="customStepShape"
15+
elementAttr={{ 'aria-labelledby': 'label-customStepShape' }}
1516
dataSource={steps}
1617
defaultSelectedIndex={2}
1718
linear={false}
1819
itemRender={CustomStepShape}
1920
/>
20-
<div className="stepper-label">Title Only</div>
21+
<div id="label-titleOnly" className="stepper-label">Title Only</div>
2122
<Stepper
2223
id="titleOnly"
24+
elementAttr={{ 'aria-labelledby': 'label-titleOnly' }}
2325
dataSource={steps}
2426
defaultSelectedIndex={2}
2527
linear={false}
2628
itemRender={TitleOnly}
2729
/>
28-
<div className="stepper-label">Icon Only</div>
30+
<div id="label-iconOnly" className="stepper-label">Icon Only</div>
2931
<Stepper
3032
id="iconOnly"
33+
elementAttr={{ 'aria-labelledby': 'label-iconOnly' }}
3134
dataSource={steps}
3235
defaultSelectedIndex={2}
3336
linear={false}

‎apps/demos/Demos/Stepper/StepTemplate/ReactJs/App.js‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,25 +8,43 @@ import IconOnly from './IconOnly.js';
88
export default function App() {
99
return (
1010
<React.Fragment>
11-
<div className="stepper-label">Custom Step Shape</div>
11+
<div
12+
id="label-customStepShape"
13+
className="stepper-label"
14+
>
15+
Custom Step Shape
16+
</div>
1217
<Stepper
1318
id="customStepShape"
19+
elementAttr={{ 'aria-labelledby': 'label-customStepShape' }}
1420
dataSource={steps}
1521
defaultSelectedIndex={2}
1622
linear={false}
1723
itemRender={CustomStepShape}
1824
/>
19-
<div className="stepper-label">Title Only</div>
25+
<div
26+
id="label-titleOnly"
27+
className="stepper-label"
28+
>
29+
Title Only
30+
</div>
2031
<Stepper
2132
id="titleOnly"
33+
elementAttr={{ 'aria-labelledby': 'label-titleOnly' }}
2234
dataSource={steps}
2335
defaultSelectedIndex={2}
2436
linear={false}
2537
itemRender={TitleOnly}
2638
/>
27-
<div className="stepper-label">Icon Only</div>
39+
<div
40+
id="label-iconOnly"
41+
className="stepper-label"
42+
>
43+
Icon Only
44+
</div>
2845
<Stepper
2946
id="iconOnly"
47+
elementAttr={{ 'aria-labelledby': 'label-iconOnly' }}
3048
dataSource={steps}
3149
defaultSelectedIndex={2}
3250
linear={false}

‎apps/demos/Demos/Stepper/StepTemplate/Vue/App.vue‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
<template>
2-
<div class="stepper-label">Custom Step Shape</div>
2+
<div id="label-customStepShape" class="stepper-label">Custom Step Shape</div>
33
<DxStepper
44
id="customStepShape"
55
:data-source="steps"
66
:selected-index="2"
77
:linear="false"
8+
:element-attr="{ 'aria-labelledby': 'label-customStepShape' }"
89
>
910
<template #item="{ data }">
1011
<div>
@@ -18,12 +19,13 @@
1819
</div>
1920
</template>
2021
</DxStepper>
21-
<div class="stepper-label">Title Only</div>
22+
<div id="label-titleOnly" class="stepper-label">Title Only</div>
2223
<DxStepper
2324
id="titleOnly"
2425
:data-source="steps"
2526
:selected-index="2"
2627
:linear="false"
28+
:element-attr="{ 'aria-labelledby': 'label-titleOnly' }"
2729
>
2830
<template #item="{ data }">
2931
<div>
@@ -33,12 +35,13 @@
3335
</div>
3436
</template>
3537
</DxStepper>
36-
<div class="stepper-label">Icon Only</div>
38+
<div id="label-iconOnly" class="stepper-label">Icon Only</div>
3739
<DxStepper
3840
id="iconOnly"
3941
:data-source="steps"
4042
:selected-index="2"
4143
:linear="false"
44+
:element-attr="{ 'aria-labelledby': 'label-iconOnly' }"
4245
>
4346
<template #item="{ data }">
4447
<div>

‎apps/demos/Demos/Stepper/StepTemplate/jQuery/index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,11 @@
1414
</head>
1515
<body class="dx-viewport">
1616
<div class="demo-container">
17-
<div class="stepper-label">Custom Step Shape</div>
17+
<div id="label-customStepShape" class="stepper-label">Custom Step Shape</div>
1818
<div id="customStepShape"></div>
19-
<div class="stepper-label">Title Only</div>
19+
<div id="label-titleOnly" class="stepper-label">Title Only</div>
2020
<div id="titleOnly"></div>
21-
<div class="stepper-label">Icon Only</div>
21+
<div id="label-iconOnly" class="stepper-label">Icon Only</div>
2222
<div id="iconOnly"></div>
2323
</div>
2424
</body>

‎apps/demos/Demos/Stepper/StepTemplate/jQuery/index.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ $(() => {
33
selectedIndex: 2,
44
dataSource,
55
linear: false,
6+
elementAttr: { 'aria-labelledby': 'label-customStepShape' },
67
itemTemplate(data) {
78
return `<div class="dx-step-indicator">
89
<i class="dx-icon dx-icon-${data.icon}"></i>
@@ -18,6 +19,7 @@ $(() => {
1819
selectedIndex: 2,
1920
dataSource,
2021
linear: false,
22+
elementAttr: { 'aria-labelledby': 'label-titleOnly' },
2123
itemTemplate(data) {
2224
return `<div class='dx-step-label'>
2325
<div class='dx-step-title'>${data.title}</div>
@@ -29,6 +31,7 @@ $(() => {
2931
selectedIndex: 2,
3032
dataSource,
3133
linear: false,
34+
elementAttr: { 'aria-labelledby': 'label-iconOnly' },
3235
itemTemplate(data) {
3336
return `<i class="dx-icon dx-icon-${data.icon}"></i>`;
3437
},

0 commit comments

Comments
 (0)