From 3ae25feddc459ec78d6c7ec80a54292b30ef5830 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicole=20Miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Thu, 27 Mar 2025 17:12:29 +0100
Subject: [PATCH] pl-fe: idk
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Nicole Mikołajczyk <git@mkljczk.pl>
---
 packages/pl-fe/src/components/status.tsx                   | 4 ++--
 .../src/features/notifications/components/notification.tsx | 7 +++++--
 packages/pl-fe/src/features/status/components/thread.tsx   | 2 +-
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/pl-fe/src/components/status.tsx b/packages/pl-fe/src/components/status.tsx
index b33f788d9..d35c6d3af 100644
--- a/packages/pl-fe/src/components/status.tsx
+++ b/packages/pl-fe/src/components/status.tsx
@@ -311,7 +311,7 @@ const Status: React.FC<IStatus> = (props) => {
     };
 
     return (
-      <HotKeys handlers={minHandlers}>
+      <HotKeys handlers={minHandlers} attach={node.current || undefined}>
         <div className={clsx('status__wrapper text-center', { focusable })} tabIndex={focusable ? 0 : undefined} ref={node}>
           <Text theme='muted'>
             <FormattedMessage id='status.filtered' defaultMessage='Filtered' />: {status.filtered.join(', ')}.
@@ -348,7 +348,7 @@ const Status: React.FC<IStatus> = (props) => {
   };
 
   return (
-    <HotKeys handlers={handlers} data-testid='status'>
+    <HotKeys handlers={handlers} data-testid='status' attach={node.current || undefined}>
       <div
         className={clsx('status cursor-pointer', { focusable })}
         tabIndex={focusable && !muted ? 0 : undefined}
diff --git a/packages/pl-fe/src/features/notifications/components/notification.tsx b/packages/pl-fe/src/features/notifications/components/notification.tsx
index eb45b271f..1ae4f09ff 100644
--- a/packages/pl-fe/src/features/notifications/components/notification.tsx
+++ b/packages/pl-fe/src/features/notifications/components/notification.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useRef } from 'react';
 import { defineMessages, useIntl, FormattedList, FormattedMessage, IntlShape, MessageDescriptor } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 
@@ -206,6 +206,8 @@ const Notification: React.FC<INotification> = (props) => {
   const { openModal } = useModalsStore();
   const { settings } = useSettingsStore();
 
+  const node = useRef<HTMLDivElement>(null);
+
   const notification = useAppSelector((state) => getNotification(state, props.notification));
   const status = getNotificationStatus(notification);
 
@@ -409,11 +411,12 @@ const Notification: React.FC<INotification> = (props) => {
   );
 
   return (
-    <HotKeys handlers={handlers} data-testid='notification'>
+    <HotKeys handlers={handlers} data-testid='notification' attach={node.current || undefined}>
       <div
         className='notification focusable'
         tabIndex={0}
         aria-label={ariaLabel}
+        ref={node}
       >
         <div className='focusable p-4'>
           <div className='mb-2'>
diff --git a/packages/pl-fe/src/features/status/components/thread.tsx b/packages/pl-fe/src/features/status/components/thread.tsx
index 0a3ce8ca9..e9109bde0 100644
--- a/packages/pl-fe/src/features/status/components/thread.tsx
+++ b/packages/pl-fe/src/features/status/components/thread.tsx
@@ -346,7 +346,7 @@ const Thread: React.FC<IThread> = ({
       {status.deleted ? (
         <Tombstone id={status.id} onMoveUp={handleMoveUp} onMoveDown={handleMoveDown} deleted />
       ) : (
-        <HotKeys handlers={handlers}>
+        <HotKeys handlers={handlers} attach={statusRef.current || undefined}>
           <div
             ref={statusRef}
             className='focusable relative'