From adff1ac3c8d2c2a99aaa5261d4781c916d831045 Mon Sep 17 00:00:00 2001 From: Kumar Kshitij Date: Sun, 16 Apr 2023 13:36:24 +0530 Subject: [PATCH 1/4] disable focus on non-interactive elements --- .../HorizontalBarChart.base.tsx | 21 ++--- .../HorizontalBarChart.test.tsx.snap | 32 +++++--- .../MultiStackedBarChart.base.tsx | 18 ++-- .../StackedBarChart/StackedBarChart.base.tsx | 17 ++-- .../MultiStackedBarChart.test.tsx.snap | 82 +++++++++++-------- .../StackedBarChart.test.tsx.snap | 41 ++++++---- .../VerticalStackedBarChart.base.tsx | 1 - .../VerticalStackedBarChart.test.tsx.snap | 6 -- .../src/utilities/ChartTitle.tsx | 69 ++++++++++++++++ 9 files changed, 187 insertions(+), 100 deletions(-) create mode 100644 packages/react-charting/src/utilities/ChartTitle.tsx diff --git a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx index 7427b3660216e..0b381f69de411 100644 --- a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx +++ b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx @@ -14,8 +14,8 @@ import { import { Callout, DirectionalHint } from '@fluentui/react/lib/Callout'; import { ChartHoverCard, convertToLocaleString, getAccessibleDataObject } from '../../utilities/index'; import { FocusZone, FocusZoneDirection } from '@fluentui/react-focus'; -import { TooltipHost, TooltipOverflowMode } from '@fluentui/react'; import { formatPrefix as d3FormatPrefix } from 'd3-format'; +import { ChartTitle } from '../../utilities/ChartTitle'; const getClassNames = classNamesFunction(); @@ -100,15 +100,12 @@ export class HorizontalBarChartBase extends React.Component
{points!.chartTitle && ( - - - {points!.chartTitle} - - + {points!.chartTitle} + )} {chartDataText}
@@ -225,9 +222,7 @@ export class HorizontalBarChartBase extends React.Component { return this.props.barChartCustomData ? ( -
- {this.props.barChartCustomData(data)} -
+
{this.props.barChartCustomData(data)}
) : ( this._getDefaultTextData(data) ); @@ -240,7 +235,7 @@ export class HorizontalBarChartBase extends React.Component one @@ -96,7 +97,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo font-size: 14px; font-weight: 600; } - data-is-focusable={true} + data-is-focusable={false} role="text" > 1,543 @@ -231,8 +232,9 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo role="none" > two @@ -263,7 +265,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo font-size: 14px; font-weight: 600; } - data-is-focusable={true} + data-is-focusable={false} role="text" > 800 @@ -574,8 +576,9 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m role="none" > one @@ -606,7 +609,7 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m font-size: 14px; font-weight: 600; } - data-is-focusable={true} + data-is-focusable={false} role="text" > 1,543 @@ -741,8 +744,9 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m role="none" > two @@ -773,7 +777,7 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m font-size: 14px; font-weight: 600; } - data-is-focusable={true} + data-is-focusable={false} role="text" > 800 @@ -1004,8 +1008,9 @@ exports[`HorizontalBarChart snapShot testing Should not render bar labels in abs role="none" > one @@ -1136,8 +1141,9 @@ exports[`HorizontalBarChart snapShot testing Should not render bar labels in abs role="none" > two @@ -1285,8 +1291,9 @@ exports[`HorizontalBarChart snapShot testing Should render absolute-scale varian role="none" > one @@ -1435,8 +1442,9 @@ exports[`HorizontalBarChart snapShot testing Should render absolute-scale varian role="none" > two diff --git a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx index eef7f841fd278..300ab52397ce4 100644 --- a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx +++ b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx @@ -14,8 +14,8 @@ import { import { Callout, DirectionalHint } from '@fluentui/react/lib/Callout'; import { FocusZone, FocusZoneDirection } from '@fluentui/react-focus'; import { ChartHoverCard, convertToLocaleString, getAccessibleDataObject } from '../../utilities/index'; -import { TooltipHost, TooltipOverflowMode } from '@fluentui/react'; import { formatPrefix as d3FormatPrefix } from 'd3-format'; +import { ChartTitle } from '../../utilities/ChartTitle'; const getClassNames = classNamesFunction(); @@ -258,7 +258,6 @@ export class MultiStackedBarChartBase extends React.Component @@ -297,16 +296,15 @@ export class MultiStackedBarChartBase extends React.Component
{data!.chartTitle && ( - - {data!.chartTitle} - + {data!.chartTitle} + )} {showRatio && ( -
+
{getChartData()} {!hideDenominator && ( @@ -318,7 +316,7 @@ export class MultiStackedBarChartBase extends React.Component {getChartData()}
diff --git a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx index 54ddd468de6d9..7c6a855df06e9 100644 --- a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx +++ b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx @@ -7,7 +7,7 @@ import { IRefArrayData, IStackedBarChartProps, IStackedBarChartStyleProps, IStac import { Callout, DirectionalHint } from '@fluentui/react/lib/Callout'; import { FocusZone, FocusZoneDirection } from '@fluentui/react-focus'; import { ChartHoverCard, convertToLocaleString, getAccessibleDataObject } from '../../utilities/index'; -import { TooltipHost, TooltipOverflowMode } from '@fluentui/react'; +import { ChartTitle } from '../../utilities/ChartTitle'; const getClassNames = classNamesFunction(); export interface IStackedBarChartState { @@ -107,16 +107,15 @@ export class StackedBarChartBase extends React.Component
{data!.chartTitle && ( - - {data!.chartTitle} - + {data!.chartTitle} + )} {showRatio && ( -
+
{getChartData()} {!this.props.hideDenominator && ( @@ -128,7 +127,7 @@ export class StackedBarChartBase extends React.Component {getChartData()}
diff --git a/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap b/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap index 8d619ca410f83..f4ec544ff4b46 100644 --- a/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap +++ b/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap @@ -72,8 +72,9 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on role="none" > Monitored @@ -97,7 +98,7 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
Unmonitored @@ -303,7 +305,7 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
Monitored @@ -761,7 +764,7 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
Unmonitored @@ -967,7 +971,7 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
Monitored @@ -1491,8 +1496,9 @@ exports[`MultiStackedBarChart snapShot testing Should not render bar labels in a role="none" > Unmonitored @@ -1758,8 +1764,9 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari role="none" > Monitored @@ -1882,7 +1889,6 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari font-size: 12px; font-weight: 600; } - data-is-focusable={true} dominantBaseline="central" role="img" transform="translate(4)" @@ -1950,8 +1956,9 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari role="none" > Unmonitored @@ -2074,7 +2081,6 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari font-size: 12px; font-weight: 600; } - data-is-focusable={true} dominantBaseline="central" role="img" transform="translate(4)" @@ -2235,8 +2241,9 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr role="none" > Monitored @@ -2260,7 +2267,7 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
Unmonitored @@ -2460,7 +2468,7 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
Monitored @@ -2753,7 +2762,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
Unmonitored @@ -2943,7 +2953,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
Monitored @@ -3226,7 +3237,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
Unmonitored @@ -3426,7 +3438,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
Monitored @@ -3797,8 +3810,9 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] = role="none" > Unmonitored @@ -3822,7 +3836,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
Monitored @@ -4296,7 +4311,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
Unmonitored @@ -4496,7 +4512,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
Stacked bar chart 2nd example @@ -84,7 +85,7 @@ exports[`StackedBarChart - mouse events Should render callout correctly on mouse
Stacked bar chart 2nd example @@ -454,7 +456,7 @@ exports[`StackedBarChart - mouse events Should render customized callout on mous
Stacked bar chart 2nd example @@ -741,7 +744,7 @@ exports[`StackedBarChart snapShot testing renders StackedBarChart correctly 1`]
Stacked bar chart 2nd example @@ -948,7 +952,7 @@ exports[`StackedBarChart snapShot testing renders enabledLegendsWrapLines correc
Stacked bar chart 2nd example @@ -1155,7 +1160,7 @@ exports[`StackedBarChart snapShot testing renders hideDenominator correctly 1`]
Stacked bar chart 2nd example @@ -1352,7 +1358,7 @@ exports[`StackedBarChart snapShot testing renders hideLegend correctly 1`] = `
Stacked bar chart 2nd example @@ -1715,8 +1722,9 @@ exports[`StackedBarChart snapShot testing renders hideTooltip correctly 1`] = ` role="none" > Stacked bar chart 2nd example @@ -1740,7 +1748,7 @@ exports[`StackedBarChart snapShot testing renders hideTooltip correctly 1`] = `
Stacked bar chart 2nd example diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx index fd6d11de38ae0..8f87e8191df4b 100644 --- a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx +++ b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx @@ -826,7 +826,6 @@ export class VerticalStackedBarChartBase extends React.Component< y={yPoint - 6} textAnchor="middle" className={this._classNames.barLabel} - data-is-focusable={true} aria-label={`Total: ${barTotalValue}`} role="img" transform={`translate(${xScaleBandwidthTranslate}, 0)`} diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap b/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap index f65548423df86..c08589f1d6b27 100644 --- a/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap +++ b/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap @@ -162,7 +162,6 @@ exports[`VerticalStackedBarChart - mouse events Should render callout correctly font-size: 12px; font-weight: 600; } - data-is-focusable={true} role="img" textAnchor="middle" transform="translate(0, 0)" @@ -236,7 +235,6 @@ exports[`VerticalStackedBarChart - mouse events Should render callout correctly font-size: 12px; font-weight: 600; } - data-is-focusable={true} role="img" textAnchor="middle" transform="translate(0, 0)" @@ -810,7 +808,6 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout font-size: 12px; font-weight: 600; } - data-is-focusable={true} role="img" textAnchor="middle" transform="translate(0, 0)" @@ -884,7 +881,6 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout font-size: 12px; font-weight: 600; } - data-is-focusable={true} role="img" textAnchor="middle" transform="translate(0, 0)" @@ -1367,7 +1363,6 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout font-size: 12px; font-weight: 600; } - data-is-focusable={true} role="img" textAnchor="middle" transform="translate(0, 0)" @@ -1432,7 +1427,6 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout font-size: 12px; font-weight: 600; } - data-is-focusable={true} role="img" textAnchor="middle" transform="translate(0, 0)" diff --git a/packages/react-charting/src/utilities/ChartTitle.tsx b/packages/react-charting/src/utilities/ChartTitle.tsx new file mode 100644 index 0000000000000..2f38033a74480 --- /dev/null +++ b/packages/react-charting/src/utilities/ChartTitle.tsx @@ -0,0 +1,69 @@ +import * as React from 'react'; +import { hasOverflow, ITooltipHostProps, TooltipHost, TooltipOverflowMode } from '@fluentui/react'; +import { getAccessibleDataObject } from './index'; +import { IAccessibilityProps } from '../types/index'; + +interface IChartTitleProps { + className?: ITooltipHostProps['hostClassName']; + accessibilityData?: IAccessibilityProps; + children?: ITooltipHostProps['content']; +} + +interface IChartTitleState { + textOverflow: boolean; +} + +export class ChartTitle extends React.Component { + private _titleRef = React.createRef(); + private _reqId: number; + + constructor(props: IChartTitleProps) { + super(props); + + this.state = { + textOverflow: false, + }; + } + + public render(): React.ReactNode { + const { className, accessibilityData, children } = this.props; + + return ( + + + {children} + + + ); + } + + public componentDidMount(): void { + this._reqId = requestAnimationFrame(this._checkTextOverflow); + } + + public componentWillUnmount(): void { + cancelAnimationFrame(this._reqId); + } + + private _checkTextOverflow = (): void => { + const overflowElement = this._getTargetElement(); + const textOverflow = !!overflowElement && hasOverflow(overflowElement); + if (textOverflow !== this.state.textOverflow) { + this.setState({ textOverflow }); + } + + this._reqId = requestAnimationFrame(this._checkTextOverflow); + }; + + private _getTargetElement = (): HTMLElement | undefined => { + if (!this._titleRef.current || !this._titleRef.current.parentElement) { + return undefined; + } + + return this._titleRef.current.parentElement; + }; +} From a79f67378dcd371f7d44ac6fdee45bdb01957ef4 Mon Sep 17 00:00:00 2001 From: Kumar Kshitij Date: Sun, 16 Apr 2023 13:38:08 +0530 Subject: [PATCH 2/4] add change file --- ...eact-charting-02e2c197-f212-4bf8-9772-927edb4e640f.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-charting-02e2c197-f212-4bf8-9772-927edb4e640f.json diff --git a/change/@fluentui-react-charting-02e2c197-f212-4bf8-9772-927edb4e640f.json b/change/@fluentui-react-charting-02e2c197-f212-4bf8-9772-927edb4e640f.json new file mode 100644 index 0000000000000..3984dc268c471 --- /dev/null +++ b/change/@fluentui-react-charting-02e2c197-f212-4bf8-9772-927edb4e640f.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Disable focus on non-interactive elements", + "packageName": "@fluentui/react-charting", + "email": "kumarkshitij@microsoft.com", + "dependentChangeType": "patch" +} From fe20cfeff8be95916596241cea6ca3d4280d8816 Mon Sep 17 00:00:00 2001 From: Kumar Kshitij Date: Wed, 19 Apr 2023 00:02:00 +0530 Subject: [PATCH 3/4] replace requestAnimationFrame with ResizeObserver --- .../HorizontalBarChart.base.tsx | 9 +-- .../MultiStackedBarChart.base.tsx | 9 +-- .../StackedBarChart/StackedBarChart.base.tsx | 9 +-- .../src/utilities/ChartTitle.tsx | 69 ----------------- .../src/utilities/HTMLTooltipText.tsx | 77 +++++++++++++++++++ 5 files changed, 89 insertions(+), 84 deletions(-) delete mode 100644 packages/react-charting/src/utilities/ChartTitle.tsx create mode 100644 packages/react-charting/src/utilities/HTMLTooltipText.tsx diff --git a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx index 0b381f69de411..2e0cc9d8faa48 100644 --- a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx +++ b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx @@ -15,7 +15,7 @@ import { Callout, DirectionalHint } from '@fluentui/react/lib/Callout'; import { ChartHoverCard, convertToLocaleString, getAccessibleDataObject } from '../../utilities/index'; import { FocusZone, FocusZoneDirection } from '@fluentui/react-focus'; import { formatPrefix as d3FormatPrefix } from 'd3-format'; -import { ChartTitle } from '../../utilities/ChartTitle'; +import { HTMLTooltipText } from '../../utilities/HTMLTooltipText'; const getClassNames = classNamesFunction(); @@ -100,12 +100,11 @@ export class HorizontalBarChartBase extends React.Component
{points!.chartTitle && ( - - {points!.chartTitle} - + /> )} {chartDataText}
diff --git a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx index 300ab52397ce4..ceb585052e637 100644 --- a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx +++ b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx @@ -15,7 +15,7 @@ import { Callout, DirectionalHint } from '@fluentui/react/lib/Callout'; import { FocusZone, FocusZoneDirection } from '@fluentui/react-focus'; import { ChartHoverCard, convertToLocaleString, getAccessibleDataObject } from '../../utilities/index'; import { formatPrefix as d3FormatPrefix } from 'd3-format'; -import { ChartTitle } from '../../utilities/ChartTitle'; +import { HTMLTooltipText } from '../../utilities/HTMLTooltipText'; const getClassNames = classNamesFunction(); @@ -296,12 +296,11 @@ export class MultiStackedBarChartBase extends React.Component
{data!.chartTitle && ( - - {data!.chartTitle} - + /> )} {showRatio && (
diff --git a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx index 7c6a855df06e9..6fd1be08ad604 100644 --- a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx +++ b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx @@ -7,7 +7,7 @@ import { IRefArrayData, IStackedBarChartProps, IStackedBarChartStyleProps, IStac import { Callout, DirectionalHint } from '@fluentui/react/lib/Callout'; import { FocusZone, FocusZoneDirection } from '@fluentui/react-focus'; import { ChartHoverCard, convertToLocaleString, getAccessibleDataObject } from '../../utilities/index'; -import { ChartTitle } from '../../utilities/ChartTitle'; +import { HTMLTooltipText } from '../../utilities/HTMLTooltipText'; const getClassNames = classNamesFunction(); export interface IStackedBarChartState { @@ -107,12 +107,11 @@ export class StackedBarChartBase extends React.Component
{data!.chartTitle && ( - - {data!.chartTitle} - + /> )} {showRatio && (
diff --git a/packages/react-charting/src/utilities/ChartTitle.tsx b/packages/react-charting/src/utilities/ChartTitle.tsx deleted file mode 100644 index 2f38033a74480..0000000000000 --- a/packages/react-charting/src/utilities/ChartTitle.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import * as React from 'react'; -import { hasOverflow, ITooltipHostProps, TooltipHost, TooltipOverflowMode } from '@fluentui/react'; -import { getAccessibleDataObject } from './index'; -import { IAccessibilityProps } from '../types/index'; - -interface IChartTitleProps { - className?: ITooltipHostProps['hostClassName']; - accessibilityData?: IAccessibilityProps; - children?: ITooltipHostProps['content']; -} - -interface IChartTitleState { - textOverflow: boolean; -} - -export class ChartTitle extends React.Component { - private _titleRef = React.createRef(); - private _reqId: number; - - constructor(props: IChartTitleProps) { - super(props); - - this.state = { - textOverflow: false, - }; - } - - public render(): React.ReactNode { - const { className, accessibilityData, children } = this.props; - - return ( - - - {children} - - - ); - } - - public componentDidMount(): void { - this._reqId = requestAnimationFrame(this._checkTextOverflow); - } - - public componentWillUnmount(): void { - cancelAnimationFrame(this._reqId); - } - - private _checkTextOverflow = (): void => { - const overflowElement = this._getTargetElement(); - const textOverflow = !!overflowElement && hasOverflow(overflowElement); - if (textOverflow !== this.state.textOverflow) { - this.setState({ textOverflow }); - } - - this._reqId = requestAnimationFrame(this._checkTextOverflow); - }; - - private _getTargetElement = (): HTMLElement | undefined => { - if (!this._titleRef.current || !this._titleRef.current.parentElement) { - return undefined; - } - - return this._titleRef.current.parentElement; - }; -} diff --git a/packages/react-charting/src/utilities/HTMLTooltipText.tsx b/packages/react-charting/src/utilities/HTMLTooltipText.tsx new file mode 100644 index 0000000000000..1c3e80837e757 --- /dev/null +++ b/packages/react-charting/src/utilities/HTMLTooltipText.tsx @@ -0,0 +1,77 @@ +import * as React from 'react'; +import { hasOverflow, ITooltipHostProps, TooltipHost, TooltipOverflowMode } from '@fluentui/react'; +import { getAccessibleDataObject } from './index'; +import { IAccessibilityProps } from '../types/index'; +import { Async } from '../Utilities'; + +interface IHTMLTooltipTextProps { + className?: ITooltipHostProps['hostClassName']; + content?: ITooltipHostProps['content']; + accessibilityData?: IAccessibilityProps; +} + +interface IHTMLTooltipTextState { + textOverflow: boolean; +} + +export class HTMLTooltipText extends React.Component { + private _tooltipChild = React.createRef(); + private _resizeObserver?: ResizeObserver; + private _async: Async; + + constructor(props: IHTMLTooltipTextProps) { + super(props); + + this.state = { + textOverflow: false, + }; + + this._async = new Async(this); + } + + public render(): React.ReactNode { + const { className, content, accessibilityData } = this.props; + + return ( + + + {content} + + + ); + } + + public componentDidMount(): void { + const overflowElement = this._getTargetElement(); + if (window.ResizeObserver && overflowElement) { + this._resizeObserver = new ResizeObserver(this._async.debounce(this._checkTextOverflow, 500)); + this._resizeObserver.observe(overflowElement); + } + } + + public componentWillUnmount(): void { + this._resizeObserver?.disconnect(); + this._async.dispose(); + } + + private _checkTextOverflow = (): void => { + const overflowElement = this._getTargetElement(); + const textOverflow = !!overflowElement && hasOverflow(overflowElement); + if (textOverflow !== this.state.textOverflow) { + this.setState({ textOverflow }); + } + }; + + private _getTargetElement = (): HTMLElement | undefined => { + if (!this._tooltipChild.current || !this._tooltipChild.current.parentElement) { + return undefined; + } + + return this._tooltipChild.current.parentElement; + }; +} From 94b78ceba4cedc3537d551a37039be0691464e15 Mon Sep 17 00:00:00 2001 From: Kumar Kshitij Date: Mon, 24 Apr 2023 15:31:14 +0530 Subject: [PATCH 4/4] rename component --- .../HorizontalBarChart.base.tsx | 4 ++-- .../HorizontalBarChart.test.tsx.snap | 8 -------- .../MultiStackedBarChart.base.tsx | 4 ++-- .../StackedBarChart/StackedBarChart.base.tsx | 4 ++-- .../MultiStackedBarChart.test.tsx.snap | 18 ------------------ .../StackedBarChart.test.tsx.snap | 9 --------- ...ooltipText.tsx => FocusableTooltipText.tsx} | 13 ++++++++----- 7 files changed, 14 insertions(+), 46 deletions(-) rename packages/react-charting/src/utilities/{HTMLTooltipText.tsx => FocusableTooltipText.tsx} (84%) diff --git a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx index 2e0cc9d8faa48..29f0e0c2efc8b 100644 --- a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx +++ b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx @@ -15,7 +15,7 @@ import { Callout, DirectionalHint } from '@fluentui/react/lib/Callout'; import { ChartHoverCard, convertToLocaleString, getAccessibleDataObject } from '../../utilities/index'; import { FocusZone, FocusZoneDirection } from '@fluentui/react-focus'; import { formatPrefix as d3FormatPrefix } from 'd3-format'; -import { HTMLTooltipText } from '../../utilities/HTMLTooltipText'; +import { FocusableTooltipText } from '../../utilities/FocusableTooltipText'; const getClassNames = classNamesFunction(); @@ -100,7 +100,7 @@ export class HorizontalBarChartBase extends React.Component
{points!.chartTitle && ( - one @@ -234,7 +233,6 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo two @@ -578,7 +576,6 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m one @@ -746,7 +743,6 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m two @@ -1010,7 +1006,6 @@ exports[`HorizontalBarChart snapShot testing Should not render bar labels in abs one @@ -1143,7 +1138,6 @@ exports[`HorizontalBarChart snapShot testing Should not render bar labels in abs two @@ -1293,7 +1287,6 @@ exports[`HorizontalBarChart snapShot testing Should render absolute-scale varian one @@ -1444,7 +1437,6 @@ exports[`HorizontalBarChart snapShot testing Should render absolute-scale varian two diff --git a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx index ceb585052e637..900834299ee67 100644 --- a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx +++ b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx @@ -15,7 +15,7 @@ import { Callout, DirectionalHint } from '@fluentui/react/lib/Callout'; import { FocusZone, FocusZoneDirection } from '@fluentui/react-focus'; import { ChartHoverCard, convertToLocaleString, getAccessibleDataObject } from '../../utilities/index'; import { formatPrefix as d3FormatPrefix } from 'd3-format'; -import { HTMLTooltipText } from '../../utilities/HTMLTooltipText'; +import { FocusableTooltipText } from '../../utilities/FocusableTooltipText'; const getClassNames = classNamesFunction(); @@ -296,7 +296,7 @@ export class MultiStackedBarChartBase extends React.Component
{data!.chartTitle && ( - (); export interface IStackedBarChartState { @@ -107,7 +107,7 @@ export class StackedBarChartBase extends React.Component
{data!.chartTitle && ( - Monitored @@ -281,7 +280,6 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on Unmonitored @@ -740,7 +738,6 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on Monitored @@ -947,7 +944,6 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on Unmonitored @@ -1323,7 +1319,6 @@ exports[`MultiStackedBarChart snapShot testing Should not render bar labels in a Monitored @@ -1498,7 +1493,6 @@ exports[`MultiStackedBarChart snapShot testing Should not render bar labels in a Unmonitored @@ -1766,7 +1760,6 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari Monitored @@ -1958,7 +1951,6 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari Unmonitored @@ -2243,7 +2235,6 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr Monitored @@ -2444,7 +2435,6 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr Unmonitored @@ -2738,7 +2728,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly Monitored @@ -2929,7 +2918,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly Unmonitored @@ -3213,7 +3201,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`] Monitored @@ -3414,7 +3401,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`] Unmonitored @@ -3637,7 +3623,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] = Monitored @@ -3812,7 +3797,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] = Unmonitored @@ -4287,7 +4271,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`] Monitored @@ -4488,7 +4471,6 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`] Unmonitored diff --git a/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChart.test.tsx.snap b/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChart.test.tsx.snap index 6109131ff37af..e97b8b9e5af37 100644 --- a/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChart.test.tsx.snap +++ b/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChart.test.tsx.snap @@ -61,7 +61,6 @@ exports[`StackedBarChart - mouse events Should render callout correctly on mouse Stacked bar chart 2nd example @@ -432,7 +431,6 @@ exports[`StackedBarChart - mouse events Should render customized callout on mous Stacked bar chart 2nd example @@ -720,7 +718,6 @@ exports[`StackedBarChart snapShot testing renders StackedBarChart correctly 1`] Stacked bar chart 2nd example @@ -928,7 +925,6 @@ exports[`StackedBarChart snapShot testing renders enabledLegendsWrapLines correc Stacked bar chart 2nd example @@ -1136,7 +1132,6 @@ exports[`StackedBarChart snapShot testing renders hideDenominator correctly 1`] Stacked bar chart 2nd example @@ -1334,7 +1329,6 @@ exports[`StackedBarChart snapShot testing renders hideLegend correctly 1`] = ` Stacked bar chart 2nd example @@ -1542,7 +1536,6 @@ exports[`StackedBarChart snapShot testing renders hideNumberDisplay correctly 1` Stacked bar chart 2nd example @@ -1724,7 +1717,6 @@ exports[`StackedBarChart snapShot testing renders hideTooltip correctly 1`] = ` Stacked bar chart 2nd example @@ -1932,7 +1924,6 @@ exports[`StackedBarChart snapShot testing renders ignoreFixStyle correctly 1`] = Stacked bar chart 2nd example diff --git a/packages/react-charting/src/utilities/HTMLTooltipText.tsx b/packages/react-charting/src/utilities/FocusableTooltipText.tsx similarity index 84% rename from packages/react-charting/src/utilities/HTMLTooltipText.tsx rename to packages/react-charting/src/utilities/FocusableTooltipText.tsx index 1c3e80837e757..96e4d270a8472 100644 --- a/packages/react-charting/src/utilities/HTMLTooltipText.tsx +++ b/packages/react-charting/src/utilities/FocusableTooltipText.tsx @@ -4,22 +4,26 @@ import { getAccessibleDataObject } from './index'; import { IAccessibilityProps } from '../types/index'; import { Async } from '../Utilities'; -interface IHTMLTooltipTextProps { +interface IFocusableTooltipTextProps { className?: ITooltipHostProps['hostClassName']; content?: ITooltipHostProps['content']; accessibilityData?: IAccessibilityProps; } -interface IHTMLTooltipTextState { +interface IFocusableTooltipTextState { textOverflow: boolean; } -export class HTMLTooltipText extends React.Component { +/** + * Component to make the text focusable when the overflowed content is clipped + * because of the CSS text-overflow property. + */ +export class FocusableTooltipText extends React.Component { private _tooltipChild = React.createRef(); private _resizeObserver?: ResizeObserver; private _async: Async; - constructor(props: IHTMLTooltipTextProps) { + constructor(props: IFocusableTooltipTextProps) { super(props); this.state = { @@ -38,7 +42,6 @@ export class HTMLTooltipText extends React.Component {content}