Function getTabAriaProps

getTabAriaProps(
    id: string,
    isSelected: boolean,
    controls: string,
): {
    role: string;
    "aria-selected": boolean;
    "aria-controls": string;
    id: 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 {
    role: string;
    "aria-selected": boolean;
    "aria-controls": string;
    id: 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>

Function getTabAriaProps

Parameters

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

Example

Settings

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