pl-fe: idk

Signed-off-by: Nicole Mikołajczyk <git@mkljczk.pl>

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}

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'>

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'