Skip to content

Commit 0ec6237

Browse files
IsaDCIsaDC
committed
Merge branch 'tests/tabs-automatic-v2' of https://github.com/w3c/aria-at into tests/tabs-automatic-v2
2 parents 98821c3 + 76bc24f commit 0ec6237

6 files changed

Lines changed: 18 additions & 1614 deletions

‎tests/tabs-automatic-activation/reference/2025-6-5_142619/tabs-automatic.activateFourthTabAndSetFocusOnTabpanel.html‎

Lines changed: 3 additions & 269 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,13 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Example of Tabs with Automatic Activation</title>
77

8-
<!-- Core JS and CSS shared by all examples -->
98
<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
109
<link rel="stylesheet" href="../../../shared/css/core.css">
1110
<script src="../../../shared/js/examples.js"></script>
1211
<script src="../../../shared/js/highlight.pack.js"></script>
1312
<script src="../../../shared/js/app.js"></script>
1413
<script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
1514

16-
<!-- JS and CSS for this example -->
1715
<link href="css/tabs.css" rel="stylesheet">
1816
<script src="js/tabs-automatic.js"></script>
1917

@@ -35,12 +33,6 @@
3533
</script>
3634
<!-- End of generated output --></head>
3735
<body>
38-
<nav aria-label="Related Links" class="feedback">
39-
<ul>
40-
<li><a href="https://github.com/orgs/w3c/projects/130">Related Issues</a></li>
41-
<li><a href="../tabs-pattern.html">Design Pattern</a></li>
42-
</ul>
43-
</nav>
4436
<main>
4537
<h1>Example of Tabs with Automatic Activation</h1>
4638

@@ -64,6 +56,7 @@ <h2>About This Example</h2>
6456
<h2 id="ex_label">Example</h2>
6557
</div>
6658
<div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
59+
<p><a id="beforelink" href="#beforelink">Navigate forwards from here</a></p>
6760
<div id="ex1">
6861
<div class="tabs">
6962
<h3 id="tablist-1">Danish Composers</h3>
@@ -113,273 +106,14 @@ <h3 id="tablist-1">Danish Composers</h3>
113106
</div>
114107
</div>
115108
</div>
109+
<p><a id="afterlink" href="#afterlink">Navigate backwards from here</a></p>
116110
<div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
117111
</section>
118112

119-
<section>
120-
<h2>Accessibility Features</h2>
121-
<ul>
122-
<li>
123-
To make it easy for screen reader users to navigate from a tab to the beginning of content in the active <code>tabpanel</code>, the <code>tabpanel</code> element has <code>tabindex="0"</code> to include the panel in the page <kbd>Tab</kbd> sequence.
124-
It is recommended that all <code>tabpanel</code> elements in a tab set are focusable if there are any panels in the set that contain content where the first element in the panel is not focusable.
125-
</li>
126-
<li>
127-
To ensure people who rely on browser or operating system high contrast settings can both distinguish the active (selected) tab from other tabs and perceive keyboard focus:
128-
<ul>
129-
<li>
130-
The active tab has a 2 pixel border on its left and right sides and a 4 pixel border on top, while the names of inactive tabs have 1 pixel borders.
131-
The active tab is also 4 pixels higher than the inactive tabs.
132-
</li>
133-
<li>
134-
The focus ring is drawn with a CSS border on a child <code>span</code> element of the tab element.
135-
This focus span is separated from the tab border by 2 pixels of space to ensure focus and selection are separately perceivable.
136-
Note that when a tab element is focused, the outline of the tab element itself is set to 0 so that only one focus ring is displayed.
137-
</li>
138-
<li>
139-
Because transparent borders are visible on some systems when high contrast settings are enabled, only the focused <code>span</code> element has a visible border.
140-
When <code>span</code> elements are not indicating focus, they have a 0-width border and additional padding equal in width to the border that is used to indicate focus.
141-
</li>
142-
</ul>
143-
</li>
144-
<li>
145-
To ensure the tab content remains visible when the screen is magnified, the width of the tabs and tab panels are defined using a percentage of the screen width. As the page is magnified the height of the tab increases and the tab content re-flows to the new dimensions of the tab.
146-
</li>
147-
</ul>
148-
</section>
149-
150-
<section>
151-
<h2 id="kbd_label">Keyboard Support</h2>
152-
<table aria-labelledby="kbd_label" class="def">
153-
<thead>
154-
<tr>
155-
<th>Key</th>
156-
<th>Function</th>
157-
</tr>
158-
</thead>
159-
<tbody>
160-
<tr data-test-id="key-tab">
161-
<th><kbd>Tab</kbd></th>
162-
<td>
163-
<ul>
164-
<li>When focus moves into the tab list, places focus on the active <code>tab</code> element .</li>
165-
<li>When the tab list contains the focus, moves focus to the next element in the tab sequence, which is the <code>tabpanel</code> element.</li>
166-
</ul>
167-
</td>
168-
</tr>
169-
<tr data-test-id="key-right-arrow">
170-
<th><kbd>Right Arrow</kbd></th>
171-
<td>
172-
<ul>
173-
<li>Moves focus to the next tab.</li>
174-
<li>If focus is on the last tab, moves focus to the first tab.</li>
175-
<li>Activates the newly focused tab.</li>
176-
</ul>
177-
</td>
178-
</tr>
179-
<tr data-test-id="key-left-arrow">
180-
<th><kbd>Left Arrow</kbd></th>
181-
<td>
182-
<ul>
183-
<li>Moves focus to the previous tab.</li>
184-
<li>If focus is on the first tab, moves focus to the last tab.</li>
185-
<li>Activates the newly focused tab.</li>
186-
</ul>
187-
</td>
188-
</tr>
189-
<tr data-test-id="key-home">
190-
<th><kbd>Home</kbd></th>
191-
<td>Moves focus to the first tab and activates it.</td>
192-
</tr>
193-
<tr data-test-id="key-end">
194-
<th><kbd>End</kbd></th>
195-
<td>Moves focus to the last tab and activates it.</td>
196-
</tr>
197-
</tbody>
198-
</table>
199-
</section>
200-
201-
<section>
202-
<h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
203-
<table aria-labelledby="rps_label" class="data attributes">
204-
<thead>
205-
<tr>
206-
<th scope="col">Role</th>
207-
<th scope="col">Attribute</th>
208-
<th scope="col">Element</th>
209-
<th scope="col">Usage</th>
210-
</tr>
211-
</thead>
212-
<tbody>
213-
<tr data-test-id="tablist-role">
214-
<th scope="row">
215-
<code>tablist</code>
216-
</th>
217-
<td></td>
218-
<td>
219-
<code>div</code>
220-
</td>
221-
<td>Indicates that the element serves as a container for a set of tabs.</td>
222-
</tr>
223-
<tr data-test-id="tablist-aria-labelledby">
224-
<td></td>
225-
<th scope="row">
226-
<code>aria-labelledby="ID_REFERENCE"</code>
227-
</th>
228-
<td>
229-
<code>div</code>
230-
</td>
231-
<td>Provides a label that describes the purpose of the set of tabs.</td>
232-
</tr>
233-
<tr data-test-id="tab-role">
234-
<th scope="row">
235-
<code>tab</code>
236-
</th>
237-
<td></td>
238-
<td>
239-
<code>button</code>
240-
</td>
241-
<td>
242-
<ul>
243-
<li>Indicates the element serves as a tab control.</li>
244-
<li>When focused, it is automatically activated, causing its associated <code>tabpanel</code> to be displayed.</li>
245-
<li>Provides a label for its associated <code>tabpanel</code>.</li>
246-
</ul>
247-
</td>
248-
</tr>
249-
<tr data-test-id="tab-aria-selected">
250-
<td></td>
251-
<th scope="row">
252-
<code>aria-selected="true"</code>
253-
</th>
254-
<td>
255-
<code>button</code>
256-
</td>
257-
<td>
258-
<ul>
259-
<li>Indicates the tab is selected and its associated tabpanel is displayed.</li>
260-
<li>Set when a tab receives focus.</li>
261-
</ul>
262-
</td>
263-
</tr>
264-
<tr data-test-id="tab-aria-selected">
265-
<td></td>
266-
<th scope="row">
267-
<code>aria-selected="false"</code>
268-
</th>
269-
<td>
270-
<code>button</code>
271-
</td>
272-
<td>
273-
<ul>
274-
<li>Indicates the tab is not selected and its associated tabpanel is <strong>NOT</strong> displayed.</li>
275-
<li>Set for all tab elements in the tab set except the tab that is selected.</li>
276-
</ul>
277-
</td>
278-
</tr>
279-
<tr data-test-id="tab-tabindex">
280-
<td></td>
281-
<th scope="row">
282-
<code>tabindex="-1"</code>
283-
</th>
284-
<td>
285-
<code>button</code>
286-
</td>
287-
<td>
288-
<ul>
289-
<li>Removes the element from the page <kbd>Tab</kbd> sequence.</li>
290-
<li>Set when a tab is not selected so that only the selected tab is in the page <kbd>Tab</kbd> sequence.</li>
291-
<li>Since an HTML <code>button</code> element is used for the tab, it is not necessary to set <code>tabindex="0"</code> on the selected (active) tab element.</li>
292-
<li>
293-
This approach to managing focus is described in the section on
294-
<a href="../../../practices/keyboard-interface/keyboard-interface-practice.html#kbd_roving_tabindex">Managing Focus Within Components Using a Roving tabindex</a>.
295-
</li>
296-
</ul>
297-
</td>
298-
</tr>
299-
<tr data-test-id="tab-aria-control">
300-
<td></td>
301-
<th scope="row">
302-
<code>aria-controls="ID_REFERENCE"</code>
303-
</th>
304-
<td>
305-
<code>button</code>
306-
</td>
307-
<td>Refers to the element with <code>role=tabpanel</code> associated with the tab.</td>
308-
</tr>
309-
<tr data-test-id="tabpanel-role">
310-
<th scope="row">
311-
<code>tabpanel</code>
312-
</th>
313-
<td></td>
314-
<td>
315-
<code>div</code>
316-
</td>
317-
<td>
318-
<ul>
319-
<li>Indicates the element serves as a container for tab panel content.</li>
320-
<li>Is hidden unless its associated <code>tab</code> control is activated.</li>
321-
</ul>
322-
</td>
323-
</tr>
324-
<tr data-test-id="tabpanel-aria-labelledby">
325-
<td></td>
326-
<th scope="row">
327-
<code>aria-labelledby="ID_REFERENCE"</code>
328-
</th>
329-
<td>
330-
<code>div</code>
331-
</td>
332-
<td>
333-
<ul>
334-
<li>Refers to the <code>tab</code> element that controls the panel.</li>
335-
<li>Provides an accessible name for the tab panel.</li>
336-
</ul>
337-
</td>
338-
</tr>
339-
<tr data-test-id="tabpanel-tabindex">
340-
<td></td>
341-
<th scope="row">
342-
<code>tabindex="0"</code>
343-
</th>
344-
<td>
345-
<code>div</code>
346-
</td>
347-
<td>
348-
<ul>
349-
<li>Puts the tabpanel in the page <kbd>Tab</kbd> sequence.</li>
350-
<li>Facilitates navigation to panel content for assistive technology users.</li>
351-
<li>Focusable tabpanel elements are recommended if any panels in a set contain content where the first element in the panel is not focusable.</li>
352-
</ul>
353-
</td>
354-
</tr>
355-
</tbody>
356-
</table>
357-
</section>
358-
359-
<section>
360-
<h2>JavaScript and CSS Source Code</h2>
361-
<ul id="css_js_files">
362-
<li>CSS: <a href="css/tabs.css" type="tex/css">tabs.css</a></li>
363-
<li>Javascript: <a href="js/tabs-automatic.js" type="text/javascript">tabs-automatic.js</a></li>
364-
</ul>
365-
</section>
366-
367-
<section class="example-code">
368-
<h2 id="sc1_label">HTML Source Code</h2>
369-
<p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
370-
<div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
371-
<pre><code id="sc1"></code></pre>
372-
<div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
373-
<script>
374-
sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files', 'sc1_description');
375-
sourceCode.make();
376-
</script>
377-
</section>
378-
379113
<!-- Generated by process-test-directory.js -->
380114
<div style="position: relative; left: 0; right: 0; height: 2rem;">
381115
<button class="button-run-test-setup" autofocus style="height: 100%; width: 100%;">Run Test Setup</button>
382116
</div>
383117
<!-- End of generated output --></main>
384118
</body>
385-
</html>
119+
</html>

0 commit comments

Comments
 (0)