fix: render a11y stuff in a div outside of the <table/> (#2515)

Co-authored-by: Matvey Kukuy <[email protected]>
keephq · Nov 18, 2024 · f3f38ff · f3f38ff
1 parent d0ed6c9
commit f3f38ff
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git 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<AlertDto>[];
   table: Table<AlertDto>;
   presetName: string;
+  a11yContainerRef: RefObject<HTMLDivElement>;
 }
 
 export default function AlertsTableHeaders({
   columns,
   table,
   presetName,
+  a11yContainerRef,
 }: Props) {
   const [columnOrder, setColumnOrder] = useLocalStorage<ColumnOrderState>(
     `column-order-${presetName}`,
@@ -191,6 +193,9 @@ export default function AlertsTableHeaders({
           sensors={sensors}
           collisionDetection={closestCenter}
           onDragEnd={onDragEnd}
+          accessibility={{
+            container: a11yContainerRef.current ?? undefined,
+          }}
         >
           <TableRow key={headerGroup.id}>
             <SortableContext

diff --git a/keep-ui/app/alerts/alert-table.tsx b/keep-ui/app/alerts/alert-table.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { Table, Callout, Card } from "@tremor/react";
 import { AlertsTableBody } from "./alerts-table-body";
 import { AlertDto } from "./models";
@@ -71,6 +71,8 @@ export function AlertTable({
   setDismissedModalAlert,
   mutateAlerts,
 }: Props) {
+  const a11yContainerRef = useRef<HTMLDivElement>(null);
+
   const [theme, setTheme] = useLocalStorage(
     "alert-table-theme",
     Object.values(severityMapping).reduce<{ [key: string]: string }>(
@@ -326,11 +328,13 @@ export function AlertTable({
                   setSelectedTab={setSelectedTab}
                 />
               )}
+              <div ref={a11yContainerRef} className="sr-only" />
               <Table className="[&>table]:table-fixed [&>table]:w-full">
                 <AlertsTableHeaders
                   columns={columns}
                   table={table}
                   presetName={presetName}
+                  a11yContainerRef={a11yContainerRef}
                 />
                 <AlertsTableBody
                   table={table}