Skip to content

Commit e0a2c69

Browse files
committed
refactor(react-popover): inline dev-only warning at call site
- Remove nonInteractiveContentWarning constant from public API (constants.ts) - Inline warning message directly in console.warn() call in usePopover.ts - Removes logging noise from public API exports - Update tests to use inlined warning message instead of constant reference
1 parent 829d8de commit e0a2c69

3 files changed

Lines changed: 15 additions & 9 deletions

File tree

packages/react-components/react-popover/library/src/components/Popover/Popover.test.tsx

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { Popover } from './Popover';
33
import { renderHook, act } from '@testing-library/react-hooks';
44
import { usePopover_unstable } from './usePopover';
55
import { isConformant } from '../../testing/isConformant';
6-
import { nonInteractiveContentWarning } from './constants';
76
import type { PopoverProps } from './Popover.types';
87

98
describe('Popover', () => {
@@ -248,7 +247,9 @@ describe('Popover', () => {
248247

249248
rerender({ open: true });
250249

251-
expect(warnSpy).toHaveBeenCalledWith(nonInteractiveContentWarning);
250+
expect(warnSpy).toHaveBeenCalledWith(
251+
'Non-modal Popover with non-interactive content may not be announced by screen readers because focus remains on the trigger. Consider using Tooltip for informational content, or make the Popover content focusable if user interaction is expected.',
252+
);
252253
});
253254

254255
it('does not warn when popover opens with focusable content', () => {
@@ -273,7 +274,9 @@ describe('Popover', () => {
273274

274275
rerender({ open: true });
275276

276-
expect(warnSpy).not.toHaveBeenCalledWith(nonInteractiveContentWarning);
277+
expect(warnSpy).not.toHaveBeenCalledWith(
278+
'Non-modal Popover with non-interactive content may not be announced by screen readers because focus remains on the trigger. Consider using Tooltip for informational content, or make the Popover content focusable if user interaction is expected.',
279+
);
277280

278281
document.body.removeChild(content);
279282
});
@@ -299,7 +302,11 @@ describe('Popover', () => {
299302
rerender({ open: false });
300303
rerender({ open: true });
301304

302-
const matchingWarnings = warnSpy.mock.calls.filter(call => call[0] === nonInteractiveContentWarning);
305+
const matchingWarnings = warnSpy.mock.calls.filter(
306+
call =>
307+
call[0] ===
308+
'Non-modal Popover with non-interactive content may not be announced by screen readers because focus remains on the trigger. Consider using Tooltip for informational content, or make the Popover content focusable if user interaction is expected.',
309+
);
303310

304311
expect(matchingWarnings).toHaveLength(1);
305312
});

packages/react-components/react-popover/library/src/components/Popover/constants.ts

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,3 @@
88
* @internal
99
*/
1010
export const popoverSurfaceBorderRadius = 4;
11-
12-
export const nonInteractiveContentWarning =
13-
'Non-modal Popover with non-interactive content may not be announced by screen readers because focus remains on the trigger. Consider using Tooltip for informational content, or make the Popover content focusable if user interaction is expected.';

packages/react-components/react-popover/library/src/components/Popover/usePopover.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import {
2020
import { useFocusFinders, useActivateModal } from '@fluentui/react-tabster';
2121
import { arrowHeights } from '../PopoverSurface/index';
2222
import type { OpenPopoverEvents, PopoverProps, PopoverState } from './Popover.types';
23-
import { nonInteractiveContentWarning, popoverSurfaceBorderRadius } from './constants';
23+
import { popoverSurfaceBorderRadius } from './constants';
2424
import { presenceMotionSlot } from '@fluentui/react-motion';
2525
import { PopoverSurfaceMotion } from './PopoverSurfaceMotion';
2626

@@ -196,7 +196,9 @@ export const usePopover_unstable = (props: PopoverProps): PopoverState => {
196196
}
197197

198198
// eslint-disable-next-line no-console
199-
console.warn(nonInteractiveContentWarning);
199+
console.warn(
200+
'Non-modal Popover with non-interactive content may not be announced by screen readers because focus remains on the trigger. Consider using Tooltip for informational content, or make the Popover content focusable if user interaction is expected.',
201+
);
200202
hasWarnedForNonFocusableContent.current = true;
201203
}
202204
}, [findFirstFocusable, open, positioningRefs.contentRef]);

0 commit comments

Comments
 (0)