Panel and Panel Sets Prototypes

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.

Panels

Basic Panel

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>

Demo

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.

My favorite books

Here are a list of my favorite books:

  1. Hitchhiker's Guide to the Galaxy
  2. Pride and Prejudice
  3. Green Eggs and Ham

Removable Panel

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>

Demo

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.

Reminder

You should try using this with assistive technology and, if you are sighted, close your eyes.

Expandable/Collapsable Panel

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>

Demo

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.

Today's News

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!

Panel Sets

Simple Panel Set

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>

Demo

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.

Local

This would contain content about local news stories.

Entertainment

This would contain content about entertainment news stories.

Sports

This would contain content about sports stories.

Panel Set (explicit expansion)

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>

Demo

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.

Local

This would contain content about local news stories.

Entertainment

This would contain content about entertainment news stories.

Sports

This would contain content about sports stories.

Panel Set's 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>

Demo

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.

Local

This would contain content about local news stories.

Entertainment

This would contain content about entertainment news stories.

Sports

This would contain content about sports stories.

Panel Set's 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>

Demo

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.

Local

This would contain content about local news stories.

Entertainment

This would contain content about entertainment news stories.

Sports

This would contain content about sports stories.

Panel Set's 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>

Demo

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.

Local

This would contain content about local news stories.

Entertainment

This would contain content about entertainment news stories.

Sports

This would contain content about sports stories.

Panel Set's 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>

Demo

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.

Local

This would contain content about local news stories.

Entertainment

This would contain content about entertainment news stories.

Sports

This would contain content about sports stories.

Controlling preferred-display via Media Queries

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.

<!-- 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>

Demo

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.

Local

This would contain content about local news stories.

Entertainment

This would contain content about entertainment news stories.

Sports

This would contain content about sports stories.