Skip to content

Commit a849bd9

Browse files
Cathy SillerRyan A. Johnson
Cathy Siller
authored and
Ryan A. Johnson
committed
refactor(tabs): add accessibility to existing tabs
1 parent 2928ba6 commit a849bd9

File tree

20 files changed

+192
-247
lines changed

20 files changed

+192
-247
lines changed

‎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: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
---
44
{% extends 'component.njk' %}
55
{% block content %}
6-
<!-- explanation goes here -->
76

87
<section>
98
<h2 class="hxSectionTitle" id="tabset">Tabset</h2>
@@ -17,19 +16,6 @@ <h2 class="hxSectionTitle" id="tabset">Tabset</h2>
1716
<hx-tabcontent>
1817
<hx-tabpanel>
1918
<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>
29-
</div>
30-
</hx-tabpanel>
31-
<hx-tabpanel>
32-
<h3 class="hxSubSectionTitle">Second Panel</h3>
3319
<div class="hxRow">
3420
<div class="hxCol hxSpan-6">
3521
<p>
@@ -49,7 +35,7 @@ <h3 class="hxSubSectionTitle">Second Panel</h3>
4935
</div>
5036
</hx-tabpanel>
5137
<hx-tabpanel>
52-
<h3 class="hxSubSectionTitle">Third Panel</h3>
38+
<h3 class="hxSubSectionTitle">Second Panel</h3>
5339
<p>
5440
Cupcake ipsum dolor sit. Amet danish jelly gummi bears. Danish
5541
caramels danish candy canes macaroon donut icing. Cupcake tiramisu
@@ -81,6 +67,21 @@ <h3 class="hxSubSectionTitle">Third Panel</h3>
8167
topping chocolate. Cake sugar plum fruitcake brownie.
8268
</p>
8369
</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>
8485
</hx-tabcontent>
8586
</hx-tabset>
8687
</div>

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

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

87
<section>
98
<h2 class="hxSectionTitle" id="attributes">Attributes</h2>
109
<dl>
11-
<dt>aria-controls</dt>
12-
<dd>Automatically set by <code>hx-tabset</code> when attached to the DOM.</dd>
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>
1317

14-
<dt>aria-selected</dt>
15-
<dd>Automatically set as the current attribute/property changes.</dd>
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>
1632

17-
<dt>current</dt>
33+
<dt>
34+
id
35+
</dt>
1836
<dd>
19-
Automatically applied by <code>hx-tabset</code> to identify the current
20-
Tab in a Tablist.
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.
2141
</dd>
2242

23-
<dt>id</dt>
43+
<dt>
44+
role
45+
</dt>
2446
<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.
47+
Automatically set, if not explicitly defined in markup.
2848
</dd>
29-
30-
<dt>role</dt>
31-
<dd>Automatically set, if not explicitly defined in markup.</dd>
3249
</dl>
3350
</section>
3451
{% endblock %}

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

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

87
<section>
98
<h2 class="hxSectionTitle" id="attributes">Attributes</h2>
109
<dl>
11-
<dt>role</dt>
12-
<dd>Automatically set to "presentation", if not explicitly defined in markup.</dd>
10+
<dt>
11+
role
12+
</dt>
13+
<dd>
14+
Automatically set to <code>presentation</code>, if not explicitly defined in markup.
15+
</dd>
1316
</dl>
1417
</section>
1518
{% endblock %}

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

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,16 @@
33
---
44
{% extends 'element.njk' %}
55
{% block content %}
6-
<!-- explanation goes here -->
76

87
<section>
98
<h2 class="hxSectionTitle" id="attributes">Attributes</h2>
109
<dl>
11-
<dt>aria-orientation</dt>
10+
<dt>
11+
role
12+
</dt>
1213
<dd>
13-
Automatically set by <code>hx-tabset</code> when setting the
14-
<small>tab-side</small> attribute or <small>tabSide</small> property.
14+
Automatically set to <code>tablist</code>, if not explicitly defined in markup.
1515
</dd>
1616
</dl>
17-
18-
<dl>
19-
<dt>role</dt>
20-
<dd>Automatically set to "tablist", if not explicitly defined in markup.</dd>
21-
</dl>
2217
</section>
2318
{% endblock %}

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

Lines changed: 23 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,35 +3,46 @@
33
---
44
{% extends 'element.njk' %}
55
{% block content %}
6-
<!-- explanation goes here -->
7-
86

97
<section>
108
<h2 class="hxSectionTitle" id="attributes">Attributes</h2>
119
<dl>
12-
<dt>aria-expanded <small>{String="top"}</small></dt>
10+
<dt>
11+
aria-expanded <small>{String="top"}</small>
12+
</dt>
1313
<dd>
14-
Automatically set as the <small>open</small> attribute/property changes.
14+
Automatically set as the <code>open</code> attribute/property changes.
1515
</dd>
1616
</dl>
1717

1818
<dl>
19-
<dt>id</dt>
19+
<dt>
20+
id
21+
</dt>
2022
<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.
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.
2427
</dd>
2528
</dl>
2629

2730
<dl>
28-
<dt>open</dt>
29-
<dd>When present, contents are visible.</dd>
31+
<dt>
32+
open
33+
</dt>
34+
<dd>
35+
When present, contents are visible.
36+
</dd>
3037
</dl>
3138

3239
<dl>
33-
<dt>role</dt>
34-
<dd>Automatically set to "tabpanel", if not explicitly defined in markup.</dd>
40+
<dt>
41+
role
42+
</dt>
43+
<dd>
44+
Automatically set to <code>tabpanel</code>, if not explicitly defined in markup.
45+
</dd>
3546
</dl>
3647
</section>
3748
{% endblock %}

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

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,16 @@
33
---
44
{% extends 'element.njk' %}
55
{% block content %}
6-
<!-- explanation goes here -->
6+
77
<section>
88
<h2 class="hxSectionTitle" id="attributes">Attributes</h2>
99
<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>
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>
1716
</dl>
1817
</section>
1918
{% endblock %}

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

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
.tabs-demo {
22
display: flex;
33
flex-direction: column;
4-
/*
5-
max-height: 400px;
6-
min-height: 200px;
4+
height: 400px;
5+
max-height: 600px;
76
overflow: hidden;
87
resize: vertical;
9-
*/
10-
8+
119
// overflow scroll fix for firefox
1210
hx-tabset {
1311
flex-grow: 1;

‎src/helix-ui.less‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,6 @@ fieldset label {
157157
// Shame
158158
@import 'layout'; // to be rewritten as a component/module
159159
@import 'alert'; // needs turned into core element + theme
160-
@import 'tabset'; // needs rewritten as several custom elements
161160
@import 'navigation'; // component and theme need separated
162161
@import 'menu'; // likely needs refactored
163162
/* ====== end:OVERRIDES ========== */

‎src/helix-ui/elements.js‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,11 @@ export { HXCheckboxElement } from './elements/HXCheckboxElement.js';
22
export { HXDisclosureElement } from './elements/HXDisclosureElement.js';
33
export { HXMenuElement } from './elements/HXMenuElement.js';
44
export { HXIconElement } from './elements/HXIconElement.js';
5-
export { HXRevealElement } from './elements/HXRevealElement.js'; //
6-
export { HXTabcontentElement } from './elements/HXTabcontentElement.js'; //
7-
export { HXTabElement } from './elements/HXTabElement.js'; //
8-
export { HXTablistElement } from './elements/HXTablistElement.js'; //
9-
export { HXTabpanelElement } from './elements/HXTabpanelElement.js'; //
10-
export { HXTabsetElement } from './elements/HXTabsetElement.js'; //
5+
export { HXPopoverElement } from './elements/HXPopoverElement.js';
6+
export { HXRevealElement } from './elements/HXRevealElement.js';
7+
export { HXTabcontentElement } from './elements/HXTabcontentElement.js';
8+
export { HXTabElement } from './elements/HXTabElement.js';
9+
export { HXTablistElement } from './elements/HXTablistElement.js';
10+
export { HXTabpanelElement } from './elements/HXTabpanelElement.js';
11+
export { HXTabsetElement } from './elements/HXTabsetElement.js';
12+
export { HXTooltipElement } from './elements/HXTooltipElement.js';

0 commit comments

Comments
 (0)