type: widget

release: TBD

status: in development - GitHub branch: panel

documentation: N/A

demo: N/A

1 - Description:

A content grouping or panel is used to visually confine related information on a page or can act as a panel in an application UI. At the most basic, these include a bar with a title (B1). Links, buttons, icons can all be added to the bar (B2). The grouping bar itself can be make collapsable either horizontally (B2) or vertically (B3) which can be especially useful in a rich application with multiple panes and palettes.

Content Grouping examples:

• http://github.com/idlesign/ist-ui-panel / live demo. 

  Available in jQuery UI Labs: http://jquery-ui.googlecode.com/svn/branches/labs/panel/ui.panel.js

   

2 - Visual Design:

3 - Functional Specifications/Requirements:

     (Detailed descrition of how the script will be structured: defaults, options, architecture, extensibility, etc.)

4 - Markup & Style:

4.1 Initial markup examples

Same as for the Accordion.

4.2 Recommended transformed HTML markup

Same as for the Accordion.

4.3 Accessibility recommendation

The experience for both sighted and visually impaired users should be as functionally similar as possible. The W3C Web Content Accessibility Group (WCAG) has outlined a set of four principles that must be met to ensure that content is accessible:

• Perceivable — Information and user interface components must be presentable to users in ways they can perceive.
• Operable — User interface components and navigation must be operable.
• Understandable — Information and the operation of user interface must be understandable.
• Robust — Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies. 

To accomplish these accessibility goals, our plugin should append several attributes and elements to the enhanced markup in addition to what's needed to visually collapse and expand the content area:

• Wrap an anchor link element around the clickable heading to allow it to receive keyboard focus and be accessed with the Tab key
• Append a span inside the clickable heading element immediately before the text label which contains the word "Show" followed by a single space if the content is hidden by default; when the content is shown, the script dynamically updates this word to "Hide." This span is intended only for screen readers to audibly describe the heading's function as a toggle link (i.e., "Show Details"), so it's hidden from standard browsers with absolute positioning and a large negative left value. Make this language configurable.

• Assign ARIA attributes to the content panel to provide feedback to ARIA-enabled screen readers when it's hidden (aria-hidden="true") or visible (aria-hidden="false")

View this Filament Group Article on collapsible content to learn more:

http://www.filamentgroup.com/lab/expand_and_collapse_content_accessibly_with_progressive_enhancement_jquery

To view a demo of this proposed approach in action and test it on screen readers visit:

http://dwpe.googlecode.com/svn/trunk/collapsible/index.html

4.3 CSS & Theme

Same as for the Accordion.

5 - Latest version of plugin:

http://view.jqueryui.com/panel/tests/visual/panel/panel.html

6 - Open issues being discussed

Todos:

1. Try to rewrite accordion, inhertiting from panel
1. need to add keyboard handling and ARIA stuff to panel
2. Review and write the spec
3. Review section 4.3 - how different is that from Accordion?