diff --git a/keep-ui/app/alerts/alert-table-headers.tsx b/keep-ui/app/alerts/alert-table-headers.tsx index e8e8dabbc..098d74e13 100644 --- a/keep-ui/app/alerts/alert-table-headers.tsx +++ b/keep-ui/app/alerts/alert-table-headers.tsx @@ -1,6 +1,6 @@ // culled from https://github.com/cpvalente/ontime/blob/master/apps/client/src/features/cuesheet/cuesheet-table-elements/CuesheetHeader.tsx -import { CSSProperties, ReactNode } from "react"; +import { CSSProperties, ReactNode, RefObject } from "react"; import { closestCenter, DndContext, @@ -137,12 +137,14 @@ interface Props { columns: ColumnDef[]; table: Table; presetName: string; + a11yContainerRef: RefObject; } export default function AlertsTableHeaders({ columns, table, presetName, + a11yContainerRef, }: Props) { const [columnOrder, setColumnOrder] = useLocalStorage( `column-order-${presetName}`, @@ -191,6 +193,9 @@ export default function AlertsTableHeaders({ sensors={sensors} collisionDetection={closestCenter} onDragEnd={onDragEnd} + accessibility={{ + container: a11yContainerRef.current ?? undefined, + }} > (null); + const [theme, setTheme] = useLocalStorage( "alert-table-theme", Object.values(severityMapping).reduce<{ [key: string]: string }>( @@ -326,11 +328,13 @@ export function AlertTable({ setSelectedTab={setSelectedTab} /> )} +