This specification extension defines elements and attributes for constructing a panel or collection of panels based on a single interaction paradigm.
48 |
49 |
Using custom elements, a collection of functional prototypes is available. All DOM methods are under-scored to preserve forwards compatibility.
50 |
51 |
52 |
53 |
Work on this extension is being done on Github. Please share comments and feedback using the Github issue tracker.
54 |
55 |
56 |
57 |
Introduction
58 |
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.
59 |
60 |
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.
61 |
62 |
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.
63 |
64 |
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.
65 |
66 |
67 |
68 |
Conformance
69 |
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]].
70 |
71 |
72 |
Dependencies and Definitions
73 |
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]]
74 |
75 |
This document uses the terms accessible and accessibility in the sense of ensuring people with disabilities can use the Web.
76 |
77 |
78 |
79 |
80 |
Use cases and Requirements
81 |
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.
82 |
83 |
84 |
Use Cases for Panels and Panel Sets
85 |
86 |
87 |
Use cases for the tab set metaphor
88 |
89 |
Displaying semester timetables for the school year on a college intranet.
90 |
Displaying nutritional values, ingredients, allergy warnings etc. about a food product on a grocery store website.
91 |
Displaying configuration settings, statistics, performance data etc. about a software deployment pipeline on a continuous build server.
92 |
Displaying descriptions, details, floor plans etc. about a house for sale on a property website.
93 |
Displaying alternative representations of data (graphical and tabular) in an analytics web application.
94 |
95 |
96 |
97 |
98 |
Use cases for the accordion metaphor
99 |
100 |
Displaying bulletin board messages on an office intranet.
101 |
Displaying an A to Z of glossary definitions on a medical research website.
102 |
Displaying answers to frequently asked questions for newbies on a gamer’s forum.
103 |
104 |
105 |
106 |
107 |
Use cases for the carousel metaphor
108 |
109 |
Displaying bulletin board messages on an office intranet.
110 |
Displaying attractive pictures of a spa resort on a vacation brochure website.
111 |
Advertising key features of a prototype flying car on the company’s corporate website.
112 |
113 |
114 |
115 |
116 |
Use cases for the coverflow metaphor
117 |
118 |
Flipping through an album of sky dive photos on a photo sharing website.
119 |
Browsing a portfolio of watercolours on an artist’s brochure website.
120 |
121 |
122 |
123 |
124 |
Use cases for the deck metaphor
125 |
126 |
Displaying a slide deck from a conference talk.
127 |
Storing contact information in a rolodex application.
128 |
Viewing pictures of a spa resort's vacation brochure website on a small device.
129 |
Flipping through an album on a photo sharing website.
130 |
Browsing a portfolio of watercolours on an artist’s brochure website.
131 |
Advertising key features of a prototype flying car on the company’s corporate website, for display on a small device.
132 |
Presenting a series of comic panel mock-ups, each representing a significant moment in the overall narrative.
133 |
134 |
135 |
136 |
137 |
138 |
Requirements for Panels and Panel Sets
139 |
140 |
Consistent
141 |
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.
142 |
Identifiable
143 |
It must be possible for a user agent to identify the components of a panel, and the component panels within a set.
144 |
Stylable
145 |
It must be possible to style a panel or set of panels to provide different visual affordances.
Global attributes.
165 | removable - hints that the panel can be removed from the interface.
166 | expandable - indicates the expanded state of the panel.
A panel element represents a chunk of content with a header that includes a visible title (paneltitle element). A panel element may be used on its own, or with other panel elements as part of a collection (panelset element).
179 |
180 |
181 | Github issue 16
182 | It isn't presently possible to imperitively create a panel element.
183 |
184 |
185 | Github issue 9
186 | Should it be possible to script a panel element to become either removable or expandable?
187 |
188 |
189 | Github issue 32
190 | Is panel-title a required child of panel element?
191 |
192 |
193 | Github issue 33
194 | why not re-use open attribute instead of expandable?
195 |
A panelset element represents a collection of panels (panel elements). A panelset may contain one or more panel elements.
274 |
275 |
The panelset element manages the selection of its child panel elements. In other words, when panel elements are children of a panelset element, they are automatically collapsible.
276 |
277 |
The first panel element within a panelset element should be expanded by default. Any subsequent claims of expansion trump the original claim.
278 |
279 |
280 | panelset element containing multiple panel elements
281 |
282 | <panelset>
283 | <panel>
284 | <paneltitle>Tequila Chamucos</paneltitle>
285 | <p>Chamucos reposado tequila is preserved in white oak barrels for...</p>
286 | </panel>
287 |
288 | <panel>
289 | <paneltitle>Gran Patron Platinum</paneltitle>
290 | <p>Gran Patron Platinum tequila is distilled three times...</p>
291 | </panel>
292 |
293 | <panel>
294 | <paneltitle>Jose Cuervo 1800 Coleccion</paneltitle>
295 | <p>Jose Cuervo 1800 is reputed to be the second most expensive tequila...</p>
296 | </panel>
297 | </panelset>
298 |
299 |
300 |
301 |
302 | Github issue 5
303 | Should the panelset element have selectedIndex?
304 |
305 |
306 | Github issue 25
307 | 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, prollyfilled here, is to use an attribute.
308 |
309 |
310 | Github issue 19
311 | Different visual metaphors have different selection (expansion) patterns. How can this be managed if the panelset element is predicated on a single selection model?
312 |
313 |
314 | Github issue 28
315 | 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?
316 |
317 |
318 |
319 |
The removable attribute
320 |
321 |
The removable attribute is a Boolean attribute 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.
322 |
323 |
When the removable attribute is present, a mechanism to dismiss the panel is included in the panel element header.
324 |
325 |
326 | panel element with the removable attribute.
327 |
328 |
329 | <panel removable>
330 | <paneltitle>Reminder</paneltitle>
331 | <p>
332 | Today is the first day of the rest of your life.
333 | </p>
334 | </panel>
335 |
336 |
337 |
338 |
339 |
340 |
341 |
The expandable attribute
342 |
343 |
The expandable attribute indicates the expanded or collapsed state of a panel element.
344 |
345 |
When the expandable attribute is present, the paneltitle element becomes a control that allows the panel element to be toggled between an expanded or collapsed state.
346 |
347 |
When the expandable 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 true, the panel is in an expanded state.
348 |
349 |
350 | panel element with expandable attribute (collapsed state).
351 |
352 |
353 |
354 | <panel expandable>
355 | <paneltitle>Today's news</paneltitle>
356 | <p>Something <a href="amazing.html">amazing</a> happened on the internet today...</p>
357 | </panel>
358 |
359 |
360 |
361 |
362 | Github issue 20
363 | When you follow a link to a panel does it automatically expand?
364 |
365 |
366 |
367 |
The prefereddisplay attribute
368 |
369 |
The prefereddisplay attribute determines the initial visual representation of a panelset element containing one or more panel elements.
370 |
371 |
372 |
373 |
DOM interfaces
374 |
375 |
376 |
The panel element DOM interface
377 |
378 |
attribute HTMLElement headerElement
379 |
380 | Provides access to the header element for this panel
381 |
382 |
attribute HTMLElement contentElement
383 |
384 | Provides access to the content element for this panel
385 |
386 |
attribute HTMLElement tabProxyElement
387 |
388 | 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
389 |
390 |
attribute DOMString expansionState
391 |
392 | 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?
393 |
394 |
void toggleExpansionState()
395 |
396 | Inverts the current expansion state of the panel.
397 |
398 |
399 |
400 |
401 |
402 |
The panelset element DOM interface
403 |
404 |
attribute HTMLPanelElement activePanelElement
405 |
406 | Get or set an element as active (currently selected) panel element in this panel set
407 |
408 |
void selectNextTab()
409 |
410 | Selects/activates the next panel in this panel set in document order if any remain
411 |
412 |
void selectPreviousTab()
413 |
414 | Selects/activates the previous panel in this panel set in document order if any previous exist
415 |
416 |
417 |
418 |
419 |
420 |
421 |
User interfaces
422 |
This section is non-normative. [section is full of conformance requirements ??]
423 |
424 |
When the panel and paneltitle 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.
425 |
426 |
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.
427 |
428 |
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.
429 |
430 |
431 |
Composite tree
432 |
433 |
434 | Elements and pseudo-elements of the composite tree of a panel element with a paneltitle element.
435 |
436 |
437 |
438 |
439 |
::--common-panel-header-box
440 |
Used for styling, it contains all the visual features of a panel header.
441 |
::--common-panel-header
442 |
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.
443 |
::--common-panel-icon
444 |
Optional styling hook for an icon. Empty/blank/dimensionless by default, it can be used to display an icon via the CSS background:; property.
445 | Authors can also use the ::before pseudo-element to display a left-orientated indicator of the expandable state of the panel element.
446 |
::--common-panel-title
447 |
Author specified flow content which serves as the panel element's title.
448 |
::--common-panel-hook
449 |
Optional hook for a right-orientated indicator of the expandable state of the panel element.
450 |
::--common-panel-destroy
451 |
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.
452 |
::--common-panel-content
453 |
Author provided content for the panel element.
454 |
455 |
456 |
457 |
458 | Github issue 27
459 | Should we include recommended/suggested interaction models here?
31 | This document decribes a proposal for a CSS mechanism and DOM APIs to
32 | aid in increasing the level of separation between visual and non-visual
33 | structures with runtime reuse. It is useful for Custom Elements, introduces potentially new
34 | explanations for how existing elements in the platform work.
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
Introduction
43 |
44 | When editing a document, an author attempts to mark it up semantically and control
45 | a separation of visual aspects through CSS. This allows various the user-agent
46 | and tools to use the same semantic data to provide any number of affordances
47 | for accessibility, navigation, styling and interaction. HTML elements are generally
48 | carefully constructed to define what they do that makes them unique,
49 | rather than very specifically how they look. This separation leaves room for
50 | certain experimentation and variance that is healthy for the long term adaptability
51 | of the platform. For example, because a
52 | <select> element doesn't strictly define all aspects of the
53 | visual properties, it was possible for mobile phones to provide a better user
54 | experience where visual real estate is very limited and click areas are shrunk.
55 |
56 |
57 | Similarly, an author may use various types on the <input> element,
58 | which, if undefined still defaults to type="text" and allows UAs like mobile
59 | devices provide native controls. In this aspect, the type attribute in
60 | some ways acts more like a hint than a requirement. This is, of course, not entirely
61 | true (input type is kind of a debacle actually, APIs actually vary making it improbable to
62 | use the intended 'text only' fallback without much pain) but it is a laudbile
63 | aim and provides a conceptual background for some of the rationale for this proposal.
64 |
65 |
66 |
These examples which already exist in the platform are good, but they are also potentially
67 | limited and somewhat magical. They can have impacts on more than visualization as well, to the
68 | end effect that they make it difficult for authors to deal with or innovate within.
69 |
70 |
Preferential Display is a more generalized and more capable extension of the type idea,
71 | allowing an author to specify preference hints of the type "when the media is screen and max-width is 767px, I would
72 | like to display elements #foo, #bar and #bat as tabsets if possible". At some low level it simply allows the user to manage
73 | a special attribute based on a media query from outside the markup and it desugars into existing platform code
74 | in JavaScript something like this:
75 |
/* This is basically a possible approach today */
76 | matchMedia("screen and (max-width: 767px)").addListener(function(evt) {
77 | var element = Array.prototype.slice.call(document.querySelectorAll("#foo, #bar, #bat"));
78 | elements.forEach(function (el) {
79 | if (evt.matches) {
80 | el.setAttribute("preferrential-display", "tabset");
81 | } else {
82 | el.removeAttribute("preferrential-display");
83 | }
84 | });
85 | })
86 |
87 |
88 |
89 |
90 | However, this would be a bit more than you'd like to manage in terms of boilerplate, and order should probably follow selector
91 | specificity if they have a generic means to add these, and so we can introduce a new API to manage it - something like this:
92 |
101 | This is considerably more conveneint, but ideally you'd be able to express this in CSS itself in a way that is familliar ala something like:
102 |
For example,
109 | it might be possible to offer a Preferrential Display for <select-timezone> elements
110 | which provides a map-like interface similar to those used for choosing timezones in a desktop interface,
111 | but ultimately provides a common <select> view on the same DOM, or a <common-panel-set>
112 | which can be displayed as any number of visualizations (tabset, accordion, deck or carousel, for example)
113 | but has identical structures and accessibility concerns. It is useful then for an author to be able to
114 | state "under these media conditions I prefer a tabset view if you have it".
115 |
116 |
117 |
The design of this proposal is intended to be such that it introduces minimal new concepts, but offers
118 | new capabilities which answer some existing questions, highlight the importance of this separation,
119 | and provide new opportunities for experiementation.
120 |
121 |
122 |
123 |
Aims and Requirements
124 |
125 |
It should be possible to create an element which might have many different visual variations decided by CSS, solve issues like aria once.
126 |
It should be possible for an author of HTML to provide no additional information and get a default view that retains the meaning of that thing
127 |
It should be possible for an author of HTML to temporarily provide inline information (we do this with style attribute, for example,
128 | or by manually attaching a class which would otherwise be attached dynamically) to verify that what they have renders as expected.
129 |
It should be easy for a designer to indicate different visuals in a "whole" way which doesn't require JavaScript authorship. This is a different role in many organizations. That is, it should be possible simply say "this element should opt to this display if possible under these media query conditions."
130 |
It should not inflate the payload of the CSS dramatically (see point above - preprocessors offer some author time facilities for this, but not runtime - they are copy/paste use oriented)
131 |
It should ideally not require an additional HTTP requests or inlining in the HTML.
132 |
It should not introduce wholly new semantics and complicated concepts for authors - minimal magic explainable by things in the platform today.
133 |
134 | To these points, what I am proposing is a single, display oriented attribute which is maintained via CSS which allows CSS to express informtation that it can select upon in normal fashion and allow experimentation with the various pieces of the platform that are already in place.
135 |
136 |
137 |
Why not...
138 |
139 |
Just use CSS as it is today? - The authoring/maintenance of this approach is very painful. If you took something like the above examples, you'd be styling individual elements and pseudo-elements of instances without any hint in the CSS itself (aside from comments perhaps) about what it was styling (ie, I want to display '#foo' as a tabset under these conditions). The CSS winds up being excessively verbose (see Vanilla CSS example below) and cannot be re-used in other stylesheets.. In other words, if you define an 'accordion' it's just a bunch of rules which mean accordion, there is no way from another stylesheet to say 'use those rules', you have no choice but to repeat them.
140 |
Just use CSS preprocessor? - The authoring/maintenance of this approach is way better (see preprocessor example below), but it's authoring reuse, so the verbosity and difficult to understand still exists. If it takes 100 lines of CSS to define all of the aspects of a 'tabset' and 100 lines to define all of the aspects of an 'accordion', then you have to define when to use them with those lines in a Media Query. If you put your entire applications CSS into a single sheet which it can statically analyze, you'd have the best possible outcome with this approach, but it just isn't how a lot of things work, so you wind up with a lot of copies of the same rules and no runtime reuse...
141 |
Wait for CSS aliases, wouldn't they solve this? - They would make the problem better, for sure. However, it requires you to define all of the aliases at once and then to style individual elements and pseudo-elements with aliases, so many of the same sorts of runtime problems above come into play. The author's mental model is more like 'now it should be type "x"' and then just use CSS as per normal and gain all of the normal benefits of CSS and reuse, so it's better if we can reflect that.
142 |
Just set a type attribute? - Because a type is static, but if what we are giving is a rendering hint
143 | and you are aiming for definiing what it -is- and then styling it, can be variable.
144 |
Manage a type attribute with DOM APIs in JavaScript? - Because styling information about visual presentation
145 | really belongs in CSS. There should be an explanation of the system in terms of these primitives, but they should
146 | be aiming to describe a concept in the right part of the system, JS and CSS are not exclusive domains and the API
147 | should be defined by a CSS WG proposal who is thinking about the larger problem.
148 |
149 |
150 |
151 |
Vanilla CSS example without Preferred Display
152 |
153 |
154 |
155 |
Preprocessor authoring example without Preferred Display
156 |
157 |
158 |
159 |
160 |
161 |
Preferred Display
162 |
163 |
164 | An element's Preferential Display is determined by whether or not a Media Query has activated it.
165 | If the preferential display has not been activated by a Media Query, setting it has no effect. Thus:
166 |
167 |
/* this has no effect as the rule's preferrential-display is not activated by a MediaQuery */
168 | .foo {
169 | preferred-display: map;
170 | }
171 |
172 | /* this rule defines a preferrential-display which can be activated by a MediaQuery */
173 | @media screen and (min-width: 767px) {
174 | #foo {
175 | preferred-display: tabset;
176 | }
177 | }
178 |
179 |
180 | Upon activation, the media query relays the preferred display value to the preferred-display attribute in the DOM. This attribute is
181 | settable in markup, like type, but once set is read-only except via the CSS provided interface. This design
182 | allows that only a media query can cause CSS to change the DOM and simply prevents cycles which would normally prevent this sort of thing. Its presence in the DOM allows it to be
183 | easily used in normal CSS and JavaScript to do simple adaptations. MediaQueryList and listners can be used to explain how this works
184 | fairly well today.
185 |
186 |
187 |
188 |
189 |
--------------------------------------------------------------------------------
/prototype/angular-panels.js:
--------------------------------------------------------------------------------
1 | (function(angular) {
2 | "use strict";
3 | var lastUid = 0,
4 | nextUid = function() {
5 | return "-cp-" + (++lastUid);
6 | },
7 | ensureId = function(el) {
8 | el.id = el.id || nextUid();
9 | },
10 | find = function(scope, query) {
11 | ensureId(scope);
12 | return scope.querySelector("#" + scope.id + query);
13 | },
14 | findAll = function(scope, query) {
15 | ensureId(scope);
16 | return Array.prototype.slice.call(scope.querySelectorAll("#" + scope.id + query));
17 | },
18 | manageBooleanAttr = function(el, attr, condition) {
19 | if (condition) {
20 | el.setAttribute(attr, "true");
21 | } else if (el.hasAttribute(attr)) {
22 | el.removeAttribute(attr);
23 | }
24 | },
25 | FOCUS_DELAY = 50,
26 | templates = {
27 | tabset: "{{tabs}}",
28 | tab: "
22 | This is a simple test of a custom element to see if it works in Opera mini and, if not, figure out why...
23 | The box below will say either "IT WORKED!" or "IT DIDN'T WORK :( Why?!".
24 |
25 | IT DIDN'T WORK :( Why?!
26 |
27 |
28 |
This example demonstrates the use of a preferred-display attribute set to tabset on a common-panel-set element with content identical to the previous example. Only the visual representation should change.
33 | <common-panel-set preferred-display="tabset">
34 | <common-panel>
35 | <common-panel-title>Local</common-panel-title>
36 | <p>This would contain content about local news stories.</p>
37 | </common-panel>
38 |
39 | <common-panel>
40 | <common-panel-title>Entertainment</common-panel-title>
41 | <p>This would contain content about entertainment news stories.</p>
42 | </common-panel>
43 |
44 | <common-panel>
45 | <common-panel-title>Sports</common-panel-title>
46 | <p>This would contain content about sports stories.</p>
47 | </common-panel>
48 | </common-panel-set>
49 |
50 |
Demo
51 |
Below is a running demo of the above code snippet using the prototype. It contains a common-panel-set in which
52 | none of the common-panel children specify an expansion state of opened, thus, the first one should be.
53 | The arrow keys should allow the user to navigate panels which open automatically, adding their content's ability to receive focus.
54 | TAB should move the focus from title to open content and then to the next focusable thing after the common-panel-set.
55 | It is functionally identical to the previous example, only the visual representation should change.
56 |
57 |
58 | Local
59 |
This would contain content about local news stories.
60 |
61 |
62 |
63 | Entertainment
64 |
This would contain content about entertainment news stories.
This page contains descriptions, examples and instances of prototype implemention (prollyfill) of
49 | the Panels and Panel Sets Draft. It can be used
50 | for illustration and education, as well as serve as a host for tests for manual or automated
51 | checking of conformance for the prollyfill itself.
52 |
53 |
54 |
Panels
55 |
56 |
Basic Panel
57 |
This example demonstrates use of a simple, basic common-panel.
58 | <common-panel>
59 | <common-panel-title>My favorite books</common-panel-title>
60 | <p>Here are a list of my favorite books:
61 | <ol>
62 | <li>Hitchhiker's Guide to the Galaxy</li>
63 | <li>Pride and Prejudice</li>
64 | <li>Green Eggs and Ham</li>
65 | </ol>
66 | </p>
67 | </common-panel>
68 |
69 |
70 |
Demo
71 |
Below is a running demo of the above code snippet using the prototype. It contains a common-panel with
72 | a title "My favorite books" and paragraph with a list of three of one of the author's favorites. A user
73 | should be able to switch from the title to content by way of the TAB key.
74 |
75 | My favorite books
76 |
Here are a list of my favorite books:
77 |
78 |
Hitchhiker's Guide to the Galaxy
79 |
Pride and Prejudice
80 |
Green Eggs and Ham
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
Removable Panel
89 |
This example demonstrates use of a common-panel with the is-removable attribute set.
90 | <common-panel is-removable>
91 | <common-panel-title>Reminder</common-panel-title>
92 | <p>You should try using this with assistive technology and, if you are sighted, close your eyes.</p>
93 | </common-panel>
94 |
95 |
96 |
Demo
97 |
Below is a running demo of the above code snippet using the prototype. It contains a common-panel with
98 | a title "Reminder" and, as part of the title, "X" button which can be used to remove it. It should also contain content
99 | (the reminder) which is a one sentence paragraph about testing. Users should be able to TAB focus onto the title
100 | content, TAB again to the close button. Pressing spacebar should cause this panel to be removed from the
101 | document in its entirety. If not removed, TAB again should switch focus to the content.
102 |
103 |
104 | Reminder
105 |
You should try using this with assistive technology and, if you are sighted, close your eyes.
106 |
107 |
108 |
109 |
110 |
111 |
Expandable/Collapsable Panel
112 |
This example demonstrates the use of a common-panel with the a specified expansion-state attribute
113 | set to "opened".
114 | <common-panel expansion-state="opened">
115 | <common-panel-title>Today's News</common-panel-title>
116 | <p>In today's news, accessibility matters. Accessibility first design might actually help you realize some things that improve your design for visually oriented users as well, for example, this whole proposal!</p>
117 | </common-panel>
118 |
119 |
Demo
120 |
Below is a running demo of the above code snippet using the prototype. It contains a common-panel with the
121 | an expansion state of opened. The user should be able to TAB focus onto the title content and, when the panel is
122 | opened (as it is by default here) pressing the TAB should move focus to the content: a paragraph about acessibilty first design. If the user presses the spacebar on the title, as it is collapsable, this should cause the content to become hidden and removed from
123 | TAB navigation until it is re-opened.
124 |
125 | Today's News
126 |
In today's news, accessibility matters. Accessibility first design might actually help you realize some things that improve your
127 | design for visually oriented users as well, for example, this whole proposal!
128 |
129 |
130 |
131 |
132 |
133 |
134 |
Panel Sets
135 |
136 |
Simple Panel Set
137 |
This exaple demonstrates the use of common-panel-set surrounding a collection of simple, vanilla panels about
138 | themeatic groups of news stories. The panel set makes them all inherently "expandable" and manages their simple selection.
139 | As none claims to be expanded, the first one is expanded.
140 | <common-panel-set>
141 | <common-panel>
142 | <common-panel-title>Local</common-panel-title>
143 | <p>This would contain content about local news stories.</p>
144 | </common-panel>
145 |
146 | <common-panel>
147 | <common-panel-title>Entertainment</common-panel-title>
148 | <p>This would contain content about entertainment news stories.</p>
149 | </common-panel>
150 |
151 | <common-panel>
152 | <common-panel-title>Sports</common-panel-title>
153 | <p>This would contain content about sports stories.</p>
154 | </common-panel>
155 | </common-panel-set>
156 |
157 |
Demo
158 |
Below is a running demo of the above code snippet using the prototype. It contains a common-panel-set in which
159 | none of the common-panel children specify an expansion state of opened, thus, the first one should be.
160 | The arrow keys should allow the user to navigate panels which open automatically, adding their content's ability to receive focus.
161 | TAB should move the focus from title to open content and then to the next focusable thing after the common-panel-set.
162 |
163 |
164 | Local
165 |
This would contain content about local news stories.
166 |
167 |
168 |
169 | Entertainment
170 |
This would contain content about entertainment news stories.
171 |
172 |
173 |
174 | Sports
175 |
This would contain content about sports stories.
176 |
177 |
178 |
179 |
180 |
181 |
182 |
Panel Set (explicit expansion)
183 |
This exaple demonstrates the use of common-panel-set surrounding a collection of panels about
184 | themeatic groups of news stories. As common-panel children claim their expansion state to be "opened",
185 | each is processed in document order and the common-panel-set closes others. This means, in a manner
186 | similar to the select element, the last one in document order to make the claim ultimately "wins".
187 | <common-panel-set>
188 | <common-panel >
189 | <common-panel-title>Local</common-panel-title>
190 | <p>This would contain content about local news stories.</p>
191 | </common-panel>
192 |
193 | <common-panel expansion-state="opened">
194 | <common-panel-title>Entertainment</common-panel-title>
195 | <p>This would contain content about entertainment news stories.</p>
196 | </common-panel>
197 |
198 | <common-panel expansion-state="opened"
199 | <common-panel-title>Sports</common-panel-title>
200 | <p>This would contain content about sports stories.</p>
201 | </common-panel>
202 | </common-panel-set>
203 |
204 |
Demo
205 |
Below is a running demo of the above code snippet using the prototype. It contains a common-panel-set in which
206 | two of the common-panel children specify an expansion state of opened, thus, the last one should be.
207 | The arrow keys should allow the user to navigate panels which open automatically, adding their content's ability to receive focus.
208 | TAB should move the focus from title to open content and then to the next focusable thing after the common-panel-set.
209 | In all ways beyond which panel is initially expanded, this should be functionally identical to the previous example.
210 |
211 |
212 | Local
213 |
This would contain content about local news stories.
214 |
215 |
216 |
217 | Entertainment
218 |
This would contain content about entertainment news stories.
219 |
220 |
221 |
222 | Sports
223 |
This would contain content about sports stories.
224 |
225 |
226 |
227 |
228 |
229 |
230 |
Panel Set's preferred-display Attribute (tabset)
231 |
This example demonstrates the use of a preferred-display attribute set to tabset on a common-panel-set element with content identical to the previous example. Only the visual representation should change.
232 | <common-panel-set preferred-display="tabset">
233 | <common-panel>
234 | <common-panel-title>Local</common-panel-title>
235 | <p>This would contain content about local news stories.</p>
236 | </common-panel>
237 |
238 | <common-panel>
239 | <common-panel-title>Entertainment</common-panel-title>
240 | <p>This would contain content about entertainment news stories.</p>
241 | </common-panel>
242 |
243 | <common-panel>
244 | <common-panel-title>Sports</common-panel-title>
245 | <p>This would contain content about sports stories.</p>
246 | </common-panel>
247 | </common-panel-set>
248 |
249 |
Demo
250 |
Below is a running demo of the above code snippet using the prototype. It contains a common-panel-set in which
251 | none of the common-panel children specify an expansion state of opened, thus, the first one should be.
252 | The arrow keys should allow the user to navigate panels which open automatically, adding their content's ability to receive focus.
253 | TAB should move the focus from title to open content and then to the next focusable thing after the common-panel-set.
254 | It is functionally identical to the previous example, only the visual representation should change.
255 |
256 |
257 | Local
258 |
This would contain content about local news stories.
259 |
260 |
261 |
262 | Entertainment
263 |
This would contain content about entertainment news stories.
This example demonstrates the use of a preferred-display attribute set to carousel on a common-panel-set element with content identical to the previous example. Only the visual representation should change.
278 | <common-panel-set preferred-display="carousel">
279 | <common-panel>
280 | <common-panel-title>Local</common-panel-title>
281 | <p>This would contain content about local news stories.</p>
282 | </common-panel>
283 |
284 | <common-panel">
285 | <common-panel-title>Entertainment</common-panel-title>
286 | <p>This would contain content about entertainment news stories.</p>
287 | </common-panel>
288 |
289 | <common-panel>
290 | <common-panel-title>Sports</common-panel-title>
291 | <p>This would contain content about sports stories.</p>
292 | </common-panel>
293 | </common-panel-set>
294 |
295 |
Demo
296 |
Below is a running demo of the above code snippet using the prototype. It contains a common-panel-set in which
297 | none of the common-panel children specify an expansion state of opened, thus, the first one should be.
298 | The arrow keys should allow the user to navigate panels which open automatically, adding their content's ability to receive focus.
299 | TAB should move the focus from title to open content and then to the next focusable thing after the common-panel-set.
300 | It is functionally identical to the previous example, only the visual representation should change.
301 |
302 |
303 | Local
304 |
This would contain content about local news stories.
305 |
306 |
307 |
308 | Entertainment
309 |
This would contain content about entertainment news stories.
This example demonstrates the use of a preferred-display attribute set to accordion on a common-panel-set element with content identical to the previous example. Only the visual representation should change.
323 | <common-panel-set preferred-display="accordion">
324 | <common-panel>
325 | <common-panel-title>Local</common-panel-title>
326 | <p>This would contain content about local news stories.</p>
327 | </common-panel>
328 |
329 | <common-panel>
330 | <common-panel-title>Entertainment</common-panel-title>
331 | <p>This would contain content about entertainment news stories.</p>
332 | </common-panel>
333 |
334 | <common-panel>
335 | <common-panel-title>Sports</common-panel-title>
336 | <p>This would contain content about sports stories.</p>
337 | </common-panel>
338 | </common-panel-set>
339 |
340 |
Demo
341 |
Below is a running demo of the above code snippet using the prototype. It contains a common-panel-set in which
342 | none of the common-panel children specify an expansion state of opened, thus, the first one should be.
343 | The arrow keys should allow the user to navigate panels which open automatically, adding their content's ability to receive focus.
344 | TAB should move the focus from title to open content and then to the next focusable thing after the common-panel-set.
345 | It is functionally identical to the previous example, only the visual representation should change.
346 |
347 |
348 | Local
349 |
This would contain content about local news stories.
350 |
351 |
352 |
353 | Entertainment
354 |
This would contain content about entertainment news stories.
This example demonstrates the use of a preferred-display attribute set to accordion on a common-panel-set element with content identical to the previous example. Only the visual representation should change.
368 | <common-panel-set preferred-display="accordion">
369 | <common-panel>
370 | <common-panel-title>Local</common-panel-title>
371 | <p>This would contain content about local news stories.</p>
372 | </common-panel>
373 |
374 | <common-panel>
375 | <common-panel-title>Entertainment</common-panel-title>
376 | <p>This would contain content about entertainment news stories.</p>
377 | </common-panel>
378 |
379 | <common-panel>
380 | <common-panel-title>Sports</common-panel-title>
381 | <p>This would contain content about sports stories.</p>
382 | </common-panel>
383 | </common-panel-set>
384 |
385 |
Demo
386 |
Below is a running demo of the above code snippet using the prototype. It contains a common-panel-set in which
387 | none of the common-panel children specify an expansion state of opened, thus, the first one should be.
388 | The arrow keys should allow the user to navigate panels which open automatically, adding their content's ability to receive focus.
389 | TAB should move the focus from title to open content and then to the next focusable thing after the common-panel-set.
390 | It is functionally identical to the previous example, only the visual representation should change.
391 |
392 |
393 | Local
394 |
This would contain content about local news stories.
395 |
396 |
397 |
398 | Entertainment
399 |
This would contain content about entertainment news stories.
400 |
401 |
402 |
403 | Sports
404 |
This would contain content about sports stories.
405 |
406 |
407 |
408 |
409 |
410 |
411 |
412 |
Controlling preferred-display via Media Queries
413 |
This example demonstrates the use of media queries to control preferred-display attribute to make it tabset on wide screen, but accordion on all others. The common-panel-set element with content identical to the previous example. Only the visual representation should change.
Below is a running demo of the above code snippet using the prototype. It contains a common-panel-set in which
448 | none of the common-panel children specify an expansion state of opened, thus, the first one should be.
449 | The arrow keys should allow the user to navigate panels which open automatically, adding their content's ability to receive focus.
450 | TAB should move the focus from title to open content and then to the next focusable thing after the common-panel-set.
451 | Note that as its representation changes, neither the panel selection, nor the tab-focus should be lost.
452 | It is functionally identical to the previous example, only the visual representation should change.
453 |
454 |
455 | Local
456 |
This would contain content about local news stories.
457 |
458 |
459 |
460 | Entertainment
461 |
This would contain content about entertainment news stories.
27 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/test/assertions.js:
--------------------------------------------------------------------------------
1 | QUnit.config.autostart = false;
2 |
3 | var verifyPanel = function (assert, el, opts) {
4 | var children = el.children,
5 | headerBox,
6 | contentBox,
7 | header,
8 | opts = opts || {},
9 | expectedPanelRole = (opts.isInSet) ? "presentation" : "group";
10 |
11 | assert.equal(
12 | el.getAttribute("role"),
13 | expectedPanelRole,
14 | "We expect role of a basic panel to be '" + expectedPanelRole + "'"
15 | );
16 |
17 | assert.equal(
18 | children.length,
19 | 2,
20 | "there should be two child elements generated"
21 | );
22 |
23 | headerBox = children[0];
24 | contentBox = children[1];
25 |
26 | assert.ok(
27 | headerBox.classList.contains("common-panel-header-box"),
28 | "the first child should be common-panel-header-box"
29 | );
30 |
31 | assert.equal(
32 | headerBox.children.length,
33 | 1,
34 | "the headerbox should contain 1 child, this allows for :before and :after styling"
35 | );
36 |
37 | header = headerBox.firstElementChild;
38 |
39 | assert.ok(
40 | header.hasAttribute("tabindex"),
41 | "the header should have a tab stop"
42 | );
43 |
44 | assert.equal(
45 | headerBox.getAttribute("role"),
46 | "presentation",
47 | "the role of the headerbox should be presentation"
48 | );
49 |
50 | assert.notOk(
51 | headerBox.hasAttribute("tabindex"),
52 | "the headerbox should not have a tab stop"
53 | );
54 |
55 |
56 | assert.equal(
57 | headerBox.children.length,
58 | 1,
59 | "the headerbox should have exactly one child in the dom"
60 | );
61 |
62 | assert.ok(
63 | headerBox.firstElementChild.classList.contains("common-panel-header"),
64 | "the headerBox should container a header element"
65 | );
66 |
67 | assert.equal(
68 | headerBox.firstElementChild.children.length,
69 | 4,
70 | "the headerbox should have exactly four children in the dom"
71 | );
72 |
73 | assert.ok(
74 | headerBox.firstElementChild.children[0].classList.contains("common-panel-icon"),
75 | "the headerbox contains a header whose first child is an icon slot"
76 | );
77 |
78 | assert.equal(
79 | headerBox.firstElementChild.children[0].innerHTML.trim(),
80 | "",
81 | "the icon slot is purely a decorative hook like a pseudo-element, it should be empty"
82 | );
83 |
84 | assert.ok(
85 | headerBox.firstElementChild.children[1].classList.contains("common-panel-title"),
86 | "the headerbox contains a header whose second child is the title slot"
87 | );
88 |
89 |
90 | /* TODO: maybe we should pass a specific expectation in */
91 | assert.ok(
92 | headerBox.firstElementChild.children[1].innerHTML.trim() != "",
93 | "the title slot should contain the title text, it shouldn't be empty"
94 | );
95 |
96 | /* TODO: we should really check to be sure it isn't visible but is available
97 | to a screen reader */
98 | assert.ok(
99 | headerBox.firstElementChild.children[2].classList.contains("visually-hidden"),
100 | "the headerbox contains a header whose first child is an icon slot"
101 | );
102 |
103 | assert.equal(
104 | headerBox.firstElementChild.children[2].innerHTML.trim(),
105 | " panel ",
106 | "the panel title should announce that it is a 'panel' after reading the panel title"
107 | );
108 |
109 | assert.ok(
110 | headerBox.firstElementChild.children[3].classList.contains("common-panel-remove"),
111 | "the headerbox contains a header whose fourth child is an a remove button"
112 | );
113 |
114 | assert.equal(
115 | headerBox.firstElementChild.children[3].title,
116 | "Remove this panel",
117 | "the remove button should explain what it does in the title"
118 | );
119 |
120 | /* TODO: this should be passed in */
121 | assert[(opts.isRemovable) ? "notEqual" : "equal"](
122 | headerBox.firstElementChild.children[3].style.display,
123 | "none",
124 | "the remove button should be hidden via display"
125 | );
126 |
127 | assert.ok(
128 | contentBox.classList.contains("common-panel-content"),
129 | "the first child should be common-panel-content"
130 | );
131 |
132 | assert[opts.isInSet ? "equal" : "notEqual"](
133 | contentBox.getAttribute("role"),
134 | "tabpanel",
135 | "When part of a panelset, common-panel-content should have a role of 'tabpanel', otherwise none"
136 | );
137 |
138 | assert[opts.isExpandable ? "equal" : "notEqual"](
139 | contentBox.hasAttribute("aria-expanded"),
140 | "the aria-expanded attribute should be managed (or not) on the contentBox appropriately"
141 | );
142 |
143 | assert.ok(
144 | contentBox.hasAttribute("tabindex"),
145 | "the contentbox should have a tabstop"
146 | );
147 |
148 |
149 | /* TODO: we should really check to be sure it isn't visible but is available
150 | to a screen reader */
151 | assert.ok(
152 | contentBox.firstElementChild.classList.contains("visually-hidden"),
153 | "the contentbox's first child should be visually hidden but announce itself as 'panel content'"
154 | );
155 |
156 | /* TODO: add negative accessor/mutator DOM API verifications */
157 | assert.ok(typeof el.headerElement, "Panel should have a headerElement accessor");
158 | assert.ok(typeof el.contentElement, "Panel should have a contentElement accessor");
159 | assert.ok(typeof el.contentElement, "Panel should have a tabProxyElement accessor");
160 | assert.ok(typeof el.expansionState, "Panel should have a expansionState mutator");
161 | assert.ok(typeof el.toggleExpansionState, "Panel should have a toggleExpansionState method");
162 |
163 | /* TODO: add a test for what should happen if you call toggleExpansionState if the panel is not marked expandable? */
164 |
165 | },
166 | verifyPanelset = function (assert, panelset, opts) {
167 | var item,
168 | controlled,
169 | numPanels = opts.numPanels,
170 | selectedIndex = opts.selectedIndex || 0;
171 |
172 | assert.equal(
173 | panelset.getAttribute("role"),
174 | "tablist",
175 | "the role of a tabset should be tablist"
176 | );
177 |
178 | assert.notOk(
179 | panelset.hasAttribute("tabindex"),
180 | "the panelset element should not have a tab stop"
181 | );
182 |
183 | assert.ok(
184 | panelset.firstElementChild.classList.contains("common-panel-tabs"),
185 | "the first child of panelset should be common-panel-tabs"
186 | );
187 |
188 | assert.notOk(
189 | panelset.firstElementChild.hasAttribute("tabindex"),
190 | "common-panel-tabs should not have a tab stop"
191 | );
192 |
193 | assert.equal(
194 | panelset.firstElementChild.getAttribute("role"),
195 | "presentation",
196 | "the role of common-panel-tabs must be presentation"
197 | );
198 |
199 | // TODO: configure #tabs assertions
200 | assert.equal(
201 | panelset.firstElementChild.children.length,
202 | numPanels,
203 | "common-elements-tabs should contain 1 child per panel"
204 | );
205 |
206 |
207 | assert.equal(
208 | panelset.children.length,
209 | numPanels+1,
210 | "the panelset should have 1 common-panel per + 1 for common-panel-tabs"
211 | );
212 |
213 | /* verify a proper tab has been created for each one... */
214 | for (var i=0; i
2 |
3 |
4 |
5 |
6 |
7 | Panel and Panel Sets Prototypes
8 |
9 |
10 |
11 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
Panel and Panel Sets Prototypes
50 |
This page contains descriptions, examples and instances of prototype implemention (prollyfill) of
51 | the Panels and Panel Sets Draft. It can be used
52 | for illustration and education, as well as serve as a host for tests for manual or automated
53 | checking of conformance for the prollyfill itself.
54 |
55 |
56 |
Panels
57 |
58 |
Basic Panel
59 |
This example demonstrates use of a simple, basic common-panel.
60 | <common-panel>
61 | <common-panel-title>My favorite books</common-panel-title>
62 | <p>Here are a list of my favorite books:
63 | <ol>
64 | <li>Hitchhiker's Guide to the Galaxy</li>
65 | <li>Pride and Prejudice</li>
66 | <li>Green Eggs and Ham</li>
67 | </ol>
68 | </p>
69 | </common-panel>
70 |
71 |
72 |
Demo
73 |
Below is a running demo of the above code snippet using the prototype. It contains a common-panel with
74 | a title "My favorite books" and paragraph with a list of three of one of the author's favorites. A user
75 | should be able to switch from the title to content by way of the TAB key.
76 |
77 | My favorite books
78 |
Here are a list of my favorite books:
79 |
80 |
Hitchhiker's Guide to the Galaxy
81 |
Pride and Prejudice
82 |
Green Eggs and Ham
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
Removable Panel
91 |
This example demonstrates use of a common-panel with the is-removable attribute set.
92 | <common-panel is-removable>
93 | <common-panel-title>Reminder</common-panel-title>
94 | <p>You should try using this with assistive technology and, if you are sighted, close your eyes.</p>
95 | </common-panel>
96 |
97 |
98 |
Demo
99 |
Below is a running demo of the above code snippet using the prototype. It contains a common-panel with
100 | a title "Reminder" and, as part of the title, "X" button which can be used to remove it. It should also contain content
101 | (the reminder) which is a one sentence paragraph about testing. Users should be able to TAB focus onto the title
102 | content, TAB again to the close button. Pressing spacebar should cause this panel to be removed from the
103 | document in its entirety. If not removed, TAB again should switch focus to the content.
104 |
105 |
106 | Reminder
107 |
You should try using this with assistive technology and, if you are sighted, close your eyes.
108 |
109 |
110 |
111 |
112 |
113 |
Expandable/Collapsable Panel
114 |
This example demonstrates the use of a common-panel with the a specified expansion-state attribute
115 | set to "opened".
116 | <common-panel expansion-state="opened">
117 | <common-panel-title>Today's News</common-panel-title>
118 | <p>In today's news, accessibility matters. Accessibility first design might actually help you realize some things that improve your design for visually oriented users as well, for example, this whole proposal!</p>
119 | </common-panel>
120 |
121 |
Demo
122 |
Below is a running demo of the above code snippet using the prototype. It contains a common-panel with the
123 | an expansion state of opened. The user should be able to TAB focus onto the title content and, when the panel is
124 | opened (as it is by default here) pressing the TAB should move focus to the content: a paragraph about acessibilty first design. If the user presses the spacebar on the title, as it is collapsable, this should cause the content to become hidden and removed from
125 | TAB navigation until it is re-opened.
126 |
127 | Today's News
128 |
In today's news, accessibility matters. Accessibility first design might actually help you realize some things that improve your
129 | design for visually oriented users as well, for example, this whole proposal!
130 |
131 |
132 |
133 |
134 |
135 |
136 |
Panel Sets
137 |
138 |
Simple Panel Set
139 |
This exaple demonstrates the use of common-panel-set surrounding a collection of simple, vanilla panels about
140 | themeatic groups of news stories. The panel set makes them all inherently "expandable" and manages their simple selection.
141 | As none claims to be expanded, the first one is expanded.
142 | <common-panel-set>
143 | <common-panel>
144 | <common-panel-title>Local</common-panel-title>
145 | <p>This would contain content about local news stories.</p>
146 | </common-panel>
147 |
148 | <common-panel>
149 | <common-panel-title>Entertainment</common-panel-title>
150 | <p>This would contain content about entertainment news stories.</p>
151 | </common-panel>
152 |
153 | <common-panel>
154 | <common-panel-title>Sports</common-panel-title>
155 | <p>This would contain content about sports stories.</p>
156 | </common-panel>
157 | </common-panel-set>
158 |
159 |
Demo
160 |
Below is a running demo of the above code snippet using the prototype. It contains a common-panel-set in which
161 | none of the common-panel children specify an expansion state of opened, thus, the first one should be.
162 | The arrow keys should allow the user to navigate panels which open automatically, adding their content's ability to receive focus.
163 | TAB should move the focus from title to open content and then to the next focusable thing after the common-panel-set.
164 |
165 |
166 | Local
167 |
This would contain content about local news stories.
168 |
169 |
170 |
171 | Entertainment
172 |
This would contain content about entertainment news stories.
173 |
174 |
175 |
176 | Sports
177 |
This would contain content about sports stories.
178 |
179 |
180 |
181 |
182 |
183 |
184 |
Panel Set (explicit expansion)
185 |
This exaple demonstrates the use of common-panel-set surrounding a collection of panels about
186 | themeatic groups of news stories. As common-panel children claim their expansion state to be "opened",
187 | each is processed in document order and the common-panel-set closes others. This means, in a manner
188 | similar to the select element, the last one in document order to make the claim ultimately "wins".
189 | <common-panel-set>
190 | <common-panel >
191 | <common-panel-title>Local</common-panel-title>
192 | <p>This would contain content about local news stories.</p>
193 | </common-panel>
194 |
195 | <common-panel expansion-state="opened">
196 | <common-panel-title>Entertainment</common-panel-title>
197 | <p>This would contain content about entertainment news stories.</p>
198 | </common-panel>
199 |
200 | <common-panel expansion-state="opened"
201 | <common-panel-title>Sports</common-panel-title>
202 | <p>This would contain content about sports stories.</p>
203 | </common-panel>
204 | </common-panel-set>
205 |
206 |
Demo
207 |
Below is a running demo of the above code snippet using the prototype. It contains a common-panel-set in which
208 | two of the common-panel children specify an expansion state of opened, thus, the last one should be.
209 | The arrow keys should allow the user to navigate panels which open automatically, adding their content's ability to receive focus.
210 | TAB should move the focus from title to open content and then to the next focusable thing after the common-panel-set.
211 | In all ways beyond which panel is initially expanded, this should be functionally identical to the previous example.
212 |
213 |
214 | Local
215 |
This would contain content about local news stories.
216 |
217 |
218 |
219 | Entertainment
220 |
This would contain content about entertainment news stories.
221 |
222 |
223 |
224 | Sports
225 |
This would contain content about sports stories.
226 |
227 |
228 |
229 |
230 |
231 |
232 |
Panel Set's preferred-display Attribute (tabset)
233 |
This example demonstrates the use of a preferred-display attribute set to tabset on a common-panel-set element with content identical to the previous example. Only the visual representation should change.
234 | <common-panel-set preferred-display="tabset">
235 | <common-panel>
236 | <common-panel-title>Local</common-panel-title>
237 | <p>This would contain content about local news stories.</p>
238 | </common-panel>
239 |
240 | <common-panel>
241 | <common-panel-title>Entertainment</common-panel-title>
242 | <p>This would contain content about entertainment news stories.</p>
243 | </common-panel>
244 |
245 | <common-panel>
246 | <common-panel-title>Sports</common-panel-title>
247 | <p>This would contain content about sports stories.</p>
248 | </common-panel>
249 | </common-panel-set>
250 |
251 |
Demo
252 |
Below is a running demo of the above code snippet using the prototype. It contains a common-panel-set in which
253 | none of the common-panel children specify an expansion state of opened, thus, the first one should be.
254 | The arrow keys should allow the user to navigate panels which open automatically, adding their content's ability to receive focus.
255 | TAB should move the focus from title to open content and then to the next focusable thing after the common-panel-set.
256 | It is functionally identical to the previous example, only the visual representation should change.
257 |
258 |
259 | Local
260 |
This would contain content about local news stories.
261 |
262 |
263 |
264 | Entertainment
265 |
This would contain content about entertainment news stories.
This example demonstrates the use of a preferred-display attribute set to carousel on a common-panel-set element with content identical to the previous example. Only the visual representation should change.
280 | <common-panel-set preferred-display="carousel">
281 | <common-panel>
282 | <common-panel-title>Local</common-panel-title>
283 | <p>This would contain content about local news stories.</p>
284 | </common-panel>
285 |
286 | <common-panel">
287 | <common-panel-title>Entertainment</common-panel-title>
288 | <p>This would contain content about entertainment news stories.</p>
289 | </common-panel>
290 |
291 | <common-panel>
292 | <common-panel-title>Sports</common-panel-title>
293 | <p>This would contain content about sports stories.</p>
294 | </common-panel>
295 | </common-panel-set>
296 |
297 |
Demo
298 |
Below is a running demo of the above code snippet using the prototype. It contains a common-panel-set in which
299 | none of the common-panel children specify an expansion state of opened, thus, the first one should be.
300 | The arrow keys should allow the user to navigate panels which open automatically, adding their content's ability to receive focus.
301 | TAB should move the focus from title to open content and then to the next focusable thing after the common-panel-set.
302 | It is functionally identical to the previous example, only the visual representation should change.
303 |
304 |
305 | Local
306 |
This would contain content about local news stories.
307 |
308 |
309 |
310 | Entertainment
311 |
This would contain content about entertainment news stories.
This example demonstrates the use of a preferred-display attribute set to accordion on a common-panel-set element with content identical to the previous example. Only the visual representation should change.
325 | <common-panel-set preferred-display="accordion">
326 | <common-panel>
327 | <common-panel-title>Local</common-panel-title>
328 | <p>This would contain content about local news stories.</p>
329 | </common-panel>
330 |
331 | <common-panel>
332 | <common-panel-title>Entertainment</common-panel-title>
333 | <p>This would contain content about entertainment news stories.</p>
334 | </common-panel>
335 |
336 | <common-panel>
337 | <common-panel-title>Sports</common-panel-title>
338 | <p>This would contain content about sports stories.</p>
339 | </common-panel>
340 | </common-panel-set>
341 |
342 |
Demo
343 |
Below is a running demo of the above code snippet using the prototype. It contains a common-panel-set in which
344 | none of the common-panel children specify an expansion state of opened, thus, the first one should be.
345 | The arrow keys should allow the user to navigate panels which open automatically, adding their content's ability to receive focus.
346 | TAB should move the focus from title to open content and then to the next focusable thing after the common-panel-set.
347 | It is functionally identical to the previous example, only the visual representation should change.
348 |
349 |
350 | Local
351 |
This would contain content about local news stories.
352 |
353 |
354 |
355 | Entertainment
356 |
This would contain content about entertainment news stories.
This example demonstrates the use of a preferred-display attribute set to accordion on a common-panel-set element with content identical to the previous example. Only the visual representation should change.
370 | <common-panel-set preferred-display="accordion">
371 | <common-panel>
372 | <common-panel-title>Local</common-panel-title>
373 | <p>This would contain content about local news stories.</p>
374 | </common-panel>
375 |
376 | <common-panel>
377 | <common-panel-title>Entertainment</common-panel-title>
378 | <p>This would contain content about entertainment news stories.</p>
379 | </common-panel>
380 |
381 | <common-panel>
382 | <common-panel-title>Sports</common-panel-title>
383 | <p>This would contain content about sports stories.</p>
384 | </common-panel>
385 | </common-panel-set>
386 |
387 |
Demo
388 |
Below is a running demo of the above code snippet using the prototype. It contains a common-panel-set in which
389 | none of the common-panel children specify an expansion state of opened, thus, the first one should be.
390 | The arrow keys should allow the user to navigate panels which open automatically, adding their content's ability to receive focus.
391 | TAB should move the focus from title to open content and then to the next focusable thing after the common-panel-set.
392 | It is functionally identical to the previous example, only the visual representation should change.
393 |
394 |
395 | Local
396 |
This would contain content about local news stories.
397 |
398 |
399 |
400 | Entertainment
401 |
This would contain content about entertainment news stories.
402 |
403 |
404 |
405 | Sports
406 |
This would contain content about sports stories.
407 |
408 |
409 |
410 |
411 |
412 |
413 |
414 |
Controlling preferred-display via Media Queries
415 |
This example demonstrates the use of media queries to control preferred-display attribute to make it tabset on wide screen, but accordion on all others. The common-panel-set element with content identical to the previous example. Only the visual representation should change.
Below is a running demo of the above code snippet using the prototype. It contains a common-panel-set in which
450 | none of the common-panel children specify an expansion state of opened, thus, the first one should be.
451 | The arrow keys should allow the user to navigate panels which open automatically, adding their content's ability to receive focus.
452 | TAB should move the focus from title to open content and then to the next focusable thing after the common-panel-set.
453 | Note that as its representation changes, neither the panel selection, nor the tab-focus should be lost.
454 | It is functionally identical to the previous example, only the visual representation should change.
455 |
456 |
457 | Local
458 |
This would contain content about local news stories.
459 |
460 |
461 |
462 | Entertainment
463 |
This would contain content about entertainment news stories.
230 | 
328 | 
352 | 
436 |