Accordion Specification

Owned by

Astrea

Developer Name

Stefan Ivanov

Requires approval from

Peer Developer Name | Date:
Stefan Ivanov | Date:

Signed off by

Product Owner Name | Date:
Platform Architect Name | Date:

Revision History

Version	Users	Date	Notes
1	Stefan Ivanov	18 May 2021

1. Overview

Objectives

igx-Accordion - Angular native accordion widget combining a collection of igx-ExpansionPanels in a vertical layout. It allows the end-user to see an overview of data and dig into the details that come with it in an interactive fashion. The igx-Accordion does not overload the user with information, making it compact in size and using progressive disclosure to unveil more of it. Its items are templatable out of the box since each of them is an igx-Expansion panel that comes with built-in templating. The igx-Accordion has two interactive modes:

only one igx-ExpansionPanel can be expanded at a time (selecting a collapsed panel would collapse the currently expanded one, while the selected one is expanding at the same time) prototype
multiple igx-ExpansionPanel can be expanded together, which means that only explicit user interaction or use of the API affects the state of the igx-Accordion prototype

Acceptance criteria

Must-have before we can consider the feature a sprint candidate

...

2. User Stories

Elaborate more on the multi-facetted use cases

Developer stories:

Story 1: As a developer, I want to create a simple accordion in a declarative fashion, showing a title when collapsed and complementing it with a text paragraph when expanded, so that I can display a compact FAQ section.
Story 2: As a developer, I want to be able to choose whether single or multiple panels can be expanded at the same time so that I can determine the accordion interactivity.
Story 3: As a developer, I want to be able to template each igx-ExpansionPanel individually, so that I can add a CTA button or hyperlink where appropriate.
Story 4: As a developer, I expect that each igx-ExpansionPanel within an igx-Accordion supports the same degree of customizations and styling as they normally do as a standalone component.
Story 5: As a developer, I want to be able to remove the default margins added to an expanded panel, so that it does not stand out as much from the rest of the accordion.
Story 6: As a developer, I expect that all panels in an accordion have responsive sizing out of the box that is controlled by the size of the accordion.
Story 7: As a developer, I expect that the accordion is accessible and supports keyboard navigation out of the box.
Story 8: As a developer, I want to be able to place an accordion within another component e.g. a side panel, navigation drawer or dock-manager pane, so that I can create elaborate UIs.

End-user stories:

Story 1: As an end-user, I want to be able to expand an accordion item/panel, so that I can read more details about it.
Story 2: As an end-user, I want to be able to collapse an accordion item/panel, so that I can hide the details and focus on another one.
Story 3: As an end-user, I want to be able to collapse all accordion items/panels at once, so that I can move on to the next section of the webpage.
Story 4: As an end-user, I want to be able to navigate the accordion and its items with the keyboard, so that I can navigate faster and take advantage of screen readers.

3. Functionality

Describe behavior, design, look and feel of the implemented feature. Always include visual mock-up

3.1. End-User Experience The Accordion component lets the end-user interact with an overview of the data to see its full details for a collection of items/panels. It can be seen as a collection of vertically stacked Expansion Panels supporting simple navigation between them. The paradigm is frequently used to show simple or more complex FAQ sections with primarily textual content, but it is also possible to have actions and other elements in the details part.

Sometimes, an accordion may appear in the details of an Expansion Panel when more complex structures need to be presented creating some sort of shallow nesting.

Other times, an Accordion may appear in a side panel e.g. to render some elaborate filter options.

There are two navigation modes that can be seen below

** Prepared design files for styling e.g. interplay with features and light/dark variants design hand-off

3.2. Developer Experience

3.3. Globalization/Localization

Describe any special localization requirements such as the number of localizable strings, regional formats

3.4. Keyboard Navigation

Keys	Description
Tab	Moves the focus to the first panel / Outside the accordion to the next tab index (accordion is a single tab stop element unless the layout of the expand panels contain focusable elements such as a button)
Arrow Down	Move the focus to the panel below
Arrow Up	Move the focus to the panel above
End	Move the focus to the last panel of the accordion
Home	Move the focus to the first panel of the accordion
Alt + Arrow Right	Expand the focused panel in the accordion
Alt + Arrow Left	Collapse the focused panel in the accordion
Shift + Alt + Arrow Right	Expand all panels when this is enabled
Shift + Alt + Arrow Left	Collapse all panels whichever panel is focused