Skip to content

Update Drawers to do a proper focus trap #1290

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

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Update Drawers to do a proper focus trap #1290

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
24ae3c1
Update Drawers to do a proper focus trap
brandon-pereira Oct 23, 2025
23d8d26
add changeset
brandon-pereira Oct 23, 2025
a5083cf
remove unused dep
brandon-pereira Oct 23, 2025
023ebb1
fix failing e2e tests
brandon-pereira Oct 23, 2025
71a061d
ensure popovers are rendered in proper drawer portal context
brandon-pereira Oct 25, 2025
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
5 changes: 5 additions & 0 deletions .changeset/happy-spies-tickle.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@hyperdx/app": patch
---

improve drawer a11y
1 change: 0 additions & 1 deletion packages/app/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,6 @@
"react-hotkeys-hook": "^4.3.7",
"react-json-tree": "^0.17.0",
"react-markdown": "^8.0.4",
"react-modern-drawer": "^1.2.0",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤠

"react-papaparse": "^4.4.0",
"react-query": "^3.39.3",
"react-select": "^5.7.0",
Expand Down
2 changes: 0 additions & 2 deletions packages/app/src/KubernetesDashboardPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,6 @@ import { parseTimeQuery, useTimeQuery } from './timeQuery';
import { KubePhase } from './types';
import { formatNumber, formatUptime } from './utils';

import 'react-modern-drawer/dist/index.css';

const makeId = () => Math.floor(100000000 * Math.random()).toString(36);

const getKubePhaseNumber = (phase: string) => {
Expand Down
17 changes: 10 additions & 7 deletions packages/app/src/NamespaceDetailsSidePanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import * as React from 'react';
import Link from 'next/link';
import Drawer from 'react-modern-drawer';
import { StringParam, useQueryParam, withDefault } from 'use-query-params';
import { tcFromSource } from '@hyperdx/common-utils/dist/metadata';
import { TSource } from '@hyperdx/common-utils/dist/types';
Expand All @@ -9,6 +8,7 @@ import {
Badge,
Box,
Card,
Drawer,
Flex,
Grid,
ScrollArea,
Expand Down Expand Up @@ -334,14 +334,17 @@ export default function NamespaceDetailsSidePanel({

return (
<Drawer
enableOverlay
overlayOpacity={0.1}
duration={0}
open={!!namespaceName}
opened={!!namespaceName}
onClose={handleClose}
direction="right"
size={'80vw'}
position="right"
size="80vw"
withCloseButton={false}
zIndex={drawerZIndex}
styles={{
body: {
padding: 0,
},
}}
>
<ZIndexContext.Provider value={drawerZIndex}>
<div className={styles.panel}>
Expand Down
17 changes: 10 additions & 7 deletions packages/app/src/NodeDetailsSidePanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import * as React from 'react';
import Link from 'next/link';
import Drawer from 'react-modern-drawer';
import { StringParam, useQueryParam, withDefault } from 'use-query-params';
import { tcFromSource } from '@hyperdx/common-utils/dist/metadata';
import {
Expand All @@ -12,6 +11,7 @@ import {
Badge,
Box,
Card,
Drawer,
Flex,
Grid,
ScrollArea,
Expand Down Expand Up @@ -350,14 +350,17 @@ export default function NodeDetailsSidePanel({

return (
<Drawer
enableOverlay
overlayOpacity={0.1}
duration={0}
open={!!nodeName}
opened={!!nodeName}
onClose={handleClose}
direction="right"
size={'80vw'}
position="right"
size="80vw"
withCloseButton={false}
zIndex={drawerZIndex}
styles={{
body: {
padding: 0,
},
}}
>
<ZIndexContext.Provider value={drawerZIndex}>
<div className={styles.panel} data-testid="k8s-node-details-panel">
Expand Down
16 changes: 10 additions & 6 deletions packages/app/src/PodDetailsSidePanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import * as React from 'react';
import Link from 'next/link';
import Drawer from 'react-modern-drawer';
import { StringParam, useQueryParam, withDefault } from 'use-query-params';
import { tcFromSource } from '@hyperdx/common-utils/dist/metadata';
import { TSource } from '@hyperdx/common-utils/dist/types';
import {
Anchor,
Box,
Card,
Drawer,
Flex,
Grid,
ScrollArea,
Expand Down Expand Up @@ -342,14 +342,18 @@ export default function PodDetailsSidePanel({

return (
<Drawer
enableOverlay={rowId == null}
overlayOpacity={0.1}
duration={0}
open={!!podName}
opened={!!podName}
onClose={handleClose}
direction="right"
position="right"
size={isNested ? '70vw' : '80vw'}
withCloseButton={false}
zIndex={drawerZIndex}
styles={{
body: {
padding: 0,
height: '100vh',
},
}}
>
<ZIndexContext.Provider value={drawerZIndex}>
<div className={styles.panel} data-testid="k8s-pod-details-panel">
Expand Down
24 changes: 13 additions & 11 deletions packages/app/src/SessionSidePanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,20 @@ import { useState } from 'react';
import { Button } from 'react-bootstrap';
import CopyToClipboard from 'react-copy-to-clipboard';
import { useHotkeys } from 'react-hotkeys-hook';
import Drawer from 'react-modern-drawer';
import {
DateRange,
SearchCondition,
SearchConditionLanguage,
TSource,
} from '@hyperdx/common-utils/dist/types';
import { Drawer } from '@mantine/core';
import { notifications } from '@mantine/notifications';

import { Session } from './sessions';
import SessionSubpanel from './SessionSubpanel';
import { formatDistanceToNowStrictShort } from './utils';
import { ZIndexContext } from './zIndex';

import 'react-modern-drawer/dist/index.css';

export default function SessionSidePanel({
traceSource,
sessionSource,
Expand Down Expand Up @@ -74,20 +72,24 @@ export default function SessionSidePanel({

return (
<Drawer
customIdSuffix={`session-side-panel-${sessionId}`}
duration={0}
overlayOpacity={0.5}
open={sessionId != null}
opened={sessionId != null}
onClose={() => {
if (!subDrawerOpen) {
onClose();
}
}}
direction="right"
size={'82vw'}
style={{ background: '#0F1216' }}
className="border-start border-dark"
position="right"
size="82vw"
withCloseButton={false}
zIndex={zIndex}
styles={{
body: {
padding: 0,
background: '#0F1216',
height: '100vh',
},
}}
className="border-start border-dark"
>
<ZIndexContext.Provider value={zIndex}>
<div className="d-flex flex-column h-100">
Expand Down
103 changes: 53 additions & 50 deletions packages/app/src/components/DBRowSidePanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,9 @@ import { isString } from 'lodash';
import { parseAsStringEnum, useQueryState } from 'nuqs';
import { ErrorBoundary } from 'react-error-boundary';
import { useHotkeys } from 'react-hotkeys-hook';
import Drawer from 'react-modern-drawer';
import { TSource } from '@hyperdx/common-utils/dist/types';
import { ChartConfigWithDateRange } from '@hyperdx/common-utils/dist/types';
import { Box, OptionalPortal, Stack } from '@mantine/core';
import { Box, Drawer, Stack } from '@mantine/core';
import { useClickOutside } from '@mantine/hooks';

import DBRowSidePanelHeader, {
Expand All @@ -36,7 +35,6 @@ import { RowOverviewPanel } from './DBRowOverviewPanel';
import { DBSessionPanel, useSessionId } from './DBSessionPanel';
import DBTracePanel from './DBTracePanel';

import 'react-modern-drawer/dist/index.css';
import styles from '@/../styles/LogSidePanel.module.scss';

export type RowSidePanelContextProps = {
Expand Down Expand Up @@ -504,52 +502,57 @@ export default function DBRowSidePanelErrorBoundary({
}, ['mouseup', 'touchend']);

return (
<OptionalPortal withinPortal={!isNestedPanel}>
<Drawer
data-testid="row-side-panel"
customIdSuffix={`log-side-panel-${rowId}`}
duration={300}
open={rowId != null}
onClose={() => {
if (!subDrawerOpen) {
_onClose();
}
}}
direction="right"
size={`${width}vw`}
zIndex={drawerZIndex}
enableOverlay={subDrawerOpen}
>
<ZIndexContext.Provider value={drawerZIndex}>
<div className={styles.panel} ref={drawerRef}>
<Box className={styles.panelDragBar} onMouseDown={startResize} />

<ErrorBoundary
fallbackRender={error => (
<Stack>
<div className="text-danger px-2 py-1 m-2 fs-7 font-monospace bg-danger-transparent p-4">
An error occurred while rendering this event.
</div>

<div className="px-2 py-1 m-2 fs-7 font-monospace bg-dark-grey p-4">
{error?.error?.message}
</div>
</Stack>
)}
>
<DBRowSidePanel
source={source}
rowId={rowId}
onClose={_onClose}
isNestedPanel={isNestedPanel}
breadcrumbPath={breadcrumbPath}
setSubDrawerOpen={setSubDrawerOpen}
onBreadcrumbClick={onBreadcrumbClick}
/>
</ErrorBoundary>
</div>
</ZIndexContext.Provider>
</Drawer>
</OptionalPortal>
<Drawer
opened={rowId != null}
withCloseButton={false}
withinPortal={!isNestedPanel}
onClose={() => {
if (!subDrawerOpen) {
_onClose();
}
}}
position="right"
size={`${width}vw`}
styles={{
body: {
padding: '0',
height: '100vh',
},
}}
zIndex={drawerZIndex}
>
<ZIndexContext.Provider value={drawerZIndex}>
<div
className={styles.panel}
ref={drawerRef}
data-testid="row-side-panel"
>
<Box className={styles.panelDragBar} onMouseDown={startResize} />
<ErrorBoundary
fallbackRender={error => (
<Stack>
<div className="text-danger px-2 py-1 m-2 fs-7 font-monospace bg-danger-transparent p-4">
An error occurred while rendering this event.
</div>

<div className="px-2 py-1 m-2 fs-7 font-monospace bg-dark-grey p-4">
{error?.error?.message}
</div>
</Stack>
)}
>
<DBRowSidePanel
source={source}
rowId={rowId}
onClose={_onClose}
isNestedPanel={isNestedPanel}
breadcrumbPath={breadcrumbPath}
setSubDrawerOpen={setSubDrawerOpen}
onBreadcrumbClick={onBreadcrumbClick}
/>
</ErrorBoundary>
</div>
</ZIndexContext.Provider>
</Drawer>
);
}
1 change: 1 addition & 0 deletions packages/app/src/components/DBRowTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -897,6 +897,7 @@ export const RawLogTable = memo(
<DBRowTableFieldWithPopover
cellValue={cellValue}
wrapLinesEnabled={wrapLinesEnabled}
tableContainerRef={tableContainerRef}
columnName={
(cell.column.columnDef.meta as any)
?.column
Expand Down
4 changes: 3 additions & 1 deletion packages/app/src/components/DBTable/DBRowTableFieldWithPopover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,14 @@ export interface DBRowTableFieldWithPopoverProps {
cellValue: unknown;
wrapLinesEnabled: boolean;
columnName?: string;
tableContainerRef?: React.RefObject<HTMLDivElement>;
isChart?: boolean;
}

export const DBRowTableFieldWithPopover = ({
children,
cellValue,
tableContainerRef,
wrapLinesEnabled,
columnName,
isChart = false,
Expand Down Expand Up @@ -151,7 +153,7 @@ export const DBRowTableFieldWithPopover = ({
position="top-start"
offset={5}
opened={opened}
zIndex={1}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is great because I can see the popovers now, but I'm also seeing that the add / exclude filter buttons are not having an effect when in the side drawer other than closing the side drawer:

Screen.Recording.2025-10-25.at.11.36.27.AM.mov

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for testing it! I tested so many things to ensure the zindex worked, but didn't click it 😆 . The issue was the tooltips were rendering in a portal and now with the accessibility improvements, the drawer was auto-closing due to a click outside the modal. I fixed this by ensuring the tooltips render in the same container as the table, thus avoiding the portal click outside logic

portalProps={{ target: tableContainerRef?.current ?? undefined }}
>
<Popover.Target>
<span
Expand Down
16 changes: 9 additions & 7 deletions packages/app/src/components/PatternSidePanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import * as React from 'react';
import Drawer from 'react-modern-drawer';
import { JSDataType } from '@hyperdx/common-utils/dist/clickhouse';
import { TSource } from '@hyperdx/common-utils/dist/types';
import { Card, Stack, Text } from '@mantine/core';
import { Card, Drawer, Stack, Text } from '@mantine/core';

import DBRowSidePanel from '@/components/DBRowSidePanel';
import { RawLogTable } from '@/components/DBRowTable';
Expand Down Expand Up @@ -96,14 +95,17 @@ export default function PatternSidePanel({

return (
<Drawer
open={isOpen}
opened={isOpen}
onClose={selectedRowWhere ? handleCloseRowSidePanel : onClose}
direction="right"
position="right"
size="70vw"
withCloseButton={false}
zIndex={drawerZIndex}
enableOverlay={selectedRowWhere == null}
overlayOpacity={0.1}
duration={0}
styles={{
body: {
padding: 0,
},
}}
>
<ZIndexContext.Provider value={drawerZIndex}>
<div className={styles.panel}>
Expand Down
Loading
Loading