Skip to content

Commit e24af83

Browse files
nikola-wdnikola-wd
committed
Merge branch 'dev' into main
2 parents 10afe92 + c7b6422 commit e24af83

File tree

8 files changed

+140
-41
lines changed

8 files changed

+140
-41
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: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,11 @@ class Tabs {
1010
removeAllActiveTabs(activeTabs) {
1111
for (let i = 0; i < activeTabs.length; i++) {
1212
const prevActiveTab = activeTabs[i]
13+
if (prevActiveTab.classList.contains('tab-anchor')) {
14+
prevActiveTab.setAttribute('aria-selected', 'false')
15+
} else {
16+
prevActiveTab.setAttribute('aria-hidden', 'true')
17+
}
1318
prevActiveTab.classList.remove('activeTab')
1419
}
1520
}
@@ -23,11 +28,14 @@ class Tabs {
2328
this.removeAllActiveTabs(activeTabs)
2429

2530
anchor.classList.add('activeTab')
31+
anchor.setAttribute('aria-selected', 'true')
32+
2633
const panelID = anchor.dataset.href
2734
const panel = parent.querySelector(
2835
`:scope > .tabs__content > [data-id="${panelID}"]`
2936
)
3037
panel.classList.add('activeTab')
38+
panel.setAttribute('aria-hidden', 'false')
3139
}
3240

3341
init() {

‎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: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,34 @@
11
{varType string $class} {* optional class to pass to the tabs element *}
22
{varType array $tabs} {* $tabs array. Required. *}
33

4+
5+
{* tabs ids - required for a11y purposes *}
6+
{var $tabs_ids = []}
7+
{var $random_string = uniqid()}
8+
{foreach $tabs as $tab_index => $tab_content}
9+
{var $index = $tab_index + 1}
10+
{var $tabs_ids[] = "{$random_string}_{$index}"}
11+
{/foreach}
12+
413
<div
514
class="tabs {$class ?? ''}"
615
n:if="!empty($tabs)"
716
>
817

9-
<div class="tabs__nav">
18+
<div
19+
class="tabs__nav"
20+
role="tablist"
21+
>
1022

1123
<button
1224
n:foreach="$tabs as $ta_key => $ta_content"
1325
type="button"
14-
class="tab-anchor {$ta_key == 0 ? 'activeTab' : ''}"
1526
data-href="panel-{$ta_key}"
27+
class="tab-anchor {$ta_key == 0 ? 'activeTab' : ''}"
28+
id="tab_{$tabs_ids[$ta_key]}"
29+
aria-selected="{$ta_key == 0 ? 'true' : 'false'}"
30+
aria-controls="panel-{$tabs_ids[$ta_key]}"
31+
role="tab"
1632
>
1733
{block tab_anchor}{/block}
1834
</button>
@@ -24,7 +40,11 @@
2440
<div
2541
class="tab-panel {$tp_key == 0 ? 'activeTab enter' : ''}"
2642
data-id="panel-{$tp_key}"
43+
id="panel-{$tabs_ids[$tp_key]}"
2744
n:foreach="$tabs as $tp_key => $tp_content"
45+
aria-labelledby="tab_{$tabs_ids[$tp_key]}"
46+
role="tabpanel"
47+
aria-hidden="{$tp_key == 0 ? 'false' : 'true'}"
2848
>
2949
<div class="tab-panel__content">
3050
{block tab_panel}{/block}

‎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) {

0 commit comments

Comments
 (0)