Add accordion as a new component

[chrisdholt]

Accordion should be add as a new components in fast-components-react-base.

As defined by the W3C:

An accordion is a vertically stacked set of interactive headings that each contain a title, content snippet, or thumbnail representing a section of content. The headings function as controls that enable users to reveal or hide their associated sections of content. Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.

Accordion should include:

• Header: Label for or thumbnail representing a section of content that also serves as a control for showing, and in some implementations, hiding the section of content.
• Panel: Section of content associated with an accordion header.
• Support for additional elements such as a menu button, which that are always visible adjacent to the accordion header.
• The ability to have multiple sections open at a given time
• The ability to restrict to only one section being open at a given time.

Interaction model:
The accordion should align to the interaction model provided by the W3C: https://w3c.github.io/aria-practices/#keyboard-interaction

Examples
TBD

[chrisdholt]

@SethDonohue Can you dig into exploring this? It would be great to have you dig into the WAI specification and come up with a potential API so we can talk through it prior to building.

[SethDonohue]

As far as the ARIA design pattern and keyboard interactions, this looks fairly simple to follow per the W3 Accordion spec. I would also match the Keyboard Interaction Model.

This also may be laid out like TreeView, with PanelView and PanelItem components

The spec has some optional items, like allowing more than one panel to be open at once or not, so we would most likely want some props to control those type of options.

Potential props:

1. panels: an array of panelProps

• panelProps: a string title for the header, header tag type, render prop for the panels content, optional before render prop for an icon etc, optional after render prop for an icon etc, optional defaultExpanded prop, onExpandedChange: callback to when the expanded state of a panel changes.

2. onlyOnePanelOpen: boolean

3. canCollapseAll: boolean

Still exploring drag and drop for this.
I'll keep adding to this as I work on it.

Names of props will need improvement...

[chrisdholt]

As far as the ARIA design pattern and keyboard interactions, this looks fairly simple to follow per the W3 Accordion spec. I would also match the Keyboard Interaction Model.

This also may be laid out like TreeView, with PanelView and PanelItem components

The spec has some optional items, like allowing more than one panel to be open at once or not, so we would most likely want some props to control those type of options.

Potential props:

1. panels: an array of panelProps

• panelProps: a string title for the header, header tag type, render prop for the panels content, optional before render prop for an icon etc, optional after render prop for an icon etc, optional defaultExpanded prop, onExpandedChange: callback to when the expanded state of a panel changes.

1. onlyOnePanelOpen: boolean
2. canCollapseAll: boolean

Still exploring drag and drop for this.
I'll keep adding to this as I work on it.

Names of props will need improvement...

@SethDonohue I don't think we'd want to bake drag and drop; I'd suggest looking at tree view item for an example of how that might be handled.

The above potential props look like you're proposing a complex object for this. Is there a way we can do this with composition to better match our current implementation model?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[chrisdholt]

closed with #3067