Skip to content

Commit c7b6422

Browse files
nikola-wdnikola-wd
committed
Improve a11y for the accordion component
1 parent 1eab295 commit c7b6422

File tree

8 files changed

+83
-52
lines changed

8 files changed

+83
-52
lines changed

‎src/js/lazily-loaded/Collapsible.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -224,12 +224,12 @@ class Collapsible {
224224

225225
if (event.target.playbackRate * (reverse ? 1 : -1) > 0) {
226226
this.node.classList.remove(this.constructor.classes.active)
227-
this.node.setAttribute('aria-expanded', false)
227+
this.trigger.setAttribute('aria-expanded', false)
228228
this.setStartState()
229229
return
230230
}
231231
this.node.classList.add(this.constructor.classes.active)
232-
this.node.setAttribute('aria-expanded', true)
232+
this.trigger.setAttribute('aria-expanded', true)
233233
this.setEndState()
234234
}
235235

@@ -260,9 +260,11 @@ class Collapsible {
260260

261261
if (this.initiallyOpen) {
262262
this.node.classList.add(this.constructor.classes.active)
263-
this.node.setAttribute('aria-expanded', true)
263+
this.trigger.setAttribute('aria-expanded', true)
264264
this.setEndState()
265265
return
266+
} else {
267+
this.trigger.setAttribute('aria-expanded', false)
266268
}
267269
this.setStartState()
268270
}

‎src/js/lazily-loaded/Tabs.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ class Tabs {
1010
removeAllActiveTabs(activeTabs) {
1111
for (let i = 0; i < activeTabs.length; i++) {
1212
const prevActiveTab = activeTabs[i]
13-
console.log(prevActiveTab)
1413
if (prevActiveTab.classList.contains('tab-anchor')) {
1514
prevActiveTab.setAttribute('aria-selected', 'false')
1615
} else {

‎views/parts/_accordion.latte‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,16 @@
66
{varType bool $collapse_siblings} {* Whether or not opening one accordion items should close siblings. Default is falses *}
77
{varType int $initially_open_item} {* By default all accordion items are closed. This can be used, and index passed to make one open by default *}
88

9+
10+
11+
{* panels ids - required for a11y purposes *}
12+
{var $panels_ids = []}
13+
{var $random_string = uniqid()}
14+
{foreach $items as $acc_index => $tab_content}
15+
{var $index = $acc_index + 1}
16+
{var $panels_ids[] = "{$random_string}_{$index}"}
17+
{/foreach}
18+
919
<div
1020
class="accordion {$class ?? ''}"
1121
{if $collapse_siblings ?? false}
@@ -31,13 +41,18 @@
3141
<button
3242
class="collapsible__trigger"
3343
type="button"
44+
id="acc_panel_{$panels_ids[$index]}"
3445
aria-label="{$aria_label_text}"
3546
>
3647
{block acc_trigger}{/block}
3748
<span class="chevron"></span>
3849
</button>
3950

40-
<div class="collapsible__content">
51+
<div
52+
class="collapsible__content"
53+
role="region"
54+
aria-labelledby="acc_panel_{$panels_ids[$index]}"
55+
>
4156
<div class="collapsible__content__inner">
4257
{block acc_content}{/block}
4358
</div>{* inner *}

‎views/parts/_collapsibles.latte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@
7272
{/embed}
7373
</div>{* col *}
7474
<div class="col">
75-
<h4>1 Level - independed</h4>
75+
<h4>1 Level - independent</h4>
7676
{embed
7777
tr_part('_accordion'),
7878
items: $test_acc_items,

‎views/parts/_tabs.latte‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,9 @@
77
{var $random_string = uniqid()}
88
{foreach $tabs as $tab_index => $tab_content}
99
{var $index = $tab_index + 1}
10-
{$tabs_ids[] = "{$random_string}_{$index}"}
10+
{var $tabs_ids[] = "{$random_string}_{$index}"}
1111
{/foreach}
1212

13-
{do dump($tabs_ids)}
14-
1513
<div
1614
class="tabs {$class ?? ''}"
1715
n:if="!empty($tabs)"

‎views/temp/views-parts-_accordion.latte--0114b62ed0.php‎

Lines changed: 38 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -13,59 +13,80 @@ final class Template0114b62ed0 extends Latte\Runtime\Template
1313
public function main(): array
1414
{
1515
extract($this->params);
16-
if (!empty($items)) /* line 9 */ {
16+
echo '
17+
18+
';
19+
$panels_ids = [] /* line 12 */;
20+
$random_string = uniqid() /* line 13 */;
21+
$iterations = 0;
22+
foreach ($items as $acc_index => $tab_content) /* line 14 */ {
23+
$index = $acc_index + 1 /* line 15 */;
24+
$panels_ids[] = "{$random_string}_{$index}" /* line 16 */;
25+
$iterations++;
26+
}
27+
echo "\n";
28+
if (!empty($items)) /* line 19 */ {
1729
echo '<div
1830
class="accordion ';
19-
echo LR\Filters::escapeHtmlAttr($class ?? '') /* line 10 */;
31+
echo LR\Filters::escapeHtmlAttr($class ?? '') /* line 20 */;
2032
echo '"
2133
';
22-
if ($collapse_siblings ?? false) /* line 11 */ {
34+
if ($collapse_siblings ?? false) /* line 21 */ {
2335
echo ' data-collapse-siblings
2436
';
2537
}
2638
echo ' data-duration="';
27-
echo LR\Filters::escapeHtmlAttr(!empty($duration) ? $duration : '300') /* line 14 */;
39+
echo LR\Filters::escapeHtmlAttr(!empty($duration) ? $duration : '300') /* line 24 */;
2840
echo '"
2941
';
30-
if (!empty($easing)) /* line 16 */ {
42+
if (!empty($easing)) /* line 26 */ {
3143
echo ' data-easing="';
32-
echo LR\Filters::escapeHtmlAttr($easing) /* line 17 */;
44+
echo LR\Filters::escapeHtmlAttr($easing) /* line 27 */;
3345
echo '"
3446
';
3547
}
3648
echo '>
3749
3850
';
3951
$iterations = 0;
40-
foreach ($iterator = $ʟ_it = new LR\CachingIterator($items, $ʟ_it ?? null) as $index => $item) /* line 21 */ {
41-
$is_initially_open = isset($initially_open_item) && $index === $initially_open_item /* line 22 */;
42-
$aria_label_text = !empty($aria_label) ? $aria_label : 'Toggle Accordion Item' /* line 23 */;
52+
foreach ($iterator = $ʟ_it = new LR\CachingIterator($items, $ʟ_it ?? null) as $index => $item) /* line 31 */ {
53+
$is_initially_open = isset($initially_open_item) && $index === $initially_open_item /* line 32 */;
54+
$aria_label_text = !empty($aria_label) ? $aria_label : 'Toggle Accordion Item' /* line 33 */;
4355
echo '
4456
<div
4557
class="collapsible"
4658
';
47-
if ($is_initially_open) /* line 27 */ {
59+
if ($is_initially_open) /* line 37 */ {
4860
echo ' data-initially-open
4961
';
5062
}
5163
echo ' >
5264
<button
5365
class="collapsible__trigger"
5466
type="button"
67+
id="acc_panel_';
68+
echo LR\Filters::escapeHtmlAttr($panels_ids[$index]) /* line 44 */;
69+
echo '"
5570
aria-label="';
56-
echo LR\Filters::escapeHtmlAttr($aria_label_text) /* line 34 */;
71+
echo LR\Filters::escapeHtmlAttr($aria_label_text) /* line 45 */;
5772
echo '"
5873
>
5974
';
60-
$this->renderBlock('acc_trigger', get_defined_vars()) /* line 36 */;
75+
$this->renderBlock('acc_trigger', get_defined_vars()) /* line 47 */;
6176
echo '
6277
<span class="chevron"></span>
6378
</button>
6479
65-
<div class="collapsible__content">
80+
<div
81+
class="collapsible__content"
82+
role="region"
83+
aria-labelledby="acc_panel_';
84+
echo LR\Filters::escapeHtmlAttr($panels_ids[$index]) /* line 54 */;
85+
echo '"
86+
>
6687
<div class="collapsible__content__inner">
6788
';
68-
$this->renderBlock('acc_content', get_defined_vars()) /* line 42 */;
89+
$this->renderBlock('acc_content', get_defined_vars()) /* line 57 */;
6990
echo '
7091
</div>
7192
</div>
@@ -86,22 +107,22 @@ public function prepare(): void
86107
{
87108
extract($this->params);
88109
if (!$this->getReferringTemplate() || $this->getReferenceType() === "extends") {
89-
foreach (array_intersect_key(['index' => '21', 'item' => '21'], $this->params) as $ʟ_v => $ʟ_l) {
110+
foreach (array_intersect_key(['acc_index' => '14', 'tab_content' => '14', 'index' => '31', 'item' => '31'], $this->params) as $ʟ_v => $ʟ_l) {
90111
trigger_error("Variable \$$ʟ_v overwritten in foreach on line $ʟ_l");
91112
}
92113
}
93114

94115
}
95116

96117

97-
/** {block acc_trigger} on line 36 */
118+
/** {block acc_trigger} on line 47 */
98119
public function blockAcc_trigger(array $ʟ_args): void
99120
{
100121

101122
}
102123

103124

104-
/** {block acc_content} on line 42 */
125+
/** {block acc_content} on line 57 */
105126
public function blockAcc_content(array $ʟ_args): void
106127
{
107128

‎views/temp/views-parts-_collapsibles.latte--7b10b89549.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ class="f-row"
9292
echo '
9393
</div>
9494
<div class="col">
95-
<h4>1 Level - independed</h4>
95+
<h4>1 Level - independent</h4>
9696
';
9797
$this->enterBlockLayer(3, get_defined_vars()) /* line 76 */;
9898
if (false) {
@@ -325,7 +325,7 @@ class="f-row"
325325
style="--i-cols: 3; --i-gap: 15; margin-bottom: 200px;"
326326
>
327327
<div class="col">
328-
<h5>Custom Easing:</h5>
328+
<h5>Custom Easing</h5>
329329
';
330330
$this->enterBlockLayer(11, get_defined_vars()) /* line 358 */;
331331
if (false) {

‎views/temp/views-parts-_tabs.latte--517e083405.php‎

Lines changed: 20 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -19,18 +19,14 @@ public function main(): array
1919
$iterations = 0;
2020
foreach ($tabs as $tab_index => $tab_content) /* line 8 */ {
2121
$index = $tab_index + 1 /* line 9 */;
22-
echo ' ';
23-
echo LR\Filters::escapeHtmlText($tabs_ids[] = "{$random_string}_{$index}") /* line 10 */;
24-
echo "\n";
22+
$tabs_ids[] = "{$random_string}_{$index}" /* line 10 */;
2523
$iterations++;
2624
}
2725
echo "\n";
28-
dump($tabs_ids) /* line 13 */;
29-
echo "\n";
30-
if (!empty($tabs)) /* line 15 */ {
26+
if (!empty($tabs)) /* line 13 */ {
3127
echo '<div
3228
class="tabs ';
33-
echo LR\Filters::escapeHtmlAttr($class ?? '') /* line 16 */;
29+
echo LR\Filters::escapeHtmlAttr($class ?? '') /* line 14 */;
3430
echo '"
3531
>
3632
@@ -41,28 +37,28 @@ class="tabs__nav"
4137
4238
';
4339
$iterations = 0;
44-
foreach ($iterator = $ʟ_it = new LR\CachingIterator($tabs, $ʟ_it ?? null) as $ta_key => $ta_content) /* line 25 */ {
40+
foreach ($iterator = $ʟ_it = new LR\CachingIterator($tabs, $ʟ_it ?? null) as $ta_key => $ta_content) /* line 23 */ {
4541
echo ' <button
4642
type="button"
4743
data-href="panel-';
48-
echo LR\Filters::escapeHtmlAttr($ta_key) /* line 28 */;
44+
echo LR\Filters::escapeHtmlAttr($ta_key) /* line 26 */;
4945
echo '"
5046
class="tab-anchor ';
51-
echo LR\Filters::escapeHtmlAttr($ta_key == 0 ? 'activeTab' : '') /* line 29 */;
47+
echo LR\Filters::escapeHtmlAttr($ta_key == 0 ? 'activeTab' : '') /* line 27 */;
5248
echo '"
5349
id="tab_';
54-
echo LR\Filters::escapeHtmlAttr($tabs_ids[$ta_key]) /* line 30 */;
50+
echo LR\Filters::escapeHtmlAttr($tabs_ids[$ta_key]) /* line 28 */;
5551
echo '"
5652
aria-selected="';
57-
echo LR\Filters::escapeHtmlAttr($ta_key == 0 ? 'true' : 'false') /* line 31 */;
53+
echo LR\Filters::escapeHtmlAttr($ta_key == 0 ? 'true' : 'false') /* line 29 */;
5854
echo '"
5955
aria-controls="panel-';
60-
echo LR\Filters::escapeHtmlAttr($tabs_ids[$ta_key]) /* line 32 */;
56+
echo LR\Filters::escapeHtmlAttr($tabs_ids[$ta_key]) /* line 30 */;
6157
echo '"
6258
role="tab"
6359
>
6460
';
65-
$this->renderBlock('tab_anchor', get_defined_vars()) /* line 35 */;
61+
$this->renderBlock('tab_anchor', get_defined_vars()) /* line 33 */;
6662
echo '
6763
</button>
6864
';
@@ -76,28 +72,28 @@ class="tab-anchor ';
7672
7773
';
7874
$iterations = 0;
79-
foreach ($iterator = $ʟ_it = new LR\CachingIterator($tabs, $ʟ_it ?? null) as $tp_key => $tp_content) /* line 42 */ {
75+
foreach ($iterator = $ʟ_it = new LR\CachingIterator($tabs, $ʟ_it ?? null) as $tp_key => $tp_content) /* line 40 */ {
8076
echo ' <div
8177
class="tab-panel ';
82-
echo LR\Filters::escapeHtmlAttr($tp_key == 0 ? 'activeTab enter' : '') /* line 43 */;
78+
echo LR\Filters::escapeHtmlAttr($tp_key == 0 ? 'activeTab enter' : '') /* line 41 */;
8379
echo '"
8480
data-id="panel-';
85-
echo LR\Filters::escapeHtmlAttr($tp_key) /* line 44 */;
81+
echo LR\Filters::escapeHtmlAttr($tp_key) /* line 42 */;
8682
echo '"
8783
id="panel-';
88-
echo LR\Filters::escapeHtmlAttr($tabs_ids[$tp_key]) /* line 45 */;
84+
echo LR\Filters::escapeHtmlAttr($tabs_ids[$tp_key]) /* line 43 */;
8985
echo '"
9086
aria-labelledby="tab_';
91-
echo LR\Filters::escapeHtmlAttr($tabs_ids[$tp_key]) /* line 47 */;
87+
echo LR\Filters::escapeHtmlAttr($tabs_ids[$tp_key]) /* line 45 */;
9288
echo '"
9389
role="tabpanel"
9490
aria-hidden="';
95-
echo LR\Filters::escapeHtmlAttr($tp_key == 0 ? 'false' : 'true') /* line 49 */;
91+
echo LR\Filters::escapeHtmlAttr($tp_key == 0 ? 'false' : 'true') /* line 47 */;
9692
echo '"
9793
>
9894
<div class="tab-panel__content">
9995
';
100-
$this->renderBlock('tab_panel', get_defined_vars()) /* line 52 */;
96+
$this->renderBlock('tab_panel', get_defined_vars()) /* line 50 */;
10197
echo '
10298
</div>
10399
</div>';
@@ -116,22 +112,22 @@ public function prepare(): void
116112
{
117113
extract($this->params);
118114
if (!$this->getReferringTemplate() || $this->getReferenceType() === "extends") {
119-
foreach (array_intersect_key(['tab_index' => '8', 'tab_content' => '8', 'ta_key' => '25', 'ta_content' => '25', 'tp_key' => '42', 'tp_content' => '42'], $this->params) as $ʟ_v => $ʟ_l) {
115+
foreach (array_intersect_key(['tab_index' => '8', 'tab_content' => '8', 'ta_key' => '23', 'ta_content' => '23', 'tp_key' => '40', 'tp_content' => '40'], $this->params) as $ʟ_v => $ʟ_l) {
120116
trigger_error("Variable \$$ʟ_v overwritten in foreach on line $ʟ_l");
121117
}
122118
}
123119

124120
}
125121

126122

127-
/** {block tab_anchor} on line 35 */
123+
/** {block tab_anchor} on line 33 */
128124
public function blockTab_anchor(array $ʟ_args): void
129125
{
130126

131127
}
132128

133129

134-
/** {block tab_panel} on line 52 */
130+
/** {block tab_panel} on line 50 */
135131
public function blockTab_panel(array $ʟ_args): void
136132
{
137133

0 commit comments

Comments
 (0)