Widget: Expander

Details

Implementing This Widget

Implementing the Expander widget is done when you want to have accessible user-expandable details sections of information that can be displayed below a summary section.

To implement the Expander widget:

1. Call deque.createExpander with the following two required arguments:
   • A string for the header (which is always visible)
   • A string for the body (which right now will be added to a paragraph tag that is only visible when the widget is expanded)
2. Optionally, add the boolean argument. If you pass true it will forcibly render the widget using divs, not using details/summary even if the browser supports it.

Expected Operation and Accessibility Features

The text expander widget polyfills the details and summary HTML5 controls. Where these are available, it will use them. If they're not available in a given browser, however, it'll fall back to a set of divs. If you pass in a third argument as true you can force HTML4 mode, so we can see the fallback mode even in a modern browser.

Validation and Developer Notes

In order to validate this control, you must manually test the expanded section will be read properly to screen reader users, and verify the sections can be expanded using both a mouse and keyboard, whether in HTML4 or HTML5 mode.

Example Implementation Reference

To view an implementation of this widget, see Expander widget example.