1. Overview
2. User Stories
3. Functionality
4. Test Scenarios
5. Accessibility
6. Assumptions and Limitations
7. References

Team Name: CodeX

Developer Name: Maria Tsvyatkova

Designer Name

• Peer Developer: Radoslav Karaivanov | Date: 3-June-2022
• Design Manager: Svilen Dimchevski | Date: 30-May-2022

• Radoslav Mirchev | Date: 20-May-2022
• Radoslav Karaivanov | Date: 3-June-2022

The igc-tabs component is used to organize or switch between similar data sets. It has a default slot that wraps igc-tab components. The igc-tab component exposes label, prefix, suffix and a default slot that represents the tab's content. The label slot may contain text 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)

1. The tabs component should support start (default), end, center and justify tab alignments.
2. The tabs component should allow scrolling when there are multiple tabs which does not fit in view.
3. The tabs component should support keyboard navigation between tabs.
4. The tabs component should wrap long label in a tab to a second line.
5. 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.

  If 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 start and at the end of the tabs container. It has an arrow in disabled state pointing to the start and an arrow in enabled state pointing to the end. After scrolling by pressing the enabled arrow at the end, once you have tabs that are not fully visible in the left of the container the left arrow becomes enabled as well. After scrolling to the end of the container, the arrow at the end of the tabs container becomes disabled.

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 based on the next/prev tab which end/start is not within the visible container.

Icons

Text and icon stacked vertically

Content-fit Type - text and icon stacked horizontally

Tabs with a suffix - for example a close button

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 .label="Item 1">Content 1</igc-tab>
    <igc-tab .label="Item 2">Content 2</igc-tab>
    <igc-tab .label="Item 3" disabled>Content 3</igc-tab>
</igc-tabs>

3.3. Globalization/Localization

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

3.4. Keyboard Navigation

3.5. API

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 header has aria-controls linking it to the panel id;
• 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

Specify all referenced external sources