From ce1b7cc5404a591b49d7d9026e4a01609db92e88 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Fri, 21 Jul 2023 16:33:54 -0700 Subject: [PATCH 1/4] fix: Only apply modal attributes if the PopoverSurface traps focus. --- .../src/components/PopoverSurface/usePopoverSurface.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurface.ts b/packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurface.ts index 425f6fec93691b..7f4400c24aa891 100644 --- a/packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurface.ts +++ b/packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurface.ts @@ -48,7 +48,7 @@ export const usePopoverSurface_unstable = ( ref: useMergedRefs(ref, contentRef), role: trapFocus ? 'dialog' : 'group', 'aria-modal': trapFocus ? true : undefined, - ...modalAttributes, + ...(trapFocus ? modalAttributes : {}), ...props, }), }; From 969d7195c2a40a030a228a7d0ad9de07346c425f Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Fri, 21 Jul 2023 16:34:24 -0700 Subject: [PATCH 2/4] change file --- ...react-popover-fe679067-7ac1-4e5f-84bc-528f6f0d3865.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-popover-fe679067-7ac1-4e5f-84bc-528f6f0d3865.json diff --git a/change/@fluentui-react-popover-fe679067-7ac1-4e5f-84bc-528f6f0d3865.json b/change/@fluentui-react-popover-fe679067-7ac1-4e5f-84bc-528f6f0d3865.json new file mode 100644 index 00000000000000..11d3927c387372 --- /dev/null +++ b/change/@fluentui-react-popover-fe679067-7ac1-4e5f-84bc-528f6f0d3865.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix(react-popover): Only apply modal attributes if the PopoverSurface traps focus.", + "packageName": "@fluentui/react-popover", + "email": "esteban.230@hotmail.com", + "dependentChangeType": "patch" +} From 905aca5bd7fc2b42a6c32d5348a8622b07ca6c78 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Mon, 14 Aug 2023 15:55:24 -0700 Subject: [PATCH 3/4] update snapshot --- .../PopoverSurface/__snapshots__/PopoverSurface.test.tsx.snap | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react-components/react-popover/src/components/PopoverSurface/__snapshots__/PopoverSurface.test.tsx.snap b/packages/react-components/react-popover/src/components/PopoverSurface/__snapshots__/PopoverSurface.test.tsx.snap index bad1f93ae7068e..3bb7e104373959 100644 --- a/packages/react-components/react-popover/src/components/PopoverSurface/__snapshots__/PopoverSurface.test.tsx.snap +++ b/packages/react-components/react-popover/src/components/PopoverSurface/__snapshots__/PopoverSurface.test.tsx.snap @@ -4,7 +4,6 @@ exports[`PopoverSurface renders a default state 1`] = `
From 390c1d2dbc1d7e55caa7308ccb4651ece5fd2931 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Mon, 14 Aug 2023 15:57:23 -0700 Subject: [PATCH 4/4] revert charting changes --- .../src/components/AreaChart/AreaChart.base.tsx | 6 +++--- .../components/DonutChart/DonutChart.base.tsx | 2 +- .../components/DonutChart/DonutChart.test.tsx | 4 ++-- .../GroupedVerticalBarChart.base.tsx | 2 +- .../HorizontalBarChart.base.tsx | 2 +- .../src/components/LineChart/LineChart.base.tsx | 6 +++--- .../src/components/PieChart/PieChart.test.tsx | 4 ++-- .../MultiStackedBarChart.base.tsx | 16 ++++++++-------- .../StackedBarChart/StackedBarChart.base.tsx | 8 ++++---- .../StackedBarChart/StackedBarChart.test.tsx | 4 ++-- .../VerticalBarChart/VerticalBarChart.base.tsx | 4 ++-- .../VerticalStackedBarChart.base.tsx | 4 ++-- 12 files changed, 31 insertions(+), 31 deletions(-) diff --git a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx index 681322d11471a9..5a03d7c585b7c5 100644 --- a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx +++ b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx @@ -293,7 +293,7 @@ export class AreaChartBase extends React.Component { this._onLegendClick(singleChartData.legend); }, diff --git a/packages/react-charting/src/components/DonutChart/DonutChart.base.tsx b/packages/react-charting/src/components/DonutChart/DonutChart.base.tsx index 6914c3c8de5a7c..71280d92ae2966 100644 --- a/packages/react-charting/src/components/DonutChart/DonutChart.base.tsx +++ b/packages/react-charting/src/components/DonutChart/DonutChart.base.tsx @@ -213,7 +213,7 @@ export class DonutChartBase extends React.Component { if (this.state.selectedLegend === point.legend) { this.setState({ selectedLegend: '' }); diff --git a/packages/react-charting/src/components/DonutChart/DonutChart.test.tsx b/packages/react-charting/src/components/DonutChart/DonutChart.test.tsx index 3ef5451e6593f2..6a8cf183171a09 100644 --- a/packages/react-charting/src/components/DonutChart/DonutChart.test.tsx +++ b/packages/react-charting/src/components/DonutChart/DonutChart.test.tsx @@ -38,12 +38,12 @@ const points: IChartDataPoint[] = [ const chartTitle = 'Stacked Bar chart example'; export const chartPoints: IChartProps = { - chartTitle, + chartTitle: chartTitle, chartData: points, }; export const emptyChartPoints: IChartProps = { - chartTitle, + chartTitle: chartTitle, chartData: [], }; diff --git a/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx b/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx index 8ae8963f739582..5611bc8889648d 100644 --- a/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx +++ b/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx @@ -496,7 +496,7 @@ export class GroupedVerticalBarChartBase extends React.Component< } const legend: ILegend = { title: point.legend, - color, + color: color, action: () => { this._onLegendClick(point.legend); }, diff --git a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx index 0656cb25a00076..c9208fb9235334 100644 --- a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx +++ b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx @@ -186,7 +186,7 @@ export class HorizontalBarChartBase extends React.Component { if (isLegendMultiSelectEnabled) { this._handleMultipleLineLegendSelectionAction(point); diff --git a/packages/react-charting/src/components/PieChart/PieChart.test.tsx b/packages/react-charting/src/components/PieChart/PieChart.test.tsx index 846be9b531ab0e..71e6c02446ee51 100644 --- a/packages/react-charting/src/components/PieChart/PieChart.test.tsx +++ b/packages/react-charting/src/components/PieChart/PieChart.test.tsx @@ -72,7 +72,7 @@ describe('Render calling with respective to props', () => { const props = { data: chartPoints, height: 300, - colors, + colors: colors, }; const component = mount(); component.setProps({ ...props }); @@ -85,7 +85,7 @@ describe('Render calling with respective to props', () => { const props = { data: chartPoints, height: 300, - colors, + colors: colors, }; const component = mount(); component.setProps({ ...props, width: 600 }); diff --git a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx index 2f02a7d8a88050..551bdfa41da645 100644 --- a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx +++ b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx @@ -232,8 +232,8 @@ export class MultiStackedBarChartBase extends React.Component { this._onClick(point.legend!); }, @@ -455,7 +455,7 @@ export class MultiStackedBarChartBase extends React.Component { this._onClick(point.legend!); }, @@ -516,7 +516,7 @@ export class MultiStackedBarChartBase extends React.Component 0 ? () => { @@ -282,7 +282,7 @@ export class StackedBarChartBase extends React.Component { this._onLegendClick(point.legend!); }, diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx index 016611424d1a38..7dd1a5a5a85e94 100644 --- a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx +++ b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx @@ -527,7 +527,7 @@ export class VerticalStackedBarChartBase extends React.Component< const legend: ILegend = { title: point.legend, - color, + color: color, action: () => { this._onLegendClick(point.legend); }, @@ -766,7 +766,7 @@ export class VerticalStackedBarChartBase extends React.Component< const shouldHighlight = this._legendHighlighted(point.legend) || this._noLegendHighlighted() ? true : false; this._classNames = getClassNames(this.props.styles!, { theme: this.props.theme!, - shouldHighlight, + shouldHighlight: shouldHighlight, href: this.props.href, }); const rectFocusProps = !shouldFocusWholeStack && {