-
Notifications
You must be signed in to change notification settings - Fork 162
Accordion Specification
- Overview
- User Stories
- Functionality
- Test Scenarios
- Accessibility
- Assumptions and Limitations
- References
Astrea
Developer Name
Stefan Ivanov
- Peer Developer Name | Date:
- Stefan Ivanov | Date:
- Product Owner Name | Date:
- Platform Architect Name | Date:
Version | Users | Date | Notes |
---|---|---|---|
1 | Stefan Ivanov | 18 May 2021 |
igx-Accordion - Angular native accordion widget combining a collection of igx-ExpansionPanels in a vertical layout. It allows the end-user to interact with 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
Must-have before we can consider the feature a sprint candidate
...
Elaborate more on the multi-facetted use cases
Developer stories:
- Story 1: As a developer, I want to create a simple accordion, 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
- Story 3: As a developer, I want to…, so that I can… prototype
End-user stories:
- Story 1: As an end-user, I want to…, so that I can… prototype
- Story 2: As an end-user, I want to…, so that I can… prototype
- Story 3: As an end-user, I want to…, so that I can… prototype
Describe behavior, design, look and feel of the implemented feature. Always include visual mock-up
3.1. End-User Experience
** Integration scenarios or functionality with other features/components prototype ** End-to-end user experienceprototype ** 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 |
3.5. API
Name | Description | Type | Default value | Valid values |
---|---|---|---|---|
Name | Description | Return type | Parameters |
---|---|---|---|
Name | Description | Cancelable | Parameters |
---|---|---|---|
Automation
- Scenario 1:
- scenario 2:
ARIA Support fill from here
RTL Support
Assumptions | Limitation Notes |
---|---|
Specify all referenced external sources