blob: 559af0a2c33d659eab8957dd1961d3127f647656 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
{#
A single tabset.
A tabstep is a list of tabs, where one of them are being shown at a time.
Parameters:
tabset:
id:
tabs:
https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-automatic/
#}
<div class="tabs" data-tabset="{{ tabset.id }}">
<menu class="yesscript"
role="tablist" >
{% for tab in tabset.tabs %}
<li data-tab="{{ tab.id }}">
<button type="button"
role="tab"
aria-controls="{{ tab.id }}"
{% if first %}
aria-selected="true"
{% else %}
tabindex="-1"
{% endif %}
>{{ tab.title }}</button>
</li>
{% endfor %}
</menu>
{% for tab in tabset.tabs %}
<div class="tab"
id="{{ tab.id }}"
role="tabpanel"
tabindex="0"
aria-laballedby="{# TODO id of button#}"
>
<div class="noscript">
<h2>{{ tab.title }}</h2>
</div>
<div>{{ tab.content }}</div>
</div>
{% endfor %}
</div>
{# ft:jinja2 #}
|
