From c372ec81ee7ce0e373cd7798707515b9761ee48a Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Tue, 23 Apr 2024 19:57:15 +0200 Subject: [PATCH 1/8] [website] update TabLine and TabPanel examples and a11y guides --- .../examples/automatic_tab_activation.tsx | 73 ++++++++++----- .../examples/manual_tab_activation.tsx | 31 +++---- .../examples/tab_line_item_addons.tsx | 89 +++++++++++++++++++ .../docs/components/tab-line/tab-line-a11y.md | 28 +++--- .../docs/components/tab-line/tab-line-code.md | 26 +++++- website/docs/components/tab-line/tab-line.md | 13 ++- .../examples/automatic_tab_activation.tsx | 31 +++---- .../examples/manual_tab_activation.tsx | 72 ++++++++++----- .../examples/tab_panel_item_addons.tsx | 89 +++++++++++++++++++ .../components/tab-panel/tab-panel-a11y.md | 30 ++++--- .../components/tab-panel/tab-panel-code.md | 24 +++-- .../docs/components/tab-panel/tab-panel.md | 4 +- 12 files changed, 385 insertions(+), 125 deletions(-) create mode 100644 website/docs/components/tab-line/examples/tab_line_item_addons.tsx create mode 100644 website/docs/components/tab-panel/examples/tab_panel_item_addons.tsx diff --git a/website/docs/components/tab-line/examples/automatic_tab_activation.tsx b/website/docs/components/tab-line/examples/automatic_tab_activation.tsx index 851af7e4b1..94514ad58e 100644 --- a/website/docs/components/tab-line/examples/automatic_tab_activation.tsx +++ b/website/docs/components/tab-line/examples/automatic_tab_activation.tsx @@ -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 ( - - Overview - Issues - - - - - LinkedIn - - new - - - - - Progress + <> + + + Cats + + + Dogs + + + Birds - - Statistics - + + { + [ +
+

Cats

+

+ 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. +

+
, + , + , + ][value - 1] + } + ); }; diff --git a/website/docs/components/tab-line/examples/manual_tab_activation.tsx b/website/docs/components/tab-line/examples/manual_tab_activation.tsx index 91b4d9c41a..0d7f520888 100644 --- a/website/docs/components/tab-line/examples/manual_tab_activation.tsx +++ b/website/docs/components/tab-line/examples/manual_tab_activation.tsx @@ -5,28 +5,24 @@ const Demo = () => { const [value, onChange] = React.useState(1); return ( <> - + - Overview + Cats - Issues + Dogs - Progress - - - Disabled + Birds { [
-

Overview

+

Cats

- 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.

,
{ aria-labelledby='tab-label-2' tabIndex={-1} > -

Issues

+

Dogs

- 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.

,
{ aria-labelledby='tab-label-3' tabIndex={-1} > -

Progress

+

Birds

- 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.

, ][value - 1] diff --git a/website/docs/components/tab-line/examples/tab_line_item_addons.tsx b/website/docs/components/tab-line/examples/tab_line_item_addons.tsx new file mode 100644 index 0000000000..8dad8f458a --- /dev/null +++ b/website/docs/components/tab-line/examples/tab_line_item_addons.tsx @@ -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 ( + <> + + + + + + Facebook + + + + + + Instagram + + new + + + + + + + Twitter + + + + + + + LinkedIn + + + + { + [ +
+

Facebook

+

+ It's where your aunt's cat has more followers than you, and your high school nemesis + still thinks they're relevant. +

+
, + , + , + ][value - 1] + } + + ); +}; + +export default Demo; diff --git a/website/docs/components/tab-line/tab-line-a11y.md b/website/docs/components/tab-line/tab-line-a11y.md index 2d5ebae43b..1d5360deb5 100644 --- a/website/docs/components/tab-line/tab-line-a11y.md +++ b/website/docs/components/tab-line/tab-line-a11y.md @@ -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 @@ -37,12 +28,23 @@ 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 diff --git a/website/docs/components/tab-line/tab-line-code.md b/website/docs/components/tab-line/tab-line-code.md index 1f50895cb2..09ab61e845 100644 --- a/website/docs/components/tab-line/tab-line-code.md +++ b/website/docs/components/tab-line/tab-line-code.md @@ -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 shortened 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 + + + +::: + ## 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 `` within other components. +By default, the component switches content automatically when switching tabs. ::: sandbox @@ -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 + +::: + +## Manual tab activation + +By default, the component switches content manually when switching tabs. + ::: sandbox