This page contains descriptions, examples and instances of prototype implemention (prollyfill) of the Panels and Panel Sets Draft. It can be used for illustration and education, as well as serve as a host for tests for manual or automated checking of conformance for the prollyfill itself.
This example demonstrates use of a simple, basic common-panel
.
<common-panel>
<common-panel-title>My favorite books</common-panel-title>
<p>Here are a list of my favorite books:
<ol>
<li>Hitchhiker's Guide to the Galaxy</li>
<li>Pride and Prejudice</li>
<li>Green Eggs and Ham</li>
</ol>
</p>
</common-panel>
Below is a running demo of the above code snippet using the prototype. It contains a common-panel
with
a title "My favorite books" and paragraph with a list of three of one of the author's favorites. A user
should be able to switch from the title to content by way of the TAB key.
Here are a list of my favorite books:
This example demonstrates use of a common-panel
with the is-removable attribute set.
<common-panel is-removable>
<common-panel-title>Reminder</common-panel-title>
<p>You should try using this with assistive technology and, if you are sighted, close your eyes.</p>
</common-panel>
Below is a running demo of the above code snippet using the prototype. It contains a common-panel
with
a title "Reminder" and, as part of the title, "X" button which can be used to remove it. It should also contain content
(the reminder) which is a one sentence paragraph about testing. Users should be able to TAB focus onto the title
content, TAB again to the close button. Pressing spacebar should cause this panel to be removed from the
document in its entirety. If not removed, TAB again should switch focus to the content.
You should try using this with assistive technology and, if you are sighted, close your eyes.
This example demonstrates the use of a common-panel
with the a specified expansion-state
attribute
set to "opened".
<common-panel expansion-state="opened">
<common-panel-title>Today's News</common-panel-title>
<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>
</common-panel>
Below is a running demo of the above code snippet using the prototype. It contains a common-panel
with the
an expansion
state of opened. The user should be able to TAB focus onto the title content and, when the panel is
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
TAB navigation until it is re-opened.
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!
This exaple demonstrates the use of common-panel-set
surrounding a collection of simple, vanilla panels about
themeatic groups of news stories. The panel set makes them all inherently "expandable" and manages their simple selection.
As none claims to be expanded, the first one is expanded.
<common-panel-set>
<common-panel>
<common-panel-title>Local</common-panel-title>
<p>This would contain content about local news stories.</p>
</common-panel>
<common-panel>
<common-panel-title>Entertainment</common-panel-title>
<p>This would contain content about entertainment news stories.</p>
</common-panel>
<common-panel>
<common-panel-title>Sports</common-panel-title>
<p>This would contain content about sports stories.</p>
</common-panel>
</common-panel-set>
Below is a running demo of the above code snippet using the prototype. It contains a common-panel-set
in which
none of the common-panel
children specify an expansion
state of opened, thus, the first one should be.
The arrow keys should allow the user to navigate panels which open automatically, adding their content's ability to receive focus.
TAB should move the focus from title to open content and then to the next focusable thing after the common-panel-set
.
This would contain content about local news stories.
This would contain content about entertainment news stories.
This would contain content about sports stories.
This exaple demonstrates the use of common-panel-set
surrounding a collection of panels about
themeatic groups of news stories. As common-panel
children claim their expansion state to be "opened",
each is processed in document order and the common-panel-set
closes others. This means, in a manner
similar to the select
element, the last one in document order to make the claim ultimately "wins".
<common-panel-set>
<common-panel >
<common-panel-title>Local</common-panel-title>
<p>This would contain content about local news stories.</p>
</common-panel>
<common-panel expansion-state="opened">
<common-panel-title>Entertainment</common-panel-title>
<p>This would contain content about entertainment news stories.</p>
</common-panel>
<common-panel expansion-state="opened"
<common-panel-title>Sports</common-panel-title>
<p>This would contain content about sports stories.</p>
</common-panel>
</common-panel-set>
Below is a running demo of the above code snippet using the prototype. It contains a common-panel-set
in which
two of the common-panel
children specify an expansion
state of opened, thus, the last one should be.
The arrow keys should allow the user to navigate panels which open automatically, adding their content's ability to receive focus.
TAB should move the focus from title to open content and then to the next focusable thing after the common-panel-set
.
In all ways beyond which panel is initially expanded, this should be functionally identical to the previous example.
This would contain content about local news stories.
This would contain content about entertainment news stories.
This would contain content about sports stories.
preferred-display
Attribute (tabset)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.
<common-panel-set preferred-display="tabset">
<common-panel>
<common-panel-title>Local</common-panel-title>
<p>This would contain content about local news stories.</p>
</common-panel>
<common-panel>
<common-panel-title>Entertainment</common-panel-title>
<p>This would contain content about entertainment news stories.</p>
</common-panel>
<common-panel>
<common-panel-title>Sports</common-panel-title>
<p>This would contain content about sports stories.</p>
</common-panel>
</common-panel-set>
Below is a running demo of the above code snippet using the prototype. It contains a common-panel-set
in which
none of the common-panel
children specify an expansion
state of opened, thus, the first one should be.
The arrow keys should allow the user to navigate panels which open automatically, adding their content's ability to receive focus.
TAB should move the focus from title to open content and then to the next focusable thing after the common-panel-set
.
It is functionally identical to the previous example, only the visual representation should change.
This would contain content about local news stories.
This would contain content about entertainment news stories.
This would contain content about sports stories.
preferred-display
Attribute (carousel)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.
<common-panel-set preferred-display="carousel">
<common-panel>
<common-panel-title>Local</common-panel-title>
<p>This would contain content about local news stories.</p>
</common-panel>
<common-panel">
<common-panel-title>Entertainment</common-panel-title>
<p>This would contain content about entertainment news stories.</p>
</common-panel>
<common-panel>
<common-panel-title>Sports</common-panel-title>
<p>This would contain content about sports stories.</p>
</common-panel>
</common-panel-set>
Below is a running demo of the above code snippet using the prototype. It contains a common-panel-set
in which
none of the common-panel
children specify an expansion
state of opened, thus, the first one should be.
The arrow keys should allow the user to navigate panels which open automatically, adding their content's ability to receive focus.
TAB should move the focus from title to open content and then to the next focusable thing after the common-panel-set
.
It is functionally identical to the previous example, only the visual representation should change.
This would contain content about local news stories.
This would contain content about entertainment news stories.
This would contain content about sports stories.
preferred-display
Attribute (accordion)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.
<common-panel-set preferred-display="accordion">
<common-panel>
<common-panel-title>Local</common-panel-title>
<p>This would contain content about local news stories.</p>
</common-panel>
<common-panel>
<common-panel-title>Entertainment</common-panel-title>
<p>This would contain content about entertainment news stories.</p>
</common-panel>
<common-panel>
<common-panel-title>Sports</common-panel-title>
<p>This would contain content about sports stories.</p>
</common-panel>
</common-panel-set>
Below is a running demo of the above code snippet using the prototype. It contains a common-panel-set
in which
none of the common-panel
children specify an expansion
state of opened, thus, the first one should be.
The arrow keys should allow the user to navigate panels which open automatically, adding their content's ability to receive focus.
TAB should move the focus from title to open content and then to the next focusable thing after the common-panel-set
.
It is functionally identical to the previous example, only the visual representation should change.
This would contain content about local news stories.
This would contain content about entertainment news stories.
This would contain content about sports stories.
preferred-display
Attribute (accordion)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.
<common-panel-set preferred-display="accordion">
<common-panel>
<common-panel-title>Local</common-panel-title>
<p>This would contain content about local news stories.</p>
</common-panel>
<common-panel>
<common-panel-title>Entertainment</common-panel-title>
<p>This would contain content about entertainment news stories.</p>
</common-panel>
<common-panel>
<common-panel-title>Sports</common-panel-title>
<p>This would contain content about sports stories.</p>
</common-panel>
</common-panel-set>
Below is a running demo of the above code snippet using the prototype. It contains a common-panel-set
in which
none of the common-panel
children specify an expansion
state of opened, thus, the first one should be.
The arrow keys should allow the user to navigate panels which open automatically, adding their content's ability to receive focus.
TAB should move the focus from title to open content and then to the next focusable thing after the common-panel-set
.
It is functionally identical to the previous example, only the visual representation should change.
This would contain content about local news stories.
This would contain content about entertainment news stories.
This would contain content about sports stories.
preferred-display
via Media QueriesThis 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.
<!-- demo uses script type="text/MediaQueryMappings" lightweight polyfill -->
<style>
@media all {
#foo {
--preferred-display: accordion;
}
}
@media screen and (min-width: 767px) {
#foo {
--preferred-display: tabset;
}
}
</style>
<common-panel-set id="foo">
<common-panel>
<common-panel-title>Local</common-panel-title>
<p>This would contain content about local news stories.</p>
</common-panel>
<common-panel>
<common-panel-title>Entertainment</common-panel-title>
<p>This would contain content about entertainment news stories.</p>
</common-panel>
<common-panel>
<common-panel-title>Sports</common-panel-title>
<p>This would contain content about sports stories.</p>
</common-panel>
</common-panel-set>
Below is a running demo of the above code snippet using the prototype. It contains a common-panel-set
in which
none of the common-panel
children specify an expansion
state of opened, thus, the first one should be.
The arrow keys should allow the user to navigate panels which open automatically, adding their content's ability to receive focus.
TAB should move the focus from title to open content and then to the next focusable thing after the common-panel-set
.
Note that as its representation changes, neither the panel selection, nor the tab-focus should be lost.
It is functionally identical to the previous example, only the visual representation should change.
This would contain content about local news stories.
This would contain content about entertainment news stories.
This would contain content about sports stories.