Skip to content

WCollapsibleToggle

marksreeves edited this page Jul 12, 2016 · 17 revisions

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

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.

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 accordions 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);

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.

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 stste during a toggle action.

Accessibility

Positioning WCollapsibleToggle

A WCollapsibleToggle should 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.

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.

Screenshot

Screen shot of WCollapsibleToggle

Related components

Further information

Clone this wiki locally