Skip to content
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

Jump to bottom

[website] update TabLine and TabPanel examples and a11y guides #1324

Closed
wants to merge 10 commits into from
Closed

[website] update TabLine and TabPanel examples and a11y guides #1324

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
c372ec8
[website] update TabLine and TabPanel examples and a11y guides
j-mnizhek Apr 23, 2024
48b50d5
[website] fix typo for TabPanel
j-mnizhek Apr 24, 2024
b22c911
[website] fix typo in TabLine
j-mnizhek Apr 24, 2024
4a2f6ad
[website] update TabLine a11y doc
j-mnizhek Apr 24, 2024
e42f466
[website] update TabPanel a11y doc
j-mnizhek Apr 24, 2024
f4527ba
[website] update TabLine and TabPanel docs
j-mnizhek Apr 25, 2024
ea51fac
[website] updated TabPanel and TabLine documentation
j-mnizhek Apr 26, 2024
22809d6
Merge branch 'master' into update/tabs-documentation
j-mnizhek Apr 26, 2024
a8d0c5b
Merge branch 'master' into update/tabs-documentation
j-mnizhek May 17, 2024
1a008c5
[website] add change from developers PR
j-mnizhek May 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
73 changes: 50 additions & 23 deletions website/docs/components/tab-line/examples/automatic_tab_activation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,59 @@
import React from 'react';
import TabLine from 'intergalactic/tab-line';
import Badge from 'intergalactic/badge';
import Tooltip from 'intergalactic/tooltip';
import LinkedInM from 'intergalactic/icon/LinkedIn/m';

const Demo = () => {
const [value, setValue] = React.useState(0);

const [value, onChange] = React.useState(1);
return (
<TabLine onChange={setValue} value={value} aria-label='Page'>
<TabLine.Item value={0}>Overview</TabLine.Item>
<TabLine.Item value={1}>Issues</TabLine.Item>
<TabLine.Item value={2}>
<TabLine.Item.Addon>
<LinkedInM />
</TabLine.Item.Addon>
<TabLine.Item.Text>LinkedIn</TabLine.Item.Text>
<TabLine.Item.Addon>
<Badge bg='green-400'>new</Badge>
</TabLine.Item.Addon>
</TabLine.Item>
<Tooltip title="Progress isn't available during collecting process" placement='top'>
<TabLine.Item disabled value={3}>
Progress
<>
<TabLine value={value} onChange={onChange} aria-label='Animals'>
<TabLine.Item value={1} aria-controls='tab-panel-1'>
Cats
</TabLine.Item>
<TabLine.Item value={2} aria-controls='tab-panel-2'>
Dogs
</TabLine.Item>
<TabLine.Item value={3} aria-controls='tab-panel-3'>
Birds
</TabLine.Item>
</Tooltip>
<TabLine.Item value={4}>Statistics</TabLine.Item>
</TabLine>
</TabLine>
{
[
<div id='tab-panel-1' role='tabpanel' aria-labelledby='tab-label-1' tabIndex={-1}>
<h3>Cats</h3>
<p>
They are the only creatures that can simultaneously demand your attention and ignore
you completely, while plotting world domination from the top of the refrigerator.
</p>
</div>,
<div
id='tab-panel-2'
aria-hidden='true'
role='tabpanel'
aria-labelledby='tab-label-2'
tabIndex={-1}
>
<h3>Dogs</h3>
<p>
They are the eternal optimists who believe that every stranger is a potential friend
and every walk is an adventure, even if it's just to the mailbox.
</p>
</div>,
<div
id='tab-panel-3'
aria-hidden='true'
role='tabpanel'
aria-labelledby='tab-label-3'
tabIndex={-1}
>
<h3>Birds</h3>
<p>
They are the tiny dinosaurs who sing like they're auditioning for Broadway and have a
knack for leaving 'gifts' on freshly washed cars.
</p>
</div>,
][value - 1]
}
</>
);
};

Expand Down
31 changes: 13 additions & 18 deletions website/docs/components/tab-line/examples/manual_tab_activation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,28 +5,24 @@ const Demo = () => {
const [value, onChange] = React.useState(1);
return (
<>
<TabLine value={value} onChange={onChange} behavior='manual' aria-label='Page'>
<TabLine value={value} onChange={onChange} behavior='manual' aria-label='Animals'>
<TabLine.Item value={1} aria-controls='tab-panel-1'>
Overview
Cats
</TabLine.Item>
<TabLine.Item value={2} aria-controls='tab-panel-2'>
Issues
Dogs
</TabLine.Item>
<TabLine.Item value={3} aria-controls='tab-panel-3'>
Progress
</TabLine.Item>
<TabLine.Item value={4} disabled>
Disabled
Birds
</TabLine.Item>
</TabLine>
{
[
<div id='tab-panel-1' role='tabpanel' aria-labelledby='tab-label-1' tabIndex={-1}>
<h3>Overview</h3>
<h3>Cats</h3>
<p>
The important achievement of Apollo was demonstrating that humanity isn't forever
chained to this planet and our visions go rather further than that and our
opportunities are unlimited.
They are the only creatures that can simultaneously demand your attention and ignore
you completely, while plotting world domination from the top of the refrigerator.
</p>
</div>,
<div
Expand All @@ -36,10 +32,10 @@ const Demo = () => {
aria-labelledby='tab-label-2'
tabIndex={-1}
>
<h3>Issues</h3>
<h3>Dogs</h3>
<p>
Never limit yourself because of others' limited imagination; never limit others
because of your own limited imagination.
They are the eternal optimists who believe that every stranger is a potential friend
and every walk is an adventure, even if it's just to the mailbox.
</p>
</div>,
<div
Expand All @@ -49,11 +45,10 @@ const Demo = () => {
aria-labelledby='tab-label-3'
tabIndex={-1}
>
<h3>Progress</h3>
<h3>Birds</h3>
<p>
After Apollo 17, America stopped looking towards the next horizon. The United States
had become a space-faring nation, but threw it away. We have sacrificed space
exploration for space exploitation, which is interesting but scarcely visionary.
They are the tiny dinosaurs who sing like they're auditioning for Broadway and have a
knack for leaving 'gifts' on freshly washed cars.
</p>
</div>,
][value - 1]
Expand Down
89 changes: 89 additions & 0 deletions website/docs/components/tab-line/examples/tab_line_item_addons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
import React from 'react';
import TabLine from 'intergalactic/tab-line';
import Tooltip from 'intergalactic/tooltip';
import FacebookM from 'intergalactic/icon/Facebook/m';
import InstagramM from 'intergalactic/icon/Instagram/m';
import TwitterM from 'intergalactic/icon/Twitter/m';
import LinkedInM from 'intergalactic/icon/LinkedIn/m';
import Badge from 'intergalactic/badge';

const Demo = () => {
const [value, onChange] = React.useState(1);
return (
<>
<TabLine value={value} onChange={onChange} aria-label='Social network reports'>
<TabLine.Item value={1} aria-controls='tab-panel-1'>
<TabLine.Item.Addon>
<FacebookM />
</TabLine.Item.Addon>
<TabLine.Item.Text>Facebook</TabLine.Item.Text>
</TabLine.Item>
<TabLine.Item value={2} aria-controls='tab-panel-2'>
<TabLine.Item.Addon>
<InstagramM />
</TabLine.Item.Addon>
<TabLine.Item.Text>Instagram</TabLine.Item.Text>
<TabLine.Item.Addon>
<Badge bg='green-400'>new</Badge>
</TabLine.Item.Addon>
</TabLine.Item>
<TabLine.Item value={3} aria-controls='tab-panel-3'>
<TabLine.Item.Addon>
<TwitterM />
</TabLine.Item.Addon>
<TabLine.Item.Text>Twitter</TabLine.Item.Text>
</TabLine.Item>
<Tooltip
title='You can disable the tab to indicate that data is either being collected or unavailable.'
placement='top'
>
<TabLine.Item value={4} disabled>
<TabLine.Item.Addon>
<LinkedInM />
</TabLine.Item.Addon>
<TabLine.Item.Text>LinkedIn</TabLine.Item.Text>
</TabLine.Item>
</Tooltip>
</TabLine>
{
[
<div id='tab-panel-1' role='tabpanel' aria-labelledby='tab-label-1' tabIndex={-1}>
<h3>Facebook</h3>
<p>
It's where your aunt's cat has more followers than you, and your high school nemesis
still thinks they're relevant.
</p>
</div>,
<div
id='tab-panel-2'
aria-hidden='true'
role='tabpanel'
aria-labelledby='tab-label-2'
tabIndex={-1}
>
<h3>Instagram</h3>
<p>
It's where people spend hours perfecting their avocado toast just for a 'like', and
your explore page thinks you need therapy based on your search history.
</p>
</div>,
<div
id='tab-panel-3'
aria-hidden='true'
role='tabpanel'
aria-labelledby='tab-label-3'
tabIndex={-1}
>
<h3>Twitter</h3>
<p>
It's where 280 characters can start a revolution or a feud over pineapple on pizza,
and your timeline is a mix of breaking news and cat memes.
</p>
</div>,
][value - 1]
}
</>
);
};

export default Demo;
30 changes: 16 additions & 14 deletions website/docs/components/tab-line/tab-line-a11y.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,18 +17,9 @@ Table: Keyboard support
| `Left Arrow` , `Right Arrow` | Changes the state of next/previous `tab` element in the group to `active`. If focus is on the last/first `tab`, arrows move focus to the first/last `tab` respectively. |
| `Space`/`Enter` | Activates focused `tab` element. Works only when TabLine has `behavior='manual'`. |

## Considerations for developers

- Be mindful of using tabs, as they are less discoverable by design.
- Once a tab button is focused, other tabs can be selected with the arrow keys.
- A tab's contents can be accessed via `Tab` (if there are focusable elements in the tab well) or `PgDn` (if there are no focusable elements in the tab well).
- Be sure to update the values of the [`aria-posinset`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-posinset) and [`aria-setsize`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-setsize) attributes if you have more than three tabs.

Find live examples in the [A11y style guide](https://a11y-style-guide.com/style-guide/section-structure.html#kssref-structure-tabs).

### Roles & attributes

The list below will help you to keep in mind the necessary roles and attributes to make our components fully accessible in your interfaces.
The list below describes roles and attributes that component already has.

Table: Roles and attributes

Expand All @@ -37,17 +28,28 @@ Table: Roles and attributes
| `tablist` | | `div` | Indicates that the element serves as a container for a set of tabs. |
| `tab` | | `button` | Indicates the element serves as a `tab` control. When focused, is automatically activated, causing its associated `tabpanel` to be displayed. Provides a title for its associated `tabpanel`. |
| | `aria-selected="true"` | `button` | Indicates the tab control is activated and its associated panel is displayed. Set when a tab receives focus. |
| | `aria-selected="false"` | `button` | Indicates the tab control isn’t active and its associated panel isn’t displayed. Set for all tab elements in the tab set except the focused tab. |
| | `aria-selected="false"` | `button` | Indicates the tab control isn’t active and its associated panel isn’t displayed. |
| | `tabindex="-1"` | `button` | Removes the element from the page `Tab` sequence. Set when a tab isn’t selected so that only the selected tab is in the page `Tab` sequence. Since an HTML `button` element is used for the tab, it isn’t necessary to set `tabindex=0` on the selected (active) tab element. This approach to managing focus is described in the section on [roving tabindex](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_roving_tabindex). |
| | `aria-controls="IDREF"` | `button` | Refers to the `tabpanel` element associated with the tab. |

## Considerations for designers & developers

### Roles & attributes

The list below will help you to keep in mind the necessary roles and attributes you need to set to `tabpanel` with your content to make TabLine and content it operates fully accessible. Check [our code examples](/components/tab-line/tab-line-code).

Table: Roles and attributes

| Role | Attribute | Element | Usage |
| -------- | ------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `tabpanel` | | `div` | Indicates the element serves as a container for tab panel content. Is hidden unless its associated `tab` control is activated. |
| | `aria-controls="IDREF"` | `button` | Refers to the `tabpanel` element associated with the tab. |
| | `aria-labelledby="IDREF"` | `div` | Refers to the `tab` element that controls the panel. Provides an accessible name for the tab panel. |
| | `tabIndex="0"` | `div` | Puts the `tabpanel` in the page `Tab` sequence. Facilitates movement to panel content for assistive technology users. Especially helpful if there are panels that don’t contain a focusable element. |
| | `tabIndex="0"` | `div` | Puts the `tabpanel` in the page `Tab` sequence. Facilitates movement to panel content for assistive technology users. Especially helpful if any panels in a set contain content where the first element in the panel is not focusable. |

## Resources

- [W3 tabs example](https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html) has detailed information about the tabs accessible behavior.
- [A11y style guide](https://a11y-style-guide.com/style-guide/section-structure.html#kssref-structure-tabs) describes the core recommendations for the components.
- [A11y style guide](https://a11y-style-guide.com/style-guide/section-structure.html#kssref-structure-tabs) describes the core recommendations for the tabs.

## Other recommendations

Expand Down
26 changes: 23 additions & 3 deletions website/docs/components/tab-line/tab-line-code.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,27 @@ fileSource: tab-line
tabs: Design('tab-line'), A11y('tab-line-a11y'), API('tab-line-api'), Example('tab-line-code'), Changelog('tab-line-changelog')
---

Try resizing the page to see how the tabs adjust. If the text in a tab is too long, it will be truncated with an `ellipsis`. You can also place the `TabLine.Item` within other components.

::: tip
Make sure to provide a tooltip with full text for tabs with text truncated with an `ellipsis`.
:::

## TabLine item with addons

You can add icons, badges, counters as addons to the left or right of the text in the item.

::: sandbox

<script lang="tsx">
export Demo from './examples/tab_line_item_addons.tsx';
</script>

:::

## Automatic tab activation

Try changing the page size to observe how the tabs are compressed. If the text inside a tab is too long, it will be truncated with an `ellipsis`. You can also place the `<TabLine.Item />` within other components.
By default, the component switches content automatically when switching tabs.

::: sandbox

Expand All @@ -18,6 +36,8 @@ Try changing the page size to observe how the tabs are compressed. If the text i

## Manual tab activation

You can set `behavior='manual'` on TabLine to change how tab content is activated.

::: sandbox

<script lang="tsx">
Expand All @@ -27,9 +47,9 @@ Try changing the page size to observe how the tabs are compressed. If the text i
:::


## Custom indents and occupying the entire space
## Custom indents

As you might have noticed, the TabLine component doesn't have default margins at the edges. To make the TabLine span the entire width of its parent block (which might have its own margins), you can set the desired `padding` and `margin` for the TabLine component.
Since the TabLine component doesn't have default margins at the edges, to make it fill the entire width of its parent block (which may have its own margins), you can set the desired `padding` and `margin` for the TabLine component like this:

```typescript
<Box p={5}>
Expand Down