Tabs

Typescript

Exported types

i18n Strings

Guidelines

Creating Tabs

If you will be dynamically updating tabs during the s-tabs component's lifetime, including through responsive behavior, do not use <s-tab> children. You should assign a stringified JSON array of tab objects to the tabitems (note the lowercase 'i') attribute. An example:

Responsiveness

The s-tabs component is responsive to varying screen widths ONLY when populated with the tabitems method described immediately above. Tabs components populated with hardcoded <s-tab> children will simply wrap to a new row as the viewport shrinks.

It is highly recommended to take advantage of true responsive behavior, which includes keeping tabs in a single row at all widths, the addition of a collapsed items (More) menu when required, and a separate layout for viewports smaller than 600px wide.

Accessibility

The Tabs element will have its aria-role attribute set to tablist automatically within the component. An aria-label should be set to indicate the purpose of the set of tabs.

Each JSON <s-tab> element will have its aria-role attribute set to tab automatically. Legacy <s-tab> will need to have role="tab" manually inserted. An id and aria-controls attribute should be set on each within the HTML markup. aria-selected will be managed within the component.

Each tab panel (not managed within Skylab SDK component) should have an role attribute set to tabpanel, an id attribute set to the value of the aria-controls attribute on the corresponding tab, and an aria-labelledby attribute set to the value of theid attribute of the corresponding tab, and a tabindex attribute set to 0.

Displaying Tab content

When a Tab is selected the s-select event is fired. Listen to this event and respond accordingly, which usually means immediately displaying that Tab's corresponding content, but there can be other use cases like navigating to a new page or triggering an animation that transitions to a new view. See code sample at top for an example on implementing this logic in vanilla JavaScript. If your app utilizes a front-end JavaScript framework, we recommend using the coding patterns that framework endorses rarther than the declarative implementation above.

React Typescript Code Sample

For those using React + Typescript, below is a React Component <TabGenerator /> which accepts a tab array, and will render the <s-tab> component for you. You can copy+paste this into your codebase and be up and running without any extra fussing.

  
  import React, { ReactElement, useEffect } from 'react';
  
  type TabArray = {
    id: string; // required
    label: string; // required
    tabPanelId: string; // required; sets aria-controls to the id of the associated tabpanel
    selected?: boolean;
    disabled?: boolean;
    iconName?: string; // name of s-icon to be displayed to the left of the tab text, if any
    badgeCount?: string | number; // count of s-badge to be displayed to the right of the tab text, if any
    badgeAriaLabel?: string; // aria-label of s-badge, if any
    onClick: () => void; // required for this component, but could be refactored out
  }[];
  
  interface TabComponent extends HTMLElement {
    tabItems: TabArray;
  }
  
  type TabGeneratorProps = {
    tabArray: TabArray;
    parentId: string; //don't include the # when passing this value
  };
  
  export default function TabGenerator({
    tabArray,
    parentId = 'typescript-s-tabs',
  }: TabGeneratorProps): ReactElement {
    useEffect(() => {
      const tabsComponent = document.querySelector(
        `#${parentId}`
      ) as TabComponent;
  
      tabsComponent.tabItems = tabArray;
      tabsComponent.addEventListener('s-select', (event) => {
        const tabId = (event as CustomEvent).detail.id;
        const tabArrayItem = tabArray.find((tabObj) => tabObj.id === tabId);
        tabArrayItem?.onClick();
      });
    });
  
    return <s-tabs id={parentId} />;
  }
  
  

Design

Design resources can be found on the Skylab design documentation site: skylab.avalara.com