Variable getTabAriaProps

Type Declaration

• • (
        id: string,
        isSelected: boolean,
        controls: string,
    ): {
        "aria-controls": string;
        "aria-selected": boolean;
        id: string;
        role: string;
        tabIndex: number;
    }

  • Generate ARIA props for a tab component

    Creates a complete set of ARIA properties for tab controls following WAI-ARIA Authoring Practices for tab patterns. Ensures proper keyboard navigation and screen reader announcements.

    Parameters

    • id: string

      Unique tab identifier

    • isSelected: boolean

      Whether the tab is currently selected/active

    • controls: string

      ID of the tabpanel this tab controls

    Returns {
        "aria-controls": string;
        "aria-selected": boolean;
        id: string;
        role: string;
        tabIndex: number;
    }

    ARIA props object with role, selection state, controls reference, and keyboard focus

    Example

    // Selected tab
    const selectedTabProps = getTabAriaProps('tab-security', true, 'panel-security');
    // {
    //   role: 'tab',
    //   'aria-selected': true,
    //   'aria-controls': 'panel-security',
    //   id: 'tab-security',
    //   tabIndex: 0
    // }
    
    // Unselected tab
    const unselectedTabProps = getTabAriaProps('tab-compliance', false, 'panel-compliance');
    // {
    //   role: 'tab',
    //   'aria-selected': false,
    //   'aria-controls': 'panel-compliance',
    //   id: 'tab-compliance',
    //   tabIndex: -1
    // }
    
    // Usage in component
    <div role="tablist">
      {tabs.map(tab => (
        <button
          key={tab.id}
          {...getTabAriaProps(tab.id, tab.id === selectedTab, `panel-${tab.id}`)}
          onClick={() => selectTab(tab.id)}
        >
          {tab.label}
        </button>
      ))}
    </div>
    Copy