Skip to content

WCollapsibleToggle

Mark Reeves edited this page Jan 4, 2018 · 17 revisions

WCollapsibleToggle is a component which outputs a tool used to expand or collapse a group of WCollapsibles or accordions.

Why use WCollapsibleToggle

WCollapsibleToggle has a fairly simple use-case:

  • a view contains a number of WCollapsible components or a WTabSet of the ACCORDION type with the ability to have multiple WTabs open; and
  • it is reasonable or expected that the user should open or close all of the collapsible content components at the same time.

It could be argues that these two conditions indicate a usability problem in the UI as the amount of content implied by these conditions is itself problematic. However, WCollapsibleToggle exists for this reason, so if one finds oneself with that use-case then one may want to use a WCollapsibleToggle.

Creating a WCollapsibleToggle

WCollapsibleToggle has two constructors. The default constructor and one which takes a CollapsibleGroup as an argument.

WCollapsibleToggle toggle = new WCollapsibleToggle();
// toggle will have to be associated with a group at some point.

//...
// alternatively
// give CollapsibleGroup group.
WCollapsibleToggle toggle = new WCollapsibleToggle(group);
// toggle is now the controller of group.

Accessibility

Positioning WCollapsibleToggle

A WCollapsibleToggle must appear before the controlled WCollapsibles and/or accordions. It may be deemed an accessibility failure if a control alters the state of the page ahead of the current cursor point.

Keyboard driving

The individual controls output by WCollapsibleToggle are exposed as a pair of radio buttons. The pair constitute a single tab-stop. If either control is in a selected state then that control will receive focus, otherwise the first button will receive focus. The ARROW keys are used to move between the two controls and the selected state is set on navigation. The effect of this is that any navigation between the controls will result in the controlled components having their collapsed state toggled.

Using WCollapsibleToggle

A WCollapsibleToggle should only be specified when a group of WCollapsibles and/or accordions exists on a single screen and it is reasonable for the user to expand (or collapse) them all at once. You should probably avoid specifying a WCollapsibleToggle if the group consists of only a single WCollapsible or accordion or if it is not desirable or reasonable for the user to expand all WCollapsibles at once.

Associating with a CollapsibleGroup

A WCollapsibleToggle may be associated with a CollapsibleGroup. If this is the case only collapsible components in the controlled CollapsibleGroup will be toggled by the WCollapsibleToggle.

If a WCollapsibleToggle is not associated with a CollapsibleGroup then it will toggle all WCollapsibles in the current view but will not have any effect on any WTabSet ACCORDION in the view.

// A WCollapsibleToggle can be associated with a
// CollapsibleGroup during construction
WCollapsibleToggle toggle = new WCollapsibleToggle(group);

// alternately a group can be associated with a WCollapsibleToggle
toggle.setGroup(group);

// or the other way around
group.setCollapsibleToggle(toggle);

Reporting state

The effect of the WCollapsibleToggle is purely client-side. The individual collapsible components may have Ajax modes which may result in getting content from the server on expand but the WCollapsibleToggle itself does not report its state during a toggle action.

HTML output

WCollapsibleToggle outputs a HTML ul element with two list items: one to expand all and one to collapse all. The ul element has a WAI-ARIA role of radiogroup. The items each contain a HTML button element with a WAI-ARIA role of radio since their selection is mutually exclusive.

Sample appearance

Screen shot of WCollapsibleToggle

Related components

Further information

Clone this wiki locally