Skip to content

Commit 2928ba6

Browse files
author
Cathy Siller
committed
chore(wip): tabset accessibility fix
1 parent 496515d commit 2928ba6

File tree

25 files changed

+537
-157
lines changed

25 files changed

+537
-157
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/components/tabs/index.html‎

Lines changed: 82 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -7,78 +7,96 @@
77

88
<section>
99
<h2 class="hxSectionTitle" id="tabset">Tabset</h2>
10-
<div class="demo">
10+
<div class="demo tabs-demo">
1111
<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>
12+
<hx-tablist>
13+
<hx-tab>Cupcake Ipsum</hx-tab>
14+
<hx-tab>Biscuit Marshmallow</hx-tab>
15+
<hx-tab>Caramels Marzipan</hx-tab>
16+
</hx-tablist>
17+
<hx-tabcontent>
18+
<hx-tabpanel>
19+
<h3 class="hxSubSectionTitle">First Panel</h3>
20+
<div class="hxRow">
21+
<div class="hxCol hxSpan-12">
22+
<p>
23+
Cupcake ipsum dolor sit amet bonbon topping caramels. Sesame snaps
24+
gummi bears liquorice cookie chupa chups fruitcake croissant
25+
chocolate topping. Brownie biscuit wafer marshmallow liquorice
26+
soufflé powder jelly.
27+
</p>
28+
</div>
2629
</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>
30+
</hx-tabpanel>
31+
<hx-tabpanel>
32+
<h3 class="hxSubSectionTitle">Second Panel</h3>
33+
<div class="hxRow">
34+
<div class="hxCol hxSpan-6">
35+
<p>
36+
Cupcake ipsum dolor sit amet bonbon topping caramels. Sesame snaps
37+
gummi bears liquorice cookie chupa chups fruitcake croissant
38+
chocolate topping. Brownie biscuit wafer marshmallow liquorice
39+
soufflé powder jelly.
40+
</p>
41+
</div>
42+
<div class="hxCol hxSpan-6">
43+
<p>
44+
Sweet roll sesame snaps danish I love jelly wafer dragée soufflé
45+
cake. Cookie chocolate cake gingerbread powder icing. Ice cream
46+
cotton candy gummi bears oat cake sweet pastry.
47+
</p>
48+
</div>
3349
</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>
50+
</hx-tabpanel>
51+
<hx-tabpanel>
52+
<h3 class="hxSubSectionTitle">Third Panel</h3>
53+
<p>
54+
Cupcake ipsum dolor sit. Amet danish jelly gummi bears. Danish
55+
caramels danish candy canes macaroon donut icing. Cupcake tiramisu
56+
soufflé fruitcake. Caramels muffin tootsie roll lemon drops bear claw
57+
cotton candy tootsie roll tootsie roll chupa chups. Pudding fruitcake
58+
ice cream marshmallow. Candy sugar plum chupa chups cotton candy
59+
gingerbread pastry gingerbread marshmallow wafer. Jelly-o bonbon
60+
dessert donut.
61+
</p>
62+
<p><a href="#">Link inside the panel</a></p>
63+
<p>
64+
Sweet toffee pie icing croissant halvah chupa chups. Cotton candy pie
65+
sesame snaps. Muffin sesame snaps cake toffee liquorice apple pie
66+
apple pie chupa chups. Lemon drops caramels sugar plum. Sweet oat cake
67+
chocolate pudding cake toffee chocolate topping. Caramels caramels
68+
candy muffin topping toffee. Topping candy canes sesame snaps carrot
69+
cake dragée wafer jelly beans. Macaroon gummies tootsie roll cookie
70+
chocolate cake chocolate cake dragée cupcake. Wafer bonbon sweet roll
71+
sweet roll.
72+
</p>
73+
<p>
74+
Sugar plum bonbon tiramisu tart candy canes sesame snaps tiramisu.
75+
Soufflé chocolate bar macaroon sweet bear claw dragée muffin dragée
76+
jelly. Apple pie gummies cake tiramisu dessert ice cream sweet roll.
77+
Pie fruitcake dragée. Gummi bears pudding muffin tart. Cake liquorice
78+
cheesecake donut. Cake chocolate marshmallow marshmallow dragée cupcake
79+
chocolate cake chocolate. Candy canes chocolate sweet roll apple pie
80+
icing danish chocolate bar. Jujubes toffee gummies powder cupcake
81+
topping chocolate. Cake sugar plum fruitcake brownie.
82+
</p>
83+
</hx-tabpanel>
84+
</hx-tabcontent>
4685
</hx-tabset>
4786
</div>
4887
{% code 'html' %}
4988
<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>
89+
<hx-tablist>
90+
<hx-tab>First</hx-tab>
91+
<hx-tab>Second</hx-tab>
92+
<hx-tab>Third</hx-tab>
93+
</hx-tablist>
94+
<hx-tabcontent>
95+
<hx-tabpanel>...</hx-tabpanel>
96+
<hx-tabpanel>...</hx-tabpanel>
97+
<hx-tabpanel>...</hx-tabpanel>
98+
</hx-tabcontent>
6399
</hx-tabset>
64100
{% endcode %}
65101
</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>
84102
{% 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: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
---
2+
title: <hx-tab>
3+
---
4+
{% extends 'element.njk' %}
5+
{% block content %}
6+
<!-- explanation goes here -->
7+
8+
<section>
9+
<h2 class="hxSectionTitle" id="attributes">Attributes</h2>
10+
<dl>
11+
<dt>aria-controls</dt>
12+
<dd>Automatically set by <code>hx-tabset</code> when attached to the DOM.</dd>
13+
14+
<dt>aria-selected</dt>
15+
<dd>Automatically set as the current attribute/property changes.</dd>
16+
17+
<dt>current</dt>
18+
<dd>
19+
Automatically applied by <code>hx-tabset</code> to identify the current
20+
Tab in a Tablist.
21+
</dd>
22+
23+
<dt>id</dt>
24+
<dd>
25+
Used by <code>hx-tabset</code> to wire up a Tab to its Tabpanel using the
26+
aria-controls and aria-labeled by attributes. If you do not define an id
27+
attribute, one will be automatically generated.
28+
</dd>
29+
30+
<dt>role</dt>
31+
<dd>Automatically set, if not explicitly defined in markup.</dd>
32+
</dl>
33+
</section>
34+
{% endblock %}

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

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

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
title: <hx-tablist>
3+
---
4+
{% extends 'element.njk' %}
5+
{% block content %}
6+
<!-- explanation goes here -->
7+
8+
<section>
9+
<h2 class="hxSectionTitle" id="attributes">Attributes</h2>
10+
<dl>
11+
<dt>aria-orientation</dt>
12+
<dd>
13+
Automatically set by <code>hx-tabset</code> when setting the
14+
<small>tab-side</small> attribute or <small>tabSide</small> property.
15+
</dd>
16+
</dl>
17+
18+
<dl>
19+
<dt>role</dt>
20+
<dd>Automatically set to "tablist", if not explicitly defined in markup.</dd>
21+
</dl>
22+
</section>
23+
{% endblock %}

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

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

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

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

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

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

‎src/helix-ui.less‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,10 +89,15 @@ fieldset label {
8989
@import 'core/hx-disclosure';
9090
@import 'core/hx-dl';
9191
@import 'core/hx-icon';
92-
@import 'core/hx-status';
9392
@import 'core/hx-panel';
9493
@import 'core/hx-popover';
9594
@import 'core/hx-reveal';
95+
@import 'core/hx-status';
96+
@import 'core/hx-tab';
97+
@import 'core/hx-tabcontent';
98+
@import 'core/hx-tablist';
99+
@import 'core/hx-tabpanel';
100+
@import 'core/hx-tabset';
96101
/* ====== end:BASE ========== */
97102

98103

0 commit comments

Comments
 (0)