Skip to content

docs(tab-panel): add new format and accessiblity section #5594

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

docs(tab-panel): add new format and accessiblity section #5594

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c9b6e85
docs(tab-panel): add new format and accessiblity section
aramos-adobe Jul 9, 2025
1652c0c
Merge branch 'main' into aramos-adobe/tabs-panel-docs-audit
aramos-adobe Jul 10, 2025
3d973c2
Merge branch 'main' into aramos-adobe/tabs-panel-docs-audit
aramos-adobe Jul 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 18 additions & 9 deletions packages/tabs/tab-panel.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
## Description
## Overview

An `<sp-tab-panel>` contains the content that will be displayed when an `<sp-tab>` becomes `selected`. An `<sp-tab-panel>` can be associated with an `<sp-tab>` by sharing the same `value` attribute.

Expand All @@ -7,25 +7,23 @@ An `<sp-tab-panel>` contains the content that will be displayed when an `<sp-tab
[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/tabs?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/tabs)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/tabs?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/tabs)

```
```javascript
yarn add @spectrum-web-components/tabs
```

Import the side effectful registration of `<sp-tab-panel>` via:

```
```javascript
import '@spectrum-web-components/tabs/sp-tab-panel.js';
```

When looking to leverage the `TabPanel` base class as a type and/or for extension purposes, do so via:

```
import {
TabPanel,
} from '@spectrum-web-components/tabs';
```javascript
import { TabPanel } from '@spectrum-web-components/tabs';
```

## Examples
### Anatomy

```html
<sp-tabs selected="1">
Expand All @@ -40,7 +38,9 @@ import {
</sp-tabs>
```

## Customizing transitions
### Options

#### Customizing transitions

The state of the `<sp-tab-panel>` is reflected to the boolean `selected` attribute, which can be used to customize the transition between panels when the selection changes.

Expand Down Expand Up @@ -84,3 +84,12 @@ The state of the `<sp-tab-panel>` is reflected to the boolean `selected` attribu
<sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
</sp-tabs>
```

### Accessibility

The tabpanel provides proper ARIA attributes and focus management for its content:

- The content area has `role="tabpanel"`
- `aria-labelledby` points to the associated tab
- `tabindex="0"` when selected, `-1` when not selected
- `aria-hidden="true"` when not selected
Loading