-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.src.html
505 lines (434 loc) · 24.5 KB
/
index.src.html
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
<!DOCTYPE html>
<html lang="en">
<head>
<title>Panels and Panel Sets Extension</title>
<meta charset='utf-8'>
<script src='http://www.w3.org/Tools/respec/respec-w3c-common' async class='remove'></script>
<style>
.todo {
color: red;
font-weight: bold;
}
</style>
<script class='remove'>
var respecConfig = {
specStatus: "unofficial",
shortName: "panels-and-panelsets",
editors: [{
name: "Brian Kardell",
url: "https://twitter.com/briankardell",
company: "Apollo Education Group",
companyURL: "http://www.apollo.edu/"
}, {
name: "Léonie Watson",
url: "https://twitter.com/LeonieWatson",
company: "The Paciello Group (TPG)",
companyURL: "http://paciellogroup.com/"
}, {
name: "Chaals McCathie Nevile",
url: "https://twitter.com/chaals",
company: "Yandex",
companyURL: "http://yandex.com/"
}, {
name: "Steve Faulkner",
url: "https://twitter.com/stevefaulkner",
company: "The Paciello Group (TPG)",
companyURL: "http://paciellogroup.com/"
}]
};
</script>
</head>
<body>
<section id='abstract'>
<p>This specification extension defines elements and attributes for constructing a panel or collection of panels based on a single interaction paradigm.</p>
<p>Using custom elements, a collection of <a href="https://bkardell.github.io/common-panel/prototype/panelset-element.html">functional prototypes</a> is available. All DOM methods are under-scored to preserve forwards compatibility.</p>
</section>
<section id='sotd'>
<p>Work on this extension is being done on <a href="https://github.com/bkardell/common-panel">Github</a>. Please share comments and feedback using the <a href="https://github.com/bkardell/common-panel/issues">Github issue tracker</a>.</p>
</section>
<section id='introduction'>
<h2>Introduction</h2>
<p>The concept of a content panel originates in print media and has carried over into digital media. The transition to digital media brought about the ability to interact with collections of panels, and over time a number of visual metaphors for this interaction have emerged. Tabs, accordions, decks and carousels are all design patterns based on interactions with sets of content panels.</p>
<p>The history of interface design shows that each of these design patterns has evolved independently, despite their similarities. The WAI-ARIA Authoring Practices Guide for example, describes a set of tabs and an accordion widget in identical terms except for visual orientation.</p>
<p>With the growing number of screen sizes and the advent of responsive design, these visual metaphors may no longer be constant. A set of tabs may be the logical choice for displaying content on a wide-screen, but the same content may be more intuitively displayed as an accordion or a deck on a narrow-screen. However, the interaction model and semantic information for each of these design patterns remains the same, regardless of the visual representation.</p>
<p>This extension defines a set of HTML elements and attributes for representing collections of content panels with appropriate semantics and interactions. The task of adopting a particular visual metaphor is left to CSS.</p>
</section>
<section>
<h2>Conformance</h2>
<p>All authoring guidelines, diagrams, examples, notes, and sections marked "informative" in this specification are informational. Everything else in this specification is "normative" as described in [[!qaframe-spec]]. The key words "must", "should", "should not" and "may" in this specification are to be interpreted as described in [[!RFC2119]].</p>
<section>
<h3>Dependencies and Definitions</h3>
<p>The Interface Definition Language (IDL) fragments in this specification must be interpreted as required for conforming IDL fragments, as described in the Web IDL specification. [[!WEBIDL]]</p>
<p>This document uses the terms accessible and accessibility in the sense of ensuring people with disabilities can use the Web.</p>
</section>
</section>
<section>
<h2>Use cases and Requirements</h2>
<p>The panels specification describes a number of elements and attributes that give authors the ability to present panels or collections of panels in a semantically consistent way.</p>
<section>
<h3>Use Cases for Panels and Panel Sets</h3>
<section>
<h4>Use cases for the tab set metaphor</h4>
<ul>
<li>Displaying semester timetables for the school year on a college intranet.</li>
<li>Displaying nutritional values, ingredients, allergy warnings etc. about a food product on a grocery store website.</li>
<li>Displaying configuration settings, statistics, performance data etc. about a software deployment pipeline on a continuous build server.</li>
<li>Displaying descriptions, details, floor plans etc. about a house for sale on a property website.</li>
<li>Displaying alternative representations of data (graphical and tabular) in an analytics web application.</li>
</ul>
</section>
<section>
<h4>Use cases for the accordion metaphor</h4>
<ul>
<li>Displaying bulletin board messages on an office intranet.</li>
<li>Displaying an A to Z of glossary definitions on a medical research website.</li>
<li>Displaying answers to frequently asked questions for newbies on a gamer’s forum.</li>
</ul>
</section>
<section>
<h4>Use cases for the carousel metaphor</h4>
<ul>
<li>Displaying bulletin board messages on an office intranet.</li>
<li>Displaying attractive pictures of a spa resort on a vacation brochure website.</li>
<li>Advertising key features of a prototype flying car on the company’s corporate website.</li>
</ul>
</section>
<section>
<h4>Use cases for the coverflow metaphor</h4>
<ul>
<li>Flipping through an album of sky dive photos on a photo sharing website.</li>
<li>Browsing a portfolio of watercolours on an artist’s brochure website.</li>
</ul>
</section>
<section>
<h4>Use cases for the deck metaphor</h4>
<ul>
<li>Displaying a slide deck from a conference talk.</li>
<li>Storing contact information in a rolodex application.</li>
<li>Viewing pictures of a spa resort's vacation brochure website on a small device.</li>
<li>Flipping through an album on a photo sharing website.</li>
<li>Browsing a portfolio of watercolours on an artist’s brochure website.</li>
<li>Advertising key features of a prototype flying car on the company’s corporate website, for display on a small device.</li>
<li>Presenting a series of comic panel mock-ups, each representing a significant moment in the overall narrative.</li>
</ul>
</section>
</section>
<section>
<h3>Requirements for Panels and Panel Sets</h3>
<dl>
<dt>Consistent</dt>
<dd>It must be possible to interact with a panel or set of panels in a consistent way, using different modes of interaction including keyboard, mouse, voice and touch.</dd>
<dt>Identifiable</dt>
<dd>It must be possible for a user agent to identify the components of a panel, and the component panels within a set.</dd>
<dt>Stylable</dt>
<dd>It must be possible to style a panel or set of panels to provide different visual affordances.</dd>
</dl>
</section>
</section>
<section>
<h2>The panel element</h2>
<dl>
<dt><a href="http://www.w3.org/TR/html5/dom.html#element-dfn-categories">Categories</a>:</dt>
<dd><!--
If the element has the removable or expandable attributes: Palpable content. ??--></dd>
<dd><a href="http://www.w3.org/TR/html5/dom.html#flow-content-1">Flow content</a>.</dd>
<dd>If the element is a child of a <a href="#the-panelset-element">panelset</a> element, or has the <a href="#the-removable-attribute">removable</a> or <a href="#the-expandable-attribute">expandable</a> attributes: <a href="http://www.w3.org/TR/html5/dom.html#interactive-content-0">Interactive content</a>. [unsure about this as the interactive element is the paneltitle]</dd>
<dd><a href="http://www.w3.org/TR/html5/dom.html#palpable-content-0">Palpable content</a>.</dd>
<dt><a href="http://www.w3.org/TR/html5/dom.html#element-dfn-contexts">Contexts in which this element can be used</a>:</dt>
<dd>Where <a href="http://www.w3.org/TR/html5/dom.html#flow-content-1">flow content</a> is expected.</dd>
<dt><a href="http://www.w3.org/TR/html5/dom.html#element-dfn-content-model">Content model</a>:</dt>
<dd>One <a href="#the-paneltitle-element">paneltitle</a> element followed by <a href="http://www.w3.org/TR/html5/dom.html#flow-content-1">flow content</a>.</dd>
<dt><a data-anolis-xref="element-dfn-attributes" href="http://www.w3.org/TR/html5/dom.html#element-dfn-attributes">Content attributes</a>:</dt>
<dd><a href="http://www.w3.org/TR/html5/dom.html#global-attributes">Global attributes</a>.<br>
<a href="#the-removable-attribute">removable</a> - hints that the panel can be removed from the interface.<br>
<a href="#the-expandable-attribute">expandable</a> - indicates the expanded state of the panel.<br></dd>
<dt><a data-anolis-xref="element-dfn-tag-omission" href="http://www.w3.org/TR/html5/dom.html#element-dfn-tag-omission">Tag omission in text/html</a>:</dt>
<dd>Neither tag is omissable.</dd>
<dt>Allowed <a href="http://www.w3.org/TR/html5/dom.html#aria-role-attribute">ARIA role attribute</a> values:</dt>
<dd><a href="http://www.w3.org/TR/html5/dom.html#index-aria-group">group</a> role (default - <a href="http://www.w3.org/TR/html5/dom.html#aria-usage-note"><em>do not set</em></a>)</dd>
<dt>Allowed <a href="http://www.w3.org/TR/html5/dom.html#state-and-property-attributes">ARIA state and property attributes</a>:</dt>
<dd><a href="http://www.w3.org/TR/html5/dom.html#index-aria-global">Global ARIA attributes</a>.<br>
Any ARIA attributes applicable to the allowed roles.</dd>
<dt><a href="http://www.w3.org/TR/html5/dom.html#element-dfn-dom">DOM interface:</a></dt>
<dd>Uses <a href="http://www.w3.org/TR/html5/dom.html#htmlelement">HTMLElement</a> ??</dd>
</dl>
<p>A <code>panel</code> element <a href="http://www.w3.org/TR/html5/dom.html#represents">represents</a> a chunk of content with a header that includes a visible title (<a href="l#the-paneltitle-element"><code>paneltitle</code></a> element). A <code>panel</code> element may be used on its own, or with other <code>panel</code> elements as part of a collection (<a href="#the-panelset-element"><code>panelset</code></a> element).</p>
<p class="issue">
<a href="https://github.com/bkardell/common-panel/issues/16">Github issue 16</a><br>
It isn't presently possible to imperitively create a panel element.</p>
<p class="issue">
<a href="https://github.com/bkardell/common-panel/issues/9">Github issue 9</a><br>
Should it be possible to script a panel element to become either removable or expandable?</p>
<p class="issue">
<a href="https://github.com/bkardell/common-panel/issues/32">Github issue 32</a><br>
Is panel-title a required child of panel element?
</p>
<p class="issue">
<a href="https://github.com/bkardell/common-panel/issues/33">Github issue 33</a><br>
why not re-use open attribute instead of expandable?
</p>
</section>
<section>
<h2>The paneltitle element</h2>
<dl>
<dt><a href="http://www.w3.org/TR/html5/dom.html#element-dfn-categories">Categories</a>:</dt>
<dd>
<!--
If the element has the removable or expandable attributes: Palpable content. ??-->
</dd>
<dd>None.</dd>
<dt><a href="http://www.w3.org/TR/html5/dom.html#element-dfn-contexts">Contexts in which this element can be used</a>:</dt>
<dd>As the first or last child of a <a href="#the-panel-element">panel</a> element.</dd>
<dt><a href="http://www.w3.org/TR/html5/dom.html#element-dfn-content-model">Content model</a>:</dt>
<dd><a href="http://www.w3.org/TR/html5/dom.html#flow-content-1">Flow content</a>.</dd>
<dt><a data-anolis-xref="element-dfn-attributes" href="http://www.w3.org/TR/html5/dom.html#element-dfn-attributes">Content attributes</a>:</dt>
<dd><a href="http://www.w3.org/TR/html5/dom.html#global-attributes">Global attributes</a>.
</dd>
<dt><a data-anolis-xref="element-dfn-tag-omission" href="http://www.w3.org/TR/html5/dom.html#element-dfn-tag-omission">Tag omission in text/html</a>:</dt>
<dd>Neither tag is omissable.</dd>
<dt>Allowed <a href="http://www.w3.org/TR/html5/dom.html#aria-role-attribute">ARIA role attribute</a> values:</dt>
<dd><a href="http://www.w3.org/TR/html5/dom.html#index-aria-group">group</a> role (default - <a href="http://www.w3.org/TR/html5/dom.html#aria-usage-note"><em>do not set</em></a>) ??</dd>
<dt>Allowed <a href="http://www.w3.org/TR/html5/dom.html#state-and-property-attributes">ARIA state and property attributes</a>:</dt>
<dd><a href="http://www.w3.org/TR/html5/dom.html#index-aria-global">Global ARIA attributes</a>.<br>
Any ARIA attributes applicable to the allowed roles.</dd>
<dt><a href="http://www.w3.org/TR/html5/dom.html#element-dfn-dom">DOM interface:</a></dt>
<dd>Uses <a href="http://www.w3.org/TR/html5/dom.html#htmlelement">HTMLElement</a> ??</dd>
</dl>
<p>A <code>paneltitle</code> element represents the visible title of a panel (<a href="#the-panel-element"><code>panel</code></a> element). A <code>paneltitle</code> is the basic component of the panel header.</p>
<figure>
<figcaption><code>panel</code> element with <code>paneltitle</code> element</figcaption>
<img src="img/basic-panel.png" alt="panel element with paneltitle element">
<pre class="prettyprinted"><code>
<panel>
<paneltitle>Favourite books</paneltitle>
<p>Here is a list of my favourite books:</p>
<ul>
<li>Hitchhiker's Guide to the Galaxy</li>
<li>Pride and Prejudice</li>
<li>Green Eggs and Ham</li>
</ul>
</panel>
</code></pre>
</figure>
</section>
<section>
<h2>The panelset element</h2>
<dl>
<dt><a href="http://www.w3.org/TR/html5/dom.html#element-dfn-categories">Categories</a>:</dt>
<dd>
<!--
If the element has the removable or expandable attributes: Palpable content. ??-->
</dd>
<dd><a href="http://www.w3.org/TR/html5/dom.html#flow-content-1">Flow content</a>.</dd>
<dd> </dd>
<dt><a href="http://www.w3.org/TR/html5/dom.html#element-dfn-contexts">Contexts in which this element can be used</a>:</dt>
<dd>Where <a href="http://www.w3.org/TR/html5/dom.html#flow-content-1">flow content</a> is expected.</dd>
<dt><a href="http://www.w3.org/TR/html5/dom.html#element-dfn-content-model">Content model</a>:</dt>
<dd>One or more <a href="#the-panel-element">panel</a> elements.</dd>
<dt><a data-anolis-xref="element-dfn-attributes" href="http://www.w3.org/TR/html5/dom.html#element-dfn-attributes">Content attributes</a>:</dt>
<dd><a href="http://www.w3.org/TR/html5/dom.html#global-attributes">Global attributes</a>.
</dd>
<dt><a data-anolis-xref="element-dfn-tag-omission" href="http://www.w3.org/TR/html5/dom.html#element-dfn-tag-omission">Tag omission in text/html</a>:</dt>
<dd>Neither tag is omissable.</dd>
<dt>Allowed <a href="http://www.w3.org/TR/html5/dom.html#aria-role-attribute">ARIA role attribute</a> values:</dt>
<dd><a href="http://www.w3.org/TR/html5/dom.html#index-aria-group">group</a> role (default - <a href="http://www.w3.org/TR/html5/dom.html#aria-usage-note"><em>do not set</em></a>)</dd>
<dt>Allowed <a href="http://www.w3.org/TR/html5/dom.html#state-and-property-attributes">ARIA state and property attributes</a>:</dt>
<dd><a href="http://www.w3.org/TR/html5/dom.html#index-aria-global">Global ARIA attributes</a>.<br>
Any ARIA attributes applicable to the allowed roles.</dd>
<dt><a href="http://www.w3.org/TR/html5/dom.html#element-dfn-dom">DOM interface:</a></dt>
<dd>Uses <a href="http://www.w3.org/TR/html5/dom.html#htmlelement">HTMLElement</a> ??</dd>
<dt> </dt>
</dl>
<p>A <code>panelset</code> element represents a collection of panels (<code>panel</code> elements). A <code>panelset</code> may contain one or more <code>panel</code> elements.</p>
<p>The <code>panelset</code> element manages the selection of its child <code>panel</code> elements. In other words, when <code>panel</code> elements are children of a <code>panelset</code> element, they are automatically collapsible.</p>
<p>The first <code>panel</code> element within a <code>panelset</code> element should be expanded by default. Any subsequent claims of expansion trump the original claim.</p>
<figure>
<figcaption><code>panelset</code> element containing multiple <code>panel</code> elements</figcaption>
<pre class="prettyprinted"><code>
<panelset>
<panel>
<paneltitle>Tequila Chamucos</paneltitle>
<p>Chamucos reposado tequila is preserved in white oak barrels for...</p>
</panel>
<panel>
<paneltitle>Gran Patron Platinum</paneltitle>
<p>Gran Patron Platinum tequila is distilled three times...</p>
</panel>
<panel>
<paneltitle>Jose Cuervo 1800 Coleccion</paneltitle>
<p>Jose Cuervo 1800 is reputed to be the second most expensive tequila...</p>
</panel>
</panelset>
</code></pre>
</figure>
<p class="issue">
<a href="https://github.com/bkardell/common-panel/issues/5">Github issue 5</a><br>
Should the panelset element have selectedIndex?</p>
<p class="issue">
<a href="https://github.com/bkardell/common-panel/issues/25">Github issue 25</a><br>
If HTML authors are encouraged to follow this separation, it inevitably begs the question about how CSS authors can correctly manage which type of display the element takes on in which conditions. This is currently "up in the air". One approach, <a href="preferrential-display.html">prollyfilled here</a>, is to use an attribute.</p>
<p class="issue">
<a href="https://github.com/bkardell/common-panel/issues/19">Github issue 19</a><br>
Different visual metaphors have different selection (expansion) patterns. How can this be managed if the panelset element is predicated on a single selection model?</p>
<p class="issue">
<a href="https://github.com/bkardell/common-panel/issues/28">Github issue 28</a><br>
When an AT is enabled on a touch device, only basic events are fired (mouse events, and in some circumstances blur/focus events). Is this something to consider?</p>
</section>
<section>
<h2>The removable attribute</h2>
<p>The removable attribute is a <a href="http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#boolean-attribute">Boolean attribute</a> that indicates that a panel element can be removed from the user interface. When a panel element is dismissed from the user interface, it is removed from the DOM.</p>
<p>When the removable attribute is present, a mechanism to dismiss the panel is included in the panel element header.</p>
<figure>
<figcaption><code>panel</code> element with the <code>removable</code> attribute.</figcaption>
<img src="img/removable-panel.png" alt="panel element with removable attribute">
<pre class="prettyprinted"><code>
<panel removable>
<paneltitle>Reminder</paneltitle>
<p>
Today is the first day of the rest of your life.
</p>
</panel>
</code></pre>
</figure>
</section>
<section>
<h2>The expandable attribute</h2>
<p>The <code>expandable</code> attribute indicates the expanded or collapsed state of a <code>panel</code> element.</p>
<p>When the <code>expandable</code> attribute is present, the <code>paneltitle</code> element becomes a control that allows the <code>panel</code> element to be toggled between an expanded or collapsed state.</p>
<p>When the <code>expandable</code> attribute is present and has no value, the panel is in a collapsed state. If the expandable attribute is not present, or is set to <code>true</code>, the panel is in an expanded state.</p>
<figure>
<figcaption>panel element with <code>expandable</code> attribute (collapsed state).</figcaption>
<img src="img/collapsed-panel.png" alt="Panel element with expandable attribute (collapsed state)">
<pre class="prettyprinted"><code>
<panel expandable>
<paneltitle>Today's news</paneltitle>
<p>Something <a href="amazing.html">amazing</a> happened on the internet today...</p>
</panel>
</code></pre>
</figure>
<p class="issue">
<a href="https://github.com/bkardell/common-panel/issues/20">Github issue 20</a><br>
When you follow a link to a panel does it automatically expand?</p>
</section>
<section>
<h2>The prefereddisplay attribute</h2>
<p>The <code>prefereddisplay</code> attribute determines the initial visual representation of a <code>panelset</code> element containing one or more <code>panel</code> elements.</p>
</section>
<section>
<h2>DOM interfaces</h2>
<section>
<h3>The panel element DOM interface</h3>
<dl title='[Constructor] interface HTMLPanelElement : HTMLElement' class='idl'>
<dt>attribute HTMLElement headerElement</dt>
<dd>
Provides access to the header element for this panel
</dd>
<dt>attribute HTMLElement contentElement</dt>
<dd>
Provides access to the content element for this panel
</dd>
<dt>attribute HTMLElement tabProxyElement</dt>
<dd>
Provides access to the tab proxy element associated with this panel if it exists (if the panel is part of a panel set) or null
</dd>
<dt>attribute DOMString expansionState</dt>
<dd>
Sets the panel's expansion state to "opened" or "closed" and manages associated accessibility attributes on relevant elements. // TODO: Should this be const instead of DOMString?
</dd>
<dt>void toggleExpansionState()</dt>
<dd>
Inverts the current expansion state of the panel.
</dd>
</dl>
</section>
<section>
<h3>The panelset element DOM interface</h3>
<dl title='[Constructor] interface HTMLPanelSetElement : HTMLElement' class='idl'>
<dt>attribute HTMLPanelElement activePanelElement</dt>
<dd>
Get or set an element as active (currently selected) panel element in this panel set
</dd>
<dt>void selectNextTab()</dt>
<dd>
Selects/activates the next panel in this panel set in document order if any remain
</dd>
<dt>void selectPreviousTab()</dt>
<dd>
Selects/activates the previous panel in this panel set in document order if any previous exist
</dd>
</dl>
</section>
</section>
<section>
<h2>User interfaces</h2>
<p>This section is non-normative. [section is full of conformance requirements ??]</p>
<p>When the <code>panel</code> and <code>paneltitle</code> elements are used, the user agent should expose a user interface to the user. This user interface should include a visible title, and may optionally include an author provided icon or indicator of expandable state.</p>
<p>If the removable attribute is present, the user interface should include a control for dismissing the panel element from the user interface. The control should be focusable and have an accessible name.</p>
<p>If the expandable attribute is present, the paneltitle should become a control for toggling the panel between an expanded or collapsed state. The control must be focusable.</p>
<section>
<h3>Composite tree</h3>
<figure>
<figcaption>Elements and pseudo-elements of the composite tree of a panel element with a paneltitle element.</p>
<img src="img/dom-explained.png" alt="Elements and pseudo-elements of the composite tree of a panel element with a paneltitle element">
</figure>
<dl>
<dt>::--common-panel-header-box</dt>
<dd>Used for styling, it contains all the visual features of a panel header.</dd>
<dt>::--common-panel-header</dt>
<dd>When a panel element is used on its own, this has default styles and hooks. When a panel element is used as a child of a panelset element, this has special affordances.</dd>
<dt>::--common-panel-icon</dt>
<dd>Optional styling hook for an icon. Empty/blank/dimensionless by default, it can be used to display an icon via the CSS background:; property.<br>
Authors can also use the ::before pseudo-element to display a left-orientated indicator of the expandable state of the panel element.</dd>
<dt>::--common-panel-title</dt>
<dd>Author specified flow content which serves as the panel element's title.</dd>
<dt>::--common-panel-hook</dt>
<dd>Optional hook for a right-orientated indicator of the expandable state of the panel element.</dd>
<dt>::--common-panel-destroy</dt>
<dd>When the removable attribute is set, this displays a control for dismissing the panel element from the user interface. The control must be focusable and have an accessible name, otherwise it is hidden.</dd>
<dt>::--common-panel-content</dt>
<dd>Author provided content for the panel element.</dd>
</dl>
</section>
<p class="issue">
<a href="https://github.com/bkardell/common-panel/issues/27">Github issue 27</a><br>
Should we include recommended/suggested interaction models here?</p>
</section>
<section>
<h2>ARIA to accessibility API mapping guide</h2>
<p>This section is non-normative.</p>
<section>
<h3>ARIA roles</h3>
<table>
<caption>ARIA roles mapping guide</caption>
<tr>
<th>Element</th><th>ARIA role</th>
</tr>
<tr>
<td>panel</td><td>group</td>
</tr>
<tr>
<td>paneltitle</td><td>??</td>
</tr>
<tr>
<td>panelset</td><td>??</td>
</tr>
</table>
</section>
<section>
<h3>ARIA states and properties</h3>
<table>
<caption>ARIA states and properties mapping guide</caption>
<tr>
<th>Attribute</th><th>ARIA state/propertey</th>
</tr>
<tr>
<td>removable</td><td>??</td>
</tr>
<tr>
<td>expandable</td><td>??</td>
</tr>
</table>
</section>
</section>
</body>
</html>