Skip to content

Disable focus on non-interactive elements #27580

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

Merged
krkshitij merged 4 commits into from
Apr 24, 2023
Merged

Disable focus on non-interactive elements #27580

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
adff1ac
disable focus on non-interactive elements
krkshitij Apr 16, 2023
a79f673
add change file
krkshitij Apr 16, 2023
fe20cfe
replace requestAnimationFrame with ResizeObserver
krkshitij Apr 18, 2023
94b78ce
rename component
krkshitij Apr 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions change/@fluentui-react-charting-02e2c197-f212-4bf8-9772-927edb4e640f.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "Disable focus on non-interactive elements",
"packageName": "@fluentui/react-charting",
"email": "[email protected]",
"dependentChangeType": "patch"
}
20 changes: 7 additions & 13 deletions packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 { FocusableTooltipText } from '../../utilities/FocusableTooltipText';

const getClassNames = classNamesFunction<IHorizontalBarChartStyleProps, IHorizontalBarChartStyles>();

Expand Down Expand Up @@ -100,15 +100,11 @@ export class HorizontalBarChartBase extends React.Component<IHorizontalBarChartP
<FocusZone direction={FocusZoneDirection.horizontal}>
<div className={this._classNames.chartTitle}>
{points!.chartTitle && (
<TooltipHost
overflowMode={TooltipOverflowMode.Self}
hostClassName={this._classNames.chartTitleLeft}
<FocusableTooltipText
className={this._classNames.chartTitleLeft}
content={points!.chartTitle}
>
<span {...getAccessibleDataObject(points!.chartTitleAccessibilityData)}>
{points!.chartTitle}
</span>
</TooltipHost>
accessibilityData={points!.chartTitleAccessibilityData}
/>
)}
{chartDataText}
</div>
Expand Down Expand Up @@ -225,9 +221,7 @@ export class HorizontalBarChartBase extends React.Component<IHorizontalBarChartP

private _getChartDataText = (data: IChartProps) => {
return this.props.barChartCustomData ? (
<div data-is-focusable={true} role="text">
{this.props.barChartCustomData(data)}
</div>
<div role="text">{this.props.barChartCustomData(data)}</div>
) : (
this._getDefaultTextData(data)
);
Expand All @@ -240,7 +234,7 @@ export class HorizontalBarChartBase extends React.Component<IHorizontalBarChartP
const x = chartData.horizontalBarChartdata!.x;
const y = chartData.horizontalBarChartdata!.y;

const accessibilityData = getAccessibleDataObject(data.chartDataAccessibilityData!);
const accessibilityData = getAccessibleDataObject(data.chartDataAccessibilityData!, 'text', false);
switch (chartDataMode) {
case 'default':
return (
Expand Down
24 changes: 12 additions & 12 deletions ...charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
role="none"
>
<span
data-is-focusable={true}
data-is-focusable={false}
role="text"
>
one
Expand Down Expand Up @@ -96,7 +96,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
Expand Down Expand Up @@ -231,7 +231,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
role="none"
>
<span
data-is-focusable={true}
data-is-focusable={false}
role="text"
>
two
Expand Down Expand Up @@ -263,7 +263,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
Expand Down Expand Up @@ -574,7 +574,7 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
role="none"
>
<span
data-is-focusable={true}
data-is-focusable={false}
role="text"
>
one
Expand Down Expand Up @@ -606,7 +606,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
Expand Down Expand Up @@ -741,7 +741,7 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
role="none"
>
<span
data-is-focusable={true}
data-is-focusable={false}
role="text"
>
two
Expand Down Expand Up @@ -773,7 +773,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
Expand Down Expand Up @@ -1004,7 +1004,7 @@ exports[`HorizontalBarChart snapShot testing Should not render bar labels in abs
role="none"
>
<span
data-is-focusable={true}
data-is-focusable={false}
role="text"
>
one
Expand Down Expand Up @@ -1136,7 +1136,7 @@ exports[`HorizontalBarChart snapShot testing Should not render bar labels in abs
role="none"
>
<span
data-is-focusable={true}
data-is-focusable={false}
role="text"
>
two
Expand Down Expand Up @@ -1285,7 +1285,7 @@ exports[`HorizontalBarChart snapShot testing Should render absolute-scale varian
role="none"
>
<span
data-is-focusable={true}
data-is-focusable={false}
role="text"
>
one
Expand Down Expand Up @@ -1435,7 +1435,7 @@ exports[`HorizontalBarChart snapShot testing Should render absolute-scale varian
role="none"
>
<span
data-is-focusable={true}
data-is-focusable={false}
role="text"
>
two
Expand Down
17 changes: 7 additions & 10 deletions packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 { FocusableTooltipText } from '../../utilities/FocusableTooltipText';

const getClassNames = classNamesFunction<IMultiStackedBarChartStyleProps, IMultiStackedBarChartStyles>();

Expand Down Expand Up @@ -258,7 +258,6 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
dominantBaseline="central"
transform={`translate(${this._isRTL ? -4 : 4})`}
className={this._classNames.barLabel}
data-is-focusable={true}
aria-label={`Total: ${barTotalValue}`}
role="img"
>
Expand Down Expand Up @@ -297,16 +296,14 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
<FocusZone direction={FocusZoneDirection.horizontal}>
<div className={this._classNames.chartTitle}>
{data!.chartTitle && (
<TooltipHost
overflowMode={TooltipOverflowMode.Self}
hostClassName={this._classNames.chartTitleLeft}
<FocusableTooltipText
className={this._classNames.chartTitleLeft}
content={data!.chartTitle}
>
<span {...getAccessibleDataObject(data!.chartTitleAccessibilityData)}>{data!.chartTitle}</span>
</TooltipHost>
accessibilityData={data!.chartTitleAccessibilityData}
/>
)}
{showRatio && (
<div {...getAccessibleDataObject(data!.chartDataAccessibilityData)}>
<div {...getAccessibleDataObject(data!.chartDataAccessibilityData, 'text', false)}>
<span className={this._classNames.ratioNumerator}>{getChartData()}</span>
{!hideDenominator && (
<span className={this._classNames.ratioDenominator}>
Expand All @@ -318,7 +315,7 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
{showNumber && (
<div
className={this._classNames.ratioNumerator}
{...getAccessibleDataObject(data!.chartDataAccessibilityData)}
{...getAccessibleDataObject(data!.chartDataAccessibilityData, 'text', false)}
>
{getChartData()}
</div>
Expand Down
16 changes: 7 additions & 9 deletions packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 { FocusableTooltipText } from '../../utilities/FocusableTooltipText';

const getClassNames = classNamesFunction<IStackedBarChartStyleProps, IStackedBarChartStyles>();
export interface IStackedBarChartState {
Expand Down Expand Up @@ -107,16 +107,14 @@ export class StackedBarChartBase extends React.Component<IStackedBarChartProps,
<FocusZone direction={FocusZoneDirection.horizontal}>
<div className={this._classNames.chartTitle}>
{data!.chartTitle && (
<TooltipHost
overflowMode={TooltipOverflowMode.Self}
hostClassName={this._classNames.chartTitleLeft}
<FocusableTooltipText
className={this._classNames.chartTitleLeft}
content={data!.chartTitle}
>
<span {...getAccessibleDataObject(data!.chartTitleAccessibilityData)}>{data!.chartTitle}</span>
</TooltipHost>
accessibilityData={data!.chartTitleAccessibilityData}
/>
)}
{showRatio && (
<div {...getAccessibleDataObject(data!.chartDataAccessibilityData)}>
<div {...getAccessibleDataObject(data!.chartDataAccessibilityData, 'text', false)}>
<span className={this._classNames.ratioNumerator}>{getChartData()}</span>
{!this.props.hideDenominator && (
<span className={this._classNames.ratioDenominator}>
Expand All @@ -128,7 +126,7 @@ export class StackedBarChartBase extends React.Component<IStackedBarChartProps,
{showNumber && (
<div
className={this._classNames.ratioNumerator}
{...getAccessibleDataObject(data!.chartDataAccessibilityData)}
{...getAccessibleDataObject(data!.chartDataAccessibilityData, 'text', false)}
>
{getChartData()}
</div>
Expand Down
Loading