Tabs Specification
- Overview
- User Stories
- Functionality
- Test Scenarios
- Accessibility
- Assumptions and Limitations
- References
Team Name: CodeX
Developer Name: Maria Tsvyatkova
Designer Name
- Peer Developer Name | Date:
- Design Manager Name | Date:
- Radoslav Mirchev | Date: 20-May-2022
- Radoslav Karaivanov | Date:
| Version | Users | Date | Notes |
|---|---|---|---|
| 1 | Maria Tsvyatkova | 5-Mar-2022 | |
| 1.01 | Radoslav Mirchev | 20-May-2022 | Update of the User Stories |
The igc-tabs component is used to organize or switch between similar data sets. It is a wrapper for the content slot named panel and the default slot. These slots will represent the containers for the content and the tab headers respectively. igc-tab-panel components are used for the panel. igc-tab components are set for the default slot to show the tab headers. The igc-tab may contain a label and/or icon or other custom content.
Tabs are ordered in a single row above their associated content.
The tabs component provides tab selection and viewing of its content, differentiating between tab states (active, inactive, disabled)
- The tabs component should support start (default), end, center and justify tab alignments.
- The tabs component should allow scrolling when there are multiple tabs which does not fit in view.
- The tabs component should support keyboard navigation between tabs.
- The tabs component should wrap long label in a tab to a second line.
- The tabs component should support disabling of tabs.
Developer stories:
-
Story 1: As a developer, I want to customize each tab header with a label, an icon, or both, so that header area is fully customizable.
-
Story 2: As a developer, I want to select tab through code, so that its content is visible.
-
Story 3: As a developer, I want to choose between four modes of tab header alignment, so that I can control the headers which are visible:
- Start - the size of the tab headers depends on their content, all tabs have equal padding and are aligned to start.
- End - the size of the tab headers depends on their content, all tabs have equal padding and are aligned to end.
- Center - the size of the tab headers depends on their content, all tabs have equal padding and are aligned to center.
- Justify - all tab headers are equal in size and fit the width of the tabs component.
If the alignment is not justify and the tab headers don't fit in the available width for the tabs container it can be scrolled (left and right scroll buttons) to show the tabs that are not in view.
-
Story 5: As a developer, I want to disable certain tabs, so that the end user cannot interact with them.
-
Story 6: As a developer, I want to wrap long labels in the tab header to a second line so that text is fully visible. In case the text is too long it will be truncated and three periods will be displayed at the end.
End-user stories:
- Story 1: As an end-user, I want to click on tab header, so that I can view the tab content.
- Story 2: As an end-user, I want to scroll tab headers, so that I can view the ones which are not displayed on load because they are too many to fit the parent container.
- Story 3: As an end-user, I want to visually differentiate tab states, so that I know if tab is active, inactive, and disabled.
- Story 4: As an end-user, I want to have customized tab headers e.g. with a label, an icon, both, close button.
3.1. End-User Experience The default dimensions of the tabs are as follows:
Width minimum and maximum (inclusive of padding)
Maximum (whichever fits and is smaller): 360dp or (the value of view size minus 56dp)
Minimum: 160dp for larger views, 90dp for smaller views
Height
48dp when content is only icon, only text, or horizontal stack of text and icon
72dp when content is icon and text stacked vertically
Alignment
Centered, start, or end
Justify
Scrollable Tabs: As the tab headers overflow the tabs container, a designated area appears at the end of the tabs container. It has an arrow pointing to the end. After scrolling by pressing this arrow, the beginning of the tabs container is populated with an arrow pointing to the start.
In case of a selection of a partially visible tab, the tabs pre-scroll so that the latter is seen fully visible.
The scroll's range is done in pixels.
Icons
Text and icon stacked vertically
Content-fit Type - text and icon stacked horizontally
Wrapped long label to a second line
** Prepared design files for styling e.g. interplay with features and light/dark variants design hand-off
3.2. Developer Experience
<igc-tabs>
<igc-tab panel="first">Item 1</igc-tab>
<igc-tab panel="second">Item 2</igc-tab>
<igc-tab panel="third" disabled>Item 3</igc-tab>
<igc-tab-panel slot="panel" name="first">Content 1</igc-tab-panel>
<igc-tab-panel slot="panel" name="second">Content 2</igc-tab-panel>
<igc-tab-panel slot="panel" name="third">Content 3</igc-tab-panel>
</igc-tabs>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 | When the focus moves to the tabs component, places focus on the active tab element. When the tabs component contains the focus, moves focus to the next element in the tab sequence, which is the tab panel element or navigation button |
| Right Arrow | Moves focus to the next tab. If focus is on the last tab, moves focus to the first tab. Selects the newly focused tab if activation is set to select (default value) |
| Left Arrow | Moves focus to the previous tab. If focus is on the first tab, moves focus to the last tab. Selects the newly focused tab if activation is set to select (default value) |
| Home | Moves focus to the first tab. Selects the newly focused tab if activation is set to select (default value) |
| End | Moves focus to the last tab. Selects the newly focused tab if activation is set to select (default value) |
3.5. API
| Name | Description | Type | Default value | Reflected |
|---|---|---|---|---|
selected |
Gets the selected tab. The first not-disabled tab is selected by default when no other selection is specified. | string |
tab[0].panel |
false |
alignment |
Gets/sets the tab header alignment. By default, it is start and the tab width is sized to its content in the range of min/max width. When justify is set, all tabs have equal size to fit the view port. |
start | end | center | justify
|
start |
true |
activation |
Determines whether new tab is selected when pressing Left/Right/Home/End keys (the default behavior), or only focused - selection happens when pressing Enter/Space. | auto | manual |
auto |
false |
| Name | Description | Cancelable | Parameters |
|---|---|---|---|
igcChange |
Emitted when the selected tab is changed. | false |
- |
| Method | Description | Return Type |
|---|---|---|
select |
Selects a tab by the value of the panel property or an element reference. | (tab: string | HTMLElement): void |
| Name | Description |
|---|---|
(default) |
Renders the tab's header. |
panel |
Renders the tab's content. |
| Name | Description |
|---|---|
headers |
The wrapper of the tabs including the headers and the scroll buttons. |
headers-content |
The container for the tab headers. |
headers-wrapper |
The wrapper for the tab headers and the selected indicator. |
headers-scroll |
The container for the tab headers. |
selected-indicator |
The selected indicator. |
start-scroll-button |
The start scroll button displayed when the tabs overflow. |
end-scroll-button |
The end scroll button displayed when the tabs overflow. |
content |
The container for the tab's content. |
| Name | Description | Type | Default value | Reflected |
|---|---|---|---|---|
panel |
The name used to identify the tab header. | string |
undefined |
false |
selected |
Gets/sets whether the tab is selected. | boolean |
false |
true |
disabled |
Gets/sets whether the tab is disabled. | boolean |
false |
true |
| Name | Description |
|---|---|
(default) |
Renders the tab header's content. |
prefix |
Renders the tab header's prefix. |
suffix |
Renders the tab header's suffix. |
| Name | Description |
|---|---|
base |
The base wrapper of the tab header. |
prefix |
The prefix wrapper. |
suffix |
The suffix wrapper. |
| Name | Description | Type | Default value | Reflected |
|---|---|---|---|---|
name |
The name used to identify the tab panel and link it to the header. | string |
undefined |
false |
| Name | Description |
|---|---|
(default) |
Renders the tab's panel content. |
Automation
- Tabs should select the first enabled tab by default.
- Tabs should select tab on click if it is not disabled.
- Tabs should select/deselect tab using select() method.
- Tabs should select next/previous tab when pressing Right/Left Arrow.
- Tabs should select first/last enabled tab when pressing Home/End button.
- Tabs should focus next/previous tab when pressing Right/Left Arrow and activation is set to manual.
- Tabs should select the focused tab when Enter/Space is pressed and activation is set to manual.
- Tabs should scroll tab headers area when clicking left/right scroll buttons.
- Tabs should not select disabled tabs on Left/Right/Home/End key down or click.
- Tabs should hide the selected indicator when no tab is selected.
- The change event is fired when selected tab changes.
- Tabs should show prefix and suffix properly.
- TabAlignment should be set to start by default.
- Tabs should align tab headers properly when tabAlignment is set to start/end/center/justify.
- Scroll buttons should be hidden when tabAlignment is justify.
- Selected indicator should align with the selected tab.
ARIA Support
- the element that contains the tab headers has
role="tablist"; - the tab header has
role="tab"; - the tab panel has
role="tabpanel"; -
aria-selected- indicates the tab header is selected and its associated panel is displayed; -
aria-disabled- indicates the tab header is disabled.
RTL Support
| Assumptions | Limitation Notes |
|---|---|
Specify all referenced external sources