From 29926e9a9ce7a925ade7470d0f603066fa1f2b25 Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Fri, 21 Apr 2023 13:13:33 -0700 Subject: [PATCH 1/5] fix: TooltipHost supports accessible overflow tooltips --- .../Tooltip/Tooltip.Overflow.Example.tsx | 42 +++++++++++++++---- .../components/Tooltip/TooltipHost.base.tsx | 7 +++- .../components/Tooltip/TooltipHost.types.ts | 12 ++++++ 3 files changed, 52 insertions(+), 9 deletions(-) diff --git a/packages/react-examples/src/react/Tooltip/Tooltip.Overflow.Example.tsx b/packages/react-examples/src/react/Tooltip/Tooltip.Overflow.Example.tsx index d4866ddfa8ed04..3f44aa06c94b4f 100644 --- a/packages/react-examples/src/react/Tooltip/Tooltip.Overflow.Example.tsx +++ b/packages/react-examples/src/react/Tooltip/Tooltip.Overflow.Example.tsx @@ -11,6 +11,9 @@ const contentParent = const contentSelf = "If the TooltipHost's content overflows, hovering here will show a tooltip (anchored to the TooltipHost)."; +const contentLink = + "If the link's content overflows, hovering or focusing here will show a tooltip (anchored to the TooltipHost)."; + // The TooltipHost uses display: inline by default, which causes issues with this example's // styling and layout. Use display: block instead. (other styles are just to look nice) const theme = getTheme(); @@ -32,12 +35,16 @@ const classNames = mergeStyleSets({ border: '2px dashed ' + theme.palette.neutralTertiary, selectors: { '> *:last-child': { marginTop: 10 } }, }, + // links are inline by default, so this allows the link to have overflow styles + link: { + display: 'inline-block', + }, }); export const TooltipOverflowExample: React.FunctionComponent = () => { const parentTooltipId = useId('text-tooltip'); const [shouldOverflow, setShouldOverflow] = React.useState(false); - const [isParentTooltipVisible, setIsParentTooltipVisible] = React.useState(false); + const linkRef = React.useRef(null); const onOverflowChange = React.useCallback(() => setShouldOverflow(!shouldOverflow), [shouldOverflow]); @@ -48,6 +55,10 @@ export const TooltipOverflowExample: React.FunctionComponent = () => { {/* Example of TooltipOverflowMode.Parent */}
+

+ Warning! This is not keyboard accessible, and should only be done when users have another method to access the + content. +

{/* This parent element will overflow */}
@@ -56,14 +67,10 @@ export const TooltipOverflowExample: React.FunctionComponent = () => { overflowMode={TooltipOverflowMode.Parent} // In a case like this, you should usually display the non-truncated content in the tooltip. content={contentParent} - // If targeting the tooltip to the parent, it's necessary to manually set and remove - // aria-describedby for the content when the tooltip is shown/hidden - onTooltipToggle={setIsParentTooltipVisible} id={parentTooltipId} styles={hostStyles} > - This is the TooltipHost area.{' '} - {contentParent} + This is the TooltipHost area. {contentParent}
@@ -71,19 +78,38 @@ export const TooltipOverflowExample: React.FunctionComponent = () => { {/* Example of TooltipOverflowMode.Self */}
+

+ Warning! This is not keyboard accessible, and should only be done when users have another method to access the + content. +

This is the TooltipHost area. {contentSelf}
+ + {/* Example of TooltipOverflowMode.Custom */} +
+ +

Note: This is the only way to create an overflow tooltip that is keyboard-accessible.

+ + + + This is a link in the TooltipHost area. {contentLink} + + +
); }; diff --git a/packages/react/src/components/Tooltip/TooltipHost.base.tsx b/packages/react/src/components/Tooltip/TooltipHost.base.tsx index 39175c58acb404..a3167f83fe6921 100644 --- a/packages/react/src/components/Tooltip/TooltipHost.base.tsx +++ b/packages/react/src/components/Tooltip/TooltipHost.base.tsx @@ -149,7 +149,7 @@ export class TooltipHostBase extends React.Component Date: Fri, 21 Apr 2023 13:31:12 -0700 Subject: [PATCH 2/5] update api --- packages/react/etc/react.api.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react/etc/react.api.md b/packages/react/etc/react.api.md index 8e12a477b06bd6..e0f5042524092b 100644 --- a/packages/react/etc/react.api.md +++ b/packages/react/etc/react.api.md @@ -9469,6 +9469,7 @@ export interface ITooltipHostProps extends Omit; content?: string | JSX.Element | JSX.Element[]; + customOverflowTarget?: HTMLElement; delay?: TooltipDelay; directionalHint?: DirectionalHint; directionalHintForRTL?: DirectionalHint; @@ -11300,6 +11301,7 @@ export class TooltipHostBase extends React_2.Component Date: Fri, 21 Apr 2023 13:47:51 -0700 Subject: [PATCH 3/5] change file --- ...luentui-react-4d88449d-bf95-4d68-97d6-aac8295938bf.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-4d88449d-bf95-4d68-97d6-aac8295938bf.json diff --git a/change/@fluentui-react-4d88449d-bf95-4d68-97d6-aac8295938bf.json b/change/@fluentui-react-4d88449d-bf95-4d68-97d6-aac8295938bf.json new file mode 100644 index 00000000000000..e769e2c68f5052 --- /dev/null +++ b/change/@fluentui-react-4d88449d-bf95-4d68-97d6-aac8295938bf.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "fix: TooltipHost supports an accessible way to implement overflow tooltips\"", + "packageName": "@fluentui/react", + "email": "sarah.higley@microsoft.com", + "dependentChangeType": "patch" +} From a232505311e5316a9f63e6723fdbaf57a388b10b Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Fri, 21 Apr 2023 15:25:12 -0700 Subject: [PATCH 4/5] fix type issue --- packages/react/etc/react.api.md | 2 +- packages/react/src/components/Tooltip/TooltipHost.types.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/etc/react.api.md b/packages/react/etc/react.api.md index e0f5042524092b..143eea0af596b7 100644 --- a/packages/react/etc/react.api.md +++ b/packages/react/etc/react.api.md @@ -9469,7 +9469,7 @@ export interface ITooltipHostProps extends Omit; content?: string | JSX.Element | JSX.Element[]; - customOverflowTarget?: HTMLElement; + customOverflowTarget?: HTMLElement | null; delay?: TooltipDelay; directionalHint?: DirectionalHint; directionalHintForRTL?: DirectionalHint; diff --git a/packages/react/src/components/Tooltip/TooltipHost.types.ts b/packages/react/src/components/Tooltip/TooltipHost.types.ts index 30ece4d98a9c88..14e549e4894bee 100644 --- a/packages/react/src/components/Tooltip/TooltipHost.types.ts +++ b/packages/react/src/components/Tooltip/TooltipHost.types.ts @@ -75,7 +75,7 @@ export interface ITooltipHostProps extends Omit Date: Sat, 29 Apr 2023 07:50:50 -0700 Subject: [PATCH 5/5] Change file Co-authored-by: Esteban Munoz Facusse --- .../@fluentui-react-4d88449d-bf95-4d68-97d6-aac8295938bf.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/change/@fluentui-react-4d88449d-bf95-4d68-97d6-aac8295938bf.json b/change/@fluentui-react-4d88449d-bf95-4d68-97d6-aac8295938bf.json index e769e2c68f5052..1487065ebf0477 100644 --- a/change/@fluentui-react-4d88449d-bf95-4d68-97d6-aac8295938bf.json +++ b/change/@fluentui-react-4d88449d-bf95-4d68-97d6-aac8295938bf.json @@ -1,6 +1,6 @@ { "type": "minor", - "comment": "fix: TooltipHost supports an accessible way to implement overflow tooltips\"", + "comment": "fix(TooltipHost): TooltipHost supports an accessible way to implement overflow tooltips", "packageName": "@fluentui/react", "email": "sarah.higley@microsoft.com", "dependentChangeType": "patch"