From e6af17c9a64ef1559fd13c6b2ca1426329f6799d Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Wed, 9 Feb 2022 16:12:27 -0500 Subject: [PATCH 1/4] fix(Tabs): make tooltips more accessible --- .../react-core/src/components/Tabs/Tab.tsx | 54 +- .../src/components/Tabs/TabButton.tsx | 5 +- .../src/components/Tabs/examples/Tabs.md | 779 ++++++++++++------ 3 files changed, 560 insertions(+), 278 deletions(-) diff --git a/packages/react-core/src/components/Tabs/Tab.tsx b/packages/react-core/src/components/Tabs/Tab.tsx index 686eb28f6ad..143f9602f2f 100644 --- a/packages/react-core/src/components/Tabs/Tab.tsx +++ b/packages/react-core/src/components/Tabs/Tab.tsx @@ -4,6 +4,7 @@ import { OUIAProps } from '../../helpers'; import { TabButton } from './TabButton'; import { TabsContext } from './TabsContext'; import { css } from '@patternfly/react-styles'; +import { Tooltip } from '../Tooltip'; export interface TabProps extends Omit, 'title'>, OUIAProps { /** content rendered inside the Tab content area. */ @@ -30,6 +31,7 @@ export interface TabProps extends Omit; + tooltip?: React.ReactElement; } const TabBase: React.FunctionComponent = ({ @@ -45,6 +47,7 @@ const TabBase: React.FunctionComponent = ({ inoperableEvents = ['onClick', 'onKeyPress'], href, innerRef, + tooltip, ...props }: TabProps) => { const preventedEvents = inoperableEvents.reduce( @@ -69,31 +72,34 @@ const TabBase: React.FunctionComponent = ({ return null; } }; - return ( -
  • handleTabClick(event, eventKey, tabContentRef)} + {...(isAriaDisabled ? preventedEvents : null)} + id={`pf-tab-${eventKey}-${childId || uniqueId}`} + aria-controls={ariaControls} + tabContentRef={tabContentRef} + ouiaId={childOuiaId} + href={href} + {...props} > - handleTabClick(event, eventKey, tabContentRef)} - {...(isAriaDisabled ? preventedEvents : null)} - id={`pf-tab-${eventKey}-${childId || uniqueId}`} - aria-controls={ariaControls} - tabContentRef={tabContentRef} - ouiaId={childOuiaId} - href={href} - {...props} - > - {title} - + {title} + + ); + + return ( +
  • + {tooltip ? {tabButton} : tabButton}
    • ); }; diff --git a/packages/react-core/src/components/Tabs/TabButton.tsx b/packages/react-core/src/components/Tabs/TabButton.tsx index 11338d09298..53a59272998 100644 --- a/packages/react-core/src/components/Tabs/TabButton.tsx +++ b/packages/react-core/src/components/Tabs/TabButton.tsx @@ -10,6 +10,7 @@ export interface TabButtonProps extends Omit; + parentInnerRef?: React.Ref; } export const TabButton: React.FunctionComponent = ({ @@ -17,12 +18,14 @@ export const TabButton: React.FunctionComponent = ({ // eslint-disable-next-line @typescript-eslint/no-unused-vars tabContentRef, ouiaId, + parentInnerRef, ouiaSafe, ...props }: TabButtonProps) => { const Component = (props.href ? 'a' : 'button') as any; + return ( - + {children} ); diff --git a/packages/react-core/src/components/Tabs/examples/Tabs.md b/packages/react-core/src/components/Tabs/examples/Tabs.md index 29cb024e031..936ee5ea3a6 100644 --- a/packages/react-core/src/components/Tabs/examples/Tabs.md +++ b/packages/react-core/src/components/Tabs/examples/Tabs.md @@ -2,9 +2,10 @@ id: Tabs section: components cssPrefix: pf-c-tabs -propComponents: ['Tabs', 'TabProps', 'TabContent', 'TabTitleText', 'TabTitleIcon' ] +propComponents: ['Tabs', 'TabProps', 'TabContent', 'TabTitleText', 'TabTitleIcon'] ouia: true --- + import UsersIcon from '@patternfly/react-icons/dist/esm/icons/users-icon'; import BoxIcon from '@patternfly/react-icons/dist/esm/icons/box-icon'; import DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon'; @@ -19,6 +20,83 @@ Similarly the 'Tab content light variation' checkbox affects the TabContent back ## Examples ### Default + +```js +import React from 'react'; +import { Tabs, Tab, TabTitleText, Checkbox, Tooltip } from '@patternfly/react-core'; + +class SimpleTabs extends React.Component { + constructor(props) { + super(props); + this.state = { + activeTabKey: 0, + isBox: false + }; + // Toggle currently active tab + this.handleTabClick = (event, tabIndex) => { + this.setState({ + activeTabKey: tabIndex + }); + }; + + this.toggleBox = checked => { + this.setState({ + isBox: checked + }); + }; + } + + render() { + const { activeTabKey, isBox } = this.state; + const tooltip = ( + + ); + + return ( +
    + + Users}> + Users + + Containers}> + Containers + + Database}> + Database + + Disabled} isDisabled> + Disabled + + ARIA Disabled} isAriaDisabled> + ARIA Disabled + + ARIA Disabled (Tooltip)} + isAriaDisabled + > + ARIA Disabled (Tooltip) + + +
    + +
    +
    + ); + } +} +``` + +### With tooltip react ref + ```js import React from 'react'; import { Tabs, Tab, TabTitleText, Checkbox, Tooltip } from '@patternfly/react-core'; @@ -28,7 +106,7 @@ class SimpleTabs extends React.Component { super(props); this.state = { activeTabKey: 0, - isBox: false, + isBox: false }; // Toggle currently active tab this.handleTabClick = (event, tabIndex) => { @@ -45,7 +123,7 @@ class SimpleTabs extends React.Component { } render() { - const {activeTabKey, isBox } = this.state; + const { activeTabKey, isBox } = this.state; const tooltipRef = React.createRef(); return ( @@ -66,20 +144,30 @@ class SimpleTabs extends React.Component { ARIA Disabled} isAriaDisabled> ARIA Disabled - ARIA Disabled (Tooltip)} isAriaDisabled ref={tooltipRef}> + ARIA Disabled (Tooltip)} + isAriaDisabled + ref={tooltipRef} + aria-describedby="tooltip-tab-5" + > ARIA Disabled (Tooltip) - -
    + +
    + label="isBox" + isChecked={isBox} + onChange={this.toggleBox} + aria-label="show box variation checkbox" + id="toggle-box" + name="toggle-box" + />
    ); @@ -88,12 +176,12 @@ class SimpleTabs extends React.Component { ``` ### Uncontrolled + ```js import React from 'react'; import { Tabs, Tab, TabTitleText, Checkbox, Tooltip } from '@patternfly/react-core'; class UncontrolledSimpleTabs extends React.Component { - render() { const tooltipRef = React.createRef(); @@ -110,16 +198,24 @@ class UncontrolledSimpleTabs extends React.Component { Database     Disabled} isDisabled> - Disabled + Disabled ARIA Disabled} isAriaDisabled> ARIA Disabled - ARIA Disabled (Tooltip)} isAriaDisabled ref={tooltipRef}> + ARIA Disabled (Tooltip)} + isAriaDisabled + ref={tooltipRef} + > ARIA Disabled (Tooltip) - + ); } @@ -127,6 +223,7 @@ class UncontrolledSimpleTabs extends React.Component { ``` ### Box light variation + ```js import React from 'react'; import { Tabs, Tab, TabTitleText, Checkbox, Tooltip } from '@patternfly/react-core'; @@ -136,7 +233,7 @@ class SimpleTabs extends React.Component { super(props); this.state = { activeTabKey: 0, - isTabsLightScheme: true, + isTabsLightScheme: true }; // Toggle currently active tab this.handleTabClick = (event, tabIndex) => { @@ -153,12 +250,17 @@ class SimpleTabs extends React.Component { } render() { - const {activeTabKey, isBox, isTabsLightScheme } = this.state; + const { activeTabKey, isBox, isTabsLightScheme } = this.state; const tooltipRef = React.createRef(); return (
    - + Users}> Users @@ -174,20 +276,28 @@ class SimpleTabs extends React.Component { ARIA Disabled} isAriaDisabled> ARIA Disabled - ARIA Disabled (Tooltip)} isAriaDisabled ref={tooltipRef}> + ARIA Disabled (Tooltip)} + isAriaDisabled + ref={tooltipRef} + > ARIA Disabled (Tooltip) - -
    + +
    + label="Tabs light variation" + isChecked={isTabsLightScheme} + onChange={this.toggleScheme} + aria-label="show light scheme variation checkbox" + id="toggle-scheme" + name="toggle-scheme" + />
    ); @@ -196,6 +306,7 @@ class SimpleTabs extends React.Component { ``` ### Default overflow + ```js import React from 'react'; import { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core'; @@ -223,7 +334,7 @@ class ScrollButtonsPrimaryTabs extends React.Component { } render() { - const {activeTabKey, isBox} = this.state; + const { activeTabKey, isBox } = this.state; return (
    @@ -261,15 +372,15 @@ class ScrollButtonsPrimaryTabs extends React.Component { Tab 11 section -
    +
    + label="isBox" + isChecked={isBox} + onChange={this.toggleBox} + aria-label="show box variation checkbox on overflow" + id="toggle-box-overflow" + name="toggle-box-overflow" + />
    ); @@ -278,6 +389,7 @@ class ScrollButtonsPrimaryTabs extends React.Component { ``` ### Vertical + ```js import React from 'react'; import { Tabs, Tab, TabTitleText, Checkbox, Tooltip } from '@patternfly/react-core'; @@ -304,7 +416,7 @@ class VerticalTabs extends React.Component { } render() { - const {activeTabKey, isBox} = this.state; + const { activeTabKey, isBox } = this.state; const tooltipRef = React.createRef(); return (
    @@ -324,20 +436,29 @@ class VerticalTabs extends React.Component { ARIA Disabled} isAriaDisabled> ARIA Disabled - ARIA Disabled (Tooltip)} isAriaDisabled ref={tooltipRef}> + ARIA Disabled (Tooltip)} + isAriaDisabled + ref={tooltipRef} + > ARIA Disabled (Tooltip) - -
    + +
    + label="isBox" + isChecked={isBox} + onChange={this.toggleBox} + aria-label="show box variation checkbox with vertical" + id="toggle-box-vertical" + name="toggle-box-vertical" + />
    ); @@ -346,6 +467,7 @@ class VerticalTabs extends React.Component { ``` ### Vertical expandable + ```js import React from 'react'; import { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core'; @@ -369,34 +491,43 @@ class VerticalExpandableTabs extends React.Component { }; } render() { - const {activeTabKey, isExpanded} = this.state; + const { activeTabKey, isExpanded } = this.state; return ( - - Users}> - Users - - Containers}> - Containers - - Database}> - Database - - Server}> - Server - - System}> - System - - Network}> - Network - - + + Users}> + Users + + Containers}> + Containers + + Database}> + Database + + Server}> + Server + + System}> + System + + Network}> + Network + + ); } } ``` ### Vertical expandable uncontrolled + ```js import React from 'react'; import { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core'; @@ -414,34 +545,42 @@ class VerticalExpandableUncontrolledTabs extends React.Component { }; } render() { - const {activeTabKey} = this.state; + const { activeTabKey } = this.state; return ( - - Users}> - Users - - Containers}> - Containers - - Database}> - Database - - Server}> - Server - - System}> - System - - Network}> - Network - - + + Users}> + Users + + Containers}> + Containers + + Database}> + Database + + Server}> + Server + + System}> + System + + Network}> + Network + + ); } } ``` ### Inset + ```js import React from 'react'; import { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core'; @@ -468,16 +607,20 @@ class InsetTabs extends React.Component { } render() { - const {activeTabKey, isBox} = this.state; + const { activeTabKey, isBox } = this.state; return (
    - + Users}> Users @@ -497,15 +640,15 @@ class InsetTabs extends React.Component { Network -
    +
    + label="isBox" + isChecked={isBox} + onChange={this.toggleBox} + aria-label="show box variation checkbox with inset" + id="toggle-box-inset" + name="toggle-box-inset" + />
    ); @@ -514,6 +657,7 @@ class InsetTabs extends React.Component { ``` ### Page Insets + ```js import React from 'react'; import { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core'; @@ -540,11 +684,10 @@ class PageInsetsTabs extends React.Component { } render() { - const {activeTabKey, isBox} = this.state; + const { activeTabKey, isBox } = this.state; return (
    - + Users}> Users @@ -564,15 +707,15 @@ class PageInsetsTabs extends React.Component { Network -
    +
    + label="isBox" + isChecked={isBox} + onChange={this.toggleBox} + aria-label="show box variation checkbox with inset" + id="toggle-box-inset" + name="toggle-box-inset" + />
    ); @@ -581,6 +724,7 @@ class PageInsetsTabs extends React.Component { ``` ### Icons and text + ```js import React from 'react'; import { Tabs, Tab, TabTitleText, TabTitleIcon } from '@patternfly/react-core'; @@ -608,22 +752,82 @@ class IconAndTextTabs extends React.Component { render() { return ( - Users }> + + + + {' '} + Users{' '} + + } + > Users - Containers }> + + + + {' '} + Containers{' '} + + } + > Containers - Database }> + + + + {' '} + Database{' '} + + } + > Database - Server }> + + + + {' '} + Server{' '} + + } + > Server - System }> + + + + {' '} + System{' '} + + } + > System - Network }> + + + + {' '} + Network{' '} + + } + > Network @@ -633,6 +837,7 @@ class IconAndTextTabs extends React.Component { ``` ### Tabs with sub tabs + ```js import React from 'react'; import { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core'; @@ -666,78 +871,78 @@ class SecondaryTabs extends React.Component { } render() { - const {activeTabKey1, activeTabKey2, isBox} = this.state; + const { activeTabKey1, activeTabKey2, isBox } = this.state; return (
    - - Users}> - - Secondary tab item 1}> - Secondary tab item 1 item section - - Secondary tab item 2}> - Secondary tab item 2 section - - Secondary tab item 3}> - Secondary tab item 3 section - - Secondary tab item 4}> - Secondary tab item 4 section - - Secondary tab item 5}> - Secondary tab item 5 section - - Secondary tab item 6}> - Secondary tab item 6 section - - Secondary tab item 7}> - Secondary tab item 7 section - - Secondary tab item 8}> - Secondary tab item 8 section - - - - Containers}> - Containers - - Database}> - Database - - Server}> - Server - - System}> - System - - Network}> - Network - - Tab item 7}> - Tab 7 section - - Tab item 8}> - Tab 8 section - - Tab item 9}> - Tab 9 section - - Tab item 10}> - Tab 10 section - - Tab item 11}> - Tab 11 section - - -
    - + + Users}> + + Secondary tab item 1}> + Secondary tab item 1 item section + + Secondary tab item 2}> + Secondary tab item 2 section + + Secondary tab item 3}> + Secondary tab item 3 section + + Secondary tab item 4}> + Secondary tab item 4 section + + Secondary tab item 5}> + Secondary tab item 5 section + + Secondary tab item 6}> + Secondary tab item 6 section + + Secondary tab item 7}> + Secondary tab item 7 section + + Secondary tab item 8}> + Secondary tab item 8 section + + + + Containers}> + Containers + + Database}> + Database + + Server}> + Server + + System}> + System + + Network}> + Network + + Tab item 7}> + Tab 7 section + + Tab item 8}> + Tab 8 section + + Tab item 9}> + Tab 9 section + + Tab item 10}> + Tab 10 section + + Tab item 11}> + Tab 11 section + + +
    +
    ); @@ -746,6 +951,7 @@ class SecondaryTabs extends React.Component { ``` ### Filled + ```js import React from 'react'; import { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core'; @@ -772,29 +978,29 @@ class FilledTabs extends React.Component { } render() { - const {activeTabKey, isBox} = this.state; + const { activeTabKey, isBox } = this.state; return (
    - - Users}> - Users - - Containers}> - Containers - - Database}> - Database - - -
    - + + Users}> + Users + + Containers}> + Containers + + Database}> + Database + + +
    +
    ); @@ -803,6 +1009,7 @@ class FilledTabs extends React.Component { ``` ### Filled with icons + ```js import React from 'react'; import { Tabs, Tab, TabTitleText, TabTitleIcon, Checkbox } from '@patternfly/react-core'; @@ -832,29 +1039,59 @@ class FilledTabsWithIcons extends React.Component { } render() { - const {activeTabKey, isBox} = this.state; + const { activeTabKey, isBox } = this.state; return (
    - - Users }> - Users - - Containers }> - Containers - - Database }> - Database - - -
    - + + + + + {' '} + Users{' '} + + } + > + Users + + + + + {' '} + Containers{' '} + + } + > + Containers + + + + + {' '} + Database{' '} + + } + > + Database + + +
    +
    ); @@ -863,6 +1100,7 @@ class FilledTabsWithIcons extends React.Component { ``` ### Using the nav element + ```js import React from 'react'; import { Tabs, Tab, TabsComponent, TabTitleText } from '@patternfly/react-core'; @@ -890,7 +1128,7 @@ class TabsNav extends React.Component { aria-label="Local" component={TabsComponent.nav} > - Users} href="#users"> + Users} href="#users"> Users Containers} href="#containers"> @@ -914,8 +1152,8 @@ class TabsNav extends React.Component { } ``` - ### Sub nav using the nav element + ```js import React from 'react'; import { Tabs, Tab, TabsComponent, TabTitleText } from '@patternfly/react-core'; @@ -1001,6 +1239,7 @@ class SecondaryTabsNav extends React.Component { ``` ### Separate content + ```js import React from 'react'; import { Tabs, Tab, TabTitleText, TabContent } from '@patternfly/react-core'; @@ -1028,9 +1267,24 @@ class SeparateTabContent extends React.Component { return ( - Tab item 1} tabContentId="refTab1Section" tabContentRef={this.contentRef1} /> - Tab item 2}tabContentId="refTab2Section" tabContentRef={this.contentRef2} /> - Tab item 3} tabContentId="refTab3Section" tabContentRef={this.contentRef3} /> + Tab item 1} + tabContentId="refTab1Section" + tabContentRef={this.contentRef1} + /> + Tab item 2} + tabContentId="refTab2Section" + tabContentRef={this.contentRef2} + /> + Tab item 3} + tabContentId="refTab3Section" + tabContentRef={this.contentRef3} + />
    @@ -1050,13 +1304,14 @@ class SeparateTabContent extends React.Component { ``` ### Tab content with body and padding + ```js import React from 'react'; import { Tabs, Tab, TabTitleText, TabContent, TabContentBody } from '@patternfly/react-core'; const TabContentWithBody = () => { const [activeTabKey, setActiveTabKey] = React.useState(0); - + // Toggle currently active tab const handleTabClick = (event, tabIndex) => { setActiveTabKey(tabIndex); @@ -1069,9 +1324,24 @@ const TabContentWithBody = () => { return ( - Tab item 1} tabContentId="refTab1Section" tabContentRef={contentRef1} /> - Tab item 2}tabContentId="refTab2Section" tabContentRef={contentRef2} /> - Tab item 3} tabContentId="refTab3Section" tabContentRef={contentRef3} /> + Tab item 1} + tabContentId="refTab1Section" + tabContentRef={contentRef1} + /> + Tab item 2} + tabContentId="refTab2Section" + tabContentRef={contentRef2} + /> + Tab item 3} + tabContentId="refTab3Section" + tabContentRef={contentRef3} + />
    @@ -1086,10 +1356,11 @@ const TabContentWithBody = () => {
    ); -} +}; ``` ### Children mounting on click + ```js import React from 'react'; import { Tabs, Tab, TabTitleText } from '@patternfly/react-core'; @@ -1111,13 +1382,13 @@ class MountingSimpleTabs extends React.Component { render() { return ( - Tab item 1} > + Tab item 1}> Tab 1 section - Tab item 2} > + Tab item 2}> Tab 2 section - Tab item 3} > + Tab item 3}> Tab 3 section @@ -1127,6 +1398,7 @@ class MountingSimpleTabs extends React.Component { ``` ### Unmounting invisible children + ```js import React from 'react'; import { Tabs, Tab, TabTitleText } from '@patternfly/react-core'; @@ -1148,13 +1420,13 @@ class UnmountingSimpleTabs extends React.Component { render() { return ( - Tab item 1} > + Tab item 1}> Tab 1 section - Tab item 2} > + Tab item 2}> Tab 2 section - Tab item 3} > + Tab item 3}> Tab 3 section @@ -1164,6 +1436,7 @@ class UnmountingSimpleTabs extends React.Component { ``` ### Toggled separate content + ```js import React from 'react'; import { Tabs, Tab, TabContent, Button, Divider } from '@patternfly/react-core'; From 63d69d166c026a6d342bf466cca16f619b50a160 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Thu, 10 Feb 2022 12:28:31 -0500 Subject: [PATCH 2/4] Add notes to examples and new props --- packages/react-core/src/components/Tabs/Tab.tsx | 1 + packages/react-core/src/components/Tabs/TabButton.tsx | 1 + packages/react-core/src/components/Tabs/examples/Tabs.md | 4 ++++ 3 files changed, 6 insertions(+) diff --git a/packages/react-core/src/components/Tabs/Tab.tsx b/packages/react-core/src/components/Tabs/Tab.tsx index 143f9602f2f..bf0cf777c5b 100644 --- a/packages/react-core/src/components/Tabs/Tab.tsx +++ b/packages/react-core/src/components/Tabs/Tab.tsx @@ -31,6 +31,7 @@ export interface TabProps extends Omit; + /** Optional Tooltip rendered to a Tab. Should be with appropriate props for proper rendering. */ tooltip?: React.ReactElement; } diff --git a/packages/react-core/src/components/Tabs/TabButton.tsx b/packages/react-core/src/components/Tabs/TabButton.tsx index 53a59272998..a5f5d74d1d9 100644 --- a/packages/react-core/src/components/Tabs/TabButton.tsx +++ b/packages/react-core/src/components/Tabs/TabButton.tsx @@ -10,6 +10,7 @@ export interface TabButtonProps extends Omit; + /** Parents' innerRef passed down for properly displaying Tooltips */ parentInnerRef?: React.Ref; } diff --git a/packages/react-core/src/components/Tabs/examples/Tabs.md b/packages/react-core/src/components/Tabs/examples/Tabs.md index 936ee5ea3a6..d16b7da064b 100644 --- a/packages/react-core/src/components/Tabs/examples/Tabs.md +++ b/packages/react-core/src/components/Tabs/examples/Tabs.md @@ -21,6 +21,8 @@ Similarly the 'Tab content light variation' checkbox affects the TabContent back ### Default +The Tooltip component can also be passed in directly to the `tooltip` prop on the Tab component. + ```js import React from 'react'; import { Tabs, Tab, TabTitleText, Checkbox, Tooltip } from '@patternfly/react-core'; @@ -97,6 +99,8 @@ class SimpleTabs extends React.Component { ### With tooltip react ref +When using a React ref to add a Tooltip to a Tab component, an `id` must be manually set on the Tooltip component, and the Tab component should have a matching `aria-describedby` attribute. + ```js import React from 'react'; import { Tabs, Tab, TabTitleText, Checkbox, Tooltip } from '@patternfly/react-core'; From bb917fc471f4900d220b700f0439a7ef9f1dc7a3 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Tue, 15 Feb 2022 08:46:19 -0500 Subject: [PATCH 3/4] Update snapshots --- packages/react-core/src/components/Tabs/examples/Tabs.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-core/src/components/Tabs/examples/Tabs.md b/packages/react-core/src/components/Tabs/examples/Tabs.md index d16b7da064b..61f4a3d9b1d 100644 --- a/packages/react-core/src/components/Tabs/examples/Tabs.md +++ b/packages/react-core/src/components/Tabs/examples/Tabs.md @@ -21,7 +21,7 @@ Similarly the 'Tab content light variation' checkbox affects the TabContent back ### Default -The Tooltip component can also be passed in directly to the `tooltip` prop on the Tab component. +When passing in a Tooltip component to the Tab component, the Tooltip can also be passed in directly to the `tooltip` prop. ```js import React from 'react'; @@ -99,7 +99,7 @@ class SimpleTabs extends React.Component { ### With tooltip react ref -When using a React ref to add a Tooltip to a Tab component, an `id` must be manually set on the Tooltip component, and the Tab component should have a matching `aria-describedby` attribute. +When using a React ref to link a Tooltip to a Tab component, an `id` must be manually set on the Tooltip component, and the Tab component must have a matching `aria-describedby` attribute so that screen readers are able to announce the Tooltip contents. ```js import React from 'react'; From d747f64a5a407f48a9eb479fc817dcc82bbca8e5 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Fri, 4 Mar 2022 10:40:22 -0500 Subject: [PATCH 4/4] Update examples with tooltips --- .../src/components/Tabs/examples/Tabs.md | 32 ++++++++----------- 1 file changed, 13 insertions(+), 19 deletions(-) diff --git a/packages/react-core/src/components/Tabs/examples/Tabs.md b/packages/react-core/src/components/Tabs/examples/Tabs.md index 61f4a3d9b1d..f72694f9d17 100644 --- a/packages/react-core/src/components/Tabs/examples/Tabs.md +++ b/packages/react-core/src/components/Tabs/examples/Tabs.md @@ -187,7 +187,9 @@ import { Tabs, Tab, TabTitleText, Checkbox, Tooltip } from '@patternfly/react-co class UncontrolledSimpleTabs extends React.Component { render() { - const tooltipRef = React.createRef(); + const tooltip = ( + + ); return ( <> @@ -211,15 +213,11 @@ class UncontrolledSimpleTabs extends React.Component { eventKey={5} title={ARIA Disabled (Tooltip)} isAriaDisabled - ref={tooltipRef} + tooltip={tooltip} > ARIA Disabled (Tooltip) - ); } @@ -255,7 +253,9 @@ class SimpleTabs extends React.Component { render() { const { activeTabKey, isBox, isTabsLightScheme } = this.state; - const tooltipRef = React.createRef(); + const tooltip = ( + + ); return (
    @@ -284,15 +284,11 @@ class SimpleTabs extends React.Component { eventKey={5} title={ARIA Disabled (Tooltip)} isAriaDisabled - ref={tooltipRef} + tooltip={tooltip} > ARIA Disabled (Tooltip) -
    + ); + return (
    @@ -444,16 +443,11 @@ class VerticalTabs extends React.Component { eventKey={5} title={ARIA Disabled (Tooltip)} isAriaDisabled - ref={tooltipRef} + tooltip={tooltip} > ARIA Disabled (Tooltip) -