Skip to content

Commit 789302b

Browse files
CITguyCITguy
authored
Merge pull request #115 from rackerlabs/surf-712-accessibility-tabs
surf-712-accessibility tabs
2 parents 496515d + a849bd9 commit 789302b

File tree

26 files changed

+562
-237
lines changed

26 files changed

+562
-237
lines changed

‎docs/_data/nav.json5‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,11 @@
5454
{ label: '<hx-popover>', path: 'hx-popover' },
5555
{ label: '<hx-reveal>', path: 'hx-reveal' },
5656
{ label: '<hx-status>', path: 'hx-status' },
57+
{ label: '<hx-tab>', path: 'hx-tab' },
58+
{ label: '<hx-tabcontent>', path: 'hx-tabcontent' },
59+
{ label: '<hx-tablist>', path: 'hx-tablist' },
60+
{ label: '<hx-tabpanel>', path: 'hx-tabpanel' },
61+
{ label: '<hx-tabset>', path: 'hx-tabset' },
5762
{ label: '<hx-tooltip>', path: 'hx-tooltip' },
5863
],
5964
},

‎docs/_templates/partials/app_nav.njk‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
{% endmacro %}
1414

1515
{% macro link(label, href) %}
16-
{% set isCurrentLink = page.path.indexOf(href) === 0 %}
16+
{% set isCurrentLink = page.path.indexOf(href + '/') === 0 %}
1717
<a href="{{href}}" {% if isCurrentLink %}class="current"{% endif %}>
1818
{{label}}
1919
</a>

‎docs/components/tabs/index.html‎

Lines changed: 85 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -3,82 +3,101 @@
33
---
44
{% extends 'component.njk' %}
55
{% block content %}
6-
<!-- explanation goes here -->
76

87
<section>
98
<h2 class="hxSectionTitle" id="tabset">Tabset</h2>
10-
<div class="demo">
9+
<div class="demo tabs-demo">
1110
<hx-tabset>
12-
<div slot="tabs">
13-
<a href="#" role="tab" class="hxTab">Cupcake Ipsum</a>
14-
<a href="#" role="tab" class="hxTab">Biscuit Marshmallow</a>
15-
<a href="#" role="tab" class="hxTab">Caramels Marzipan</a>
16-
</div>
17-
<hx-tabpanel id="cupcake">
18-
<div class="hxRow">
19-
<div class="hxCol hxSpan-6">
20-
<p>
21-
Cupcake ipsum dolor sit amet bonbon topping caramels. Sesame snaps
22-
gummi bears liquorice cookie chupa chups fruitcake croissant
23-
chocolate topping. Brownie biscuit wafer marshmallow liquorice
24-
soufflé powder jelly.
25-
</p>
11+
<hx-tablist>
12+
<hx-tab>Cupcake Ipsum</hx-tab>
13+
<hx-tab>Biscuit Marshmallow</hx-tab>
14+
<hx-tab>Caramels Marzipan</hx-tab>
15+
</hx-tablist>
16+
<hx-tabcontent>
17+
<hx-tabpanel>
18+
<h3 class="hxSubSectionTitle">First Panel</h3>
19+
<div class="hxRow">
20+
<div class="hxCol hxSpan-6">
21+
<p>
22+
Cupcake ipsum dolor sit amet bonbon topping caramels. Sesame snaps
23+
gummi bears liquorice cookie chupa chups fruitcake croissant
24+
chocolate topping. Brownie biscuit wafer marshmallow liquorice
25+
soufflé powder jelly.
26+
</p>
27+
</div>
28+
<div class="hxCol hxSpan-6">
29+
<p>
30+
Sweet roll sesame snaps danish I love jelly wafer dragée soufflé
31+
cake. Cookie chocolate cake gingerbread powder icing. Ice cream
32+
cotton candy gummi bears oat cake sweet pastry.
33+
</p>
34+
</div>
2635
</div>
27-
<div class="hxCol hxSpan-6">
28-
<p>
29-
Sweet roll sesame snaps danish I love jelly wafer dragée soufflé
30-
cake. Cookie chocolate cake gingerbread powder icing. Ice cream
31-
cotton candy gummi bears oat cake sweet pastry.
32-
</p>
33-
</div>
34-
</div>
35-
</hx-tabpanel>
36-
<hx-tabpanel id="biscuit">
37-
<p>
38-
Biscuit marshmallow chocolate cake tiramisu cupcake. Powder liquorice jelly cheesecake chocolate bar. Chocolate cake icing pudding. Tart ice cream cupcake. Cake chocolate bar carrot cake pie marshmallow sugar plum dessert. Pudding lollipop sugar plum topping sugar plum chocolate bar jelly-o pastry donut. Candy canes icing apple pie pie.
39-
</p>
40-
</hx-tabpanel>
41-
<hx-tabpanel id="caramel">
42-
<p>
43-
Caramels marzipan gummi bears. Cake chocolate bar cake jelly-o tart topping. Jelly sweet jelly soufflé jelly toffee fruitcake. Toffee tart pastry liquorice bonbon sugar plum sweet. Jelly-o tiramisu cotton candy candy canes jelly beans dragée macaroon dessert toffee. Sesame snaps danish jujubes gummies marshmallow sesame snaps chocolate cake bonbon dessert. Candy canes cupcake sugar plum jelly beans bear claw icing candy canes bear claw. Marshmallow gingerbread biscuit jelly-o.
44-
</p>
45-
</hx-tabpanel>
36+
</hx-tabpanel>
37+
<hx-tabpanel>
38+
<h3 class="hxSubSectionTitle">Second Panel</h3>
39+
<p>
40+
Cupcake ipsum dolor sit. Amet danish jelly gummi bears. Danish
41+
caramels danish candy canes macaroon donut icing. Cupcake tiramisu
42+
soufflé fruitcake. Caramels muffin tootsie roll lemon drops bear claw
43+
cotton candy tootsie roll tootsie roll chupa chups. Pudding fruitcake
44+
ice cream marshmallow. Candy sugar plum chupa chups cotton candy
45+
gingerbread pastry gingerbread marshmallow wafer. Jelly-o bonbon
46+
dessert donut.
47+
</p>
48+
<p><a href="#">Link inside the panel</a></p>
49+
<p>
50+
Sweet toffee pie icing croissant halvah chupa chups. Cotton candy pie
51+
sesame snaps. Muffin sesame snaps cake toffee liquorice apple pie
52+
apple pie chupa chups. Lemon drops caramels sugar plum. Sweet oat cake
53+
chocolate pudding cake toffee chocolate topping. Caramels caramels
54+
candy muffin topping toffee. Topping candy canes sesame snaps carrot
55+
cake dragée wafer jelly beans. Macaroon gummies tootsie roll cookie
56+
chocolate cake chocolate cake dragée cupcake. Wafer bonbon sweet roll
57+
sweet roll.
58+
</p>
59+
<p>
60+
Sugar plum bonbon tiramisu tart candy canes sesame snaps tiramisu.
61+
Soufflé chocolate bar macaroon sweet bear claw dragée muffin dragée
62+
jelly. Apple pie gummies cake tiramisu dessert ice cream sweet roll.
63+
Pie fruitcake dragée. Gummi bears pudding muffin tart. Cake liquorice
64+
cheesecake donut. Cake chocolate marshmallow marshmallow dragée cupcake
65+
chocolate cake chocolate. Candy canes chocolate sweet roll apple pie
66+
icing danish chocolate bar. Jujubes toffee gummies powder cupcake
67+
topping chocolate. Cake sugar plum fruitcake brownie.
68+
</p>
69+
</hx-tabpanel>
70+
<hx-tabpanel>
71+
<h3 class="hxSubSectionTitle">Third Panel</h3>
72+
<img src="http://via.placeholder.com/200x150" />
73+
<img src="http://via.placeholder.com/200x150" />
74+
<img src="http://via.placeholder.com/200x150" />
75+
<img src="http://via.placeholder.com/200x150" />
76+
<img src="http://via.placeholder.com/200x150" />
77+
<img src="http://via.placeholder.com/200x150" />
78+
<img src="http://via.placeholder.com/200x150" />
79+
<img src="http://via.placeholder.com/200x150" />
80+
<img src="http://via.placeholder.com/200x150" />
81+
<img src="http://via.placeholder.com/200x150" />
82+
<img src="http://via.placeholder.com/200x150" />
83+
<img src="http://via.placeholder.com/200x150" />
84+
</hx-tabpanel>
85+
</hx-tabcontent>
4686
</hx-tabset>
4787
</div>
4888
{% code 'html' %}
4989
<hx-tabset>
50-
<div slot="tabs">
51-
<a href="#" role="tab" class="hxTab">Cupcake Ipsum</a>
52-
<a href="#" role="tab" class="hxTab">Biscuit Marshmallow</a>
53-
<a href="#" role="tab" class="hxTab">Caramel Marzipan</a>
54-
</div>
55-
<hx-tabpanel id="cupcake">
56-
<div class="hxRow">
57-
<div class="hxCol hxSpan-6">...</div>
58-
<div class="hxCol hxSpan-6">...</div>
59-
</div>
60-
</hx-tabpanel>
61-
<hx-tabpanel id="biscuit">...</hx-tabpanel>
62-
<hx-tabpanel id="caramel">...</hx-tabpanel>
90+
<hx-tablist>
91+
<hx-tab>First</hx-tab>
92+
<hx-tab>Second</hx-tab>
93+
<hx-tab>Third</hx-tab>
94+
</hx-tablist>
95+
<hx-tabcontent>
96+
<hx-tabpanel>...</hx-tabpanel>
97+
<hx-tabpanel>...</hx-tabpanel>
98+
<hx-tabpanel>...</hx-tabpanel>
99+
</hx-tabcontent>
63100
</hx-tabset>
64101
{% endcode %}
65102
</section>
66-
67-
<section>
68-
<h2 class="hxSectionTitle" id="attributes">Attributes</h2>
69-
<dl>
70-
<dt>selected</dt>
71-
<dd>Selects the tab and panel</dd>
72-
</dl>
73-
</section>
74-
75-
<section>
76-
<h2 class="hxSectionTitle" id="properties">Properties</h2>
77-
<dl>
78-
<dt>panels <small>(read-only) Array&lt;Element&gt;</small></dt>
79-
<dt>selected</dt>
80-
<dd>Determines if tab and panel is selected</dd>
81-
<dt>tabs <small>(read-only) Array&lt;Element&gt;</small></dt>
82-
</dl>
83-
</section>
84103
{% endblock %}

‎docs/docs.less‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@ hx-status {
8787
@import 'demo/icon-docs';
8888
@import 'demo/panel-docs';
8989
@import 'demo/popover-docs';
90+
@import 'demo/tabs-docs';
9091
@import 'demo/tooltip-docs';
9192
@import 'demo/typography-docs';
9293

‎docs/elements/hx-tab/index.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
---
2+
title: <hx-tab>
3+
---
4+
{% extends 'element.njk' %}
5+
{% block content %}
6+
7+
<section>
8+
<h2 class="hxSectionTitle" id="attributes">Attributes</h2>
9+
<dl>
10+
<dt>
11+
aria-controls
12+
</dt>
13+
<dd>
14+
Automatically set by <a href="elements/hx-tabset">&lt;hx-tabset&gt;</a>
15+
when attached to the DOM.
16+
</dd>
17+
18+
<dt>
19+
aria-selected
20+
</dt>
21+
<dd>
22+
Automatically set as the <code>current</code> attribute/property changes.
23+
</dd>
24+
25+
<dt>
26+
current
27+
</dt>
28+
<dd>
29+
Automatically applied by <a href="elements/hx-tabset">&lt;hx-tabset&gt;</a>
30+
to identify the current tab in a tablist.
31+
</dd>
32+
33+
<dt>
34+
id
35+
</dt>
36+
<dd>
37+
Used by <a href="elements/hx-tabset">&lt;hx-tabset&gt;</a> to
38+
wire up a tab to its tabpanel using the <code>aria-controls</code> and
39+
<code>aria-labelledby</code> attributes. If you do not define an
40+
<code>id</code> attribute, one will be automatically generated.
41+
</dd>
42+
43+
<dt>
44+
role
45+
</dt>
46+
<dd>
47+
Automatically set, if not explicitly defined in markup.
48+
</dd>
49+
</dl>
50+
</section>
51+
{% endblock %}

‎docs/elements/hx-tabcontent/index.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
---
2+
title: <hx-tabcontent>
3+
---
4+
{% extends 'element.njk' %}
5+
{% block content %}
6+
7+
<section>
8+
<h2 class="hxSectionTitle" id="attributes">Attributes</h2>
9+
<dl>
10+
<dt>
11+
role
12+
</dt>
13+
<dd>
14+
Automatically set to <code>presentation</code>, if not explicitly defined in markup.
15+
</dd>
16+
</dl>
17+
</section>
18+
{% endblock %}

‎docs/elements/hx-tablist/index.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
---
2+
title: <hx-tablist>
3+
---
4+
{% extends 'element.njk' %}
5+
{% block content %}
6+
7+
<section>
8+
<h2 class="hxSectionTitle" id="attributes">Attributes</h2>
9+
<dl>
10+
<dt>
11+
role
12+
</dt>
13+
<dd>
14+
Automatically set to <code>tablist</code>, if not explicitly defined in markup.
15+
</dd>
16+
</dl>
17+
</section>
18+
{% endblock %}

‎docs/elements/hx-tabpanel/index.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
---
2+
title: <hx-tabpanel>
3+
---
4+
{% extends 'element.njk' %}
5+
{% block content %}
6+
7+
<section>
8+
<h2 class="hxSectionTitle" id="attributes">Attributes</h2>
9+
<dl>
10+
<dt>
11+
aria-expanded <small>{String="top"}</small>
12+
</dt>
13+
<dd>
14+
Automatically set as the <code>open</code> attribute/property changes.
15+
</dd>
16+
</dl>
17+
18+
<dl>
19+
<dt>
20+
id
21+
</dt>
22+
<dd>
23+
Used by <a href="elements/hx-tabset">&lt;hx-tabset&gt;</a> to
24+
wire up a tab to its tabpanel using the <code>aria-controls</code> and
25+
<code>aria-labelledby</code> attributes. If you do not define an
26+
<code>id</code> attribute, one will be automatically generated.
27+
</dd>
28+
</dl>
29+
30+
<dl>
31+
<dt>
32+
open
33+
</dt>
34+
<dd>
35+
When present, contents are visible.
36+
</dd>
37+
</dl>
38+
39+
<dl>
40+
<dt>
41+
role
42+
</dt>
43+
<dd>
44+
Automatically set to <code>tabpanel</code>, if not explicitly defined in markup.
45+
</dd>
46+
</dl>
47+
</section>
48+
{% endblock %}

‎docs/elements/hx-tabset/index.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
---
2+
title: <hx-tabset>
3+
---
4+
{% extends 'element.njk' %}
5+
{% block content %}
6+
7+
<section>
8+
<h2 class="hxSectionTitle" id="attributes">Attributes</h2>
9+
<dl>
10+
<dt>
11+
current-tab <small>{Number=0}</small>
12+
</dt>
13+
<dd>
14+
Zero-based index of the currently active tab + tabpanel.
15+
</dd>
16+
</dl>
17+
</section>
18+
{% endblock %}

‎docs/styles/demo/tabs-docs.less‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.tabs-demo {
2+
display: flex;
3+
flex-direction: column;
4+
height: 400px;
5+
max-height: 600px;
6+
overflow: hidden;
7+
resize: vertical;
8+
9+
// overflow scroll fix for firefox
10+
hx-tabset {
11+
flex-grow: 1;
12+
min-height: 0;
13+
}
14+
}

0 commit comments

Comments
 (0)