feat: add focustrap for dialog and focus-within for buttons

package.json

@@ -92,6 +92,7 @@
     "emoji-mart": "^5.5.2",
     "filesize": "3.6.1",
     "firstline": "1.2.1",
+    "focus-trap-react": "^10.2.3",
     "fs-extra": "9.0.0",
     "glob": "7.1.2",
     "image-type": "^4.1.0",

ts/components/SessionWrapperModal.tsx

@@ -1,5 +1,6 @@
-import React, { useRef } from 'react';
 import classNames from 'classnames';
+import FocusTrap from 'focus-trap-react';
+import React, { useRef } from 'react';
 import useKey from 'react-use/lib/useKey';
 
 import { SessionIconButton } from './icon';
@@ -63,68 +64,72 @@ export const SessionWrapperModal = (props: SessionWrapperModalType) => {
   };
 
   return (
-    <div
-      className={classNames('loki-dialog modal', additionalClassName || null)}
-      onClick={handleClick}
-      role="dialog"
-    >
-      <div className="session-confirm-wrapper">
-        <div ref={modalRef} className="session-modal">
-          {showHeader ? (
-            <div className={classNames('session-modal__header', headerReverse && 'reverse')}>
-              <div className="session-modal__header__close">
-                {showExitIcon ? (
-                  <SessionIconButton
-                    iconType="exit"
-                    iconSize="small"
-                    onClick={props.onClose}
-                    dataTestId="modal-close-button"
-                  />
-                ) : null}
+    <FocusTrap focusTrapOptions={{ initialFocus: '#focus-trap-start' }}>
+      <div
+        className={classNames('loki-dialog modal', additionalClassName || null)}
+        onClick={handleClick}
+        role="dialog"
+      >
+        {/* FocusTrap needs a button always mounted as a start, which is apparently not our case */}
+        <button id="focus-trap-start" style={{ opacity: 0, width: 0, height: 0 }} />
+        <div className="session-confirm-wrapper">
+          <div ref={modalRef} className="session-modal">
+            {showHeader ? (
+              <div className={classNames('session-modal__header', headerReverse && 'reverse')}>
+                <div className="session-modal__header__close">
+                  {showExitIcon ? (
+                    <SessionIconButton
+                      iconType="exit"
+                      iconSize="small"
+                      onClick={props.onClose}
+                      dataTestId="modal-close-button"
+                    />
+                  ) : null}
+                </div>
+                <div className="session-modal__header__title">{title}</div>
+                <div className="session-modal__header__icons">
+                  {headerIconButtons
+                    ? headerIconButtons.map((iconItem: any) => {
+                        return (
+                          <SessionIconButton
+                            key={iconItem.iconType}
+                            iconType={iconItem.iconType}
+                            iconSize={'large'}
+                            iconRotation={iconItem.iconRotation}
+                            onClick={iconItem.onClick}
+                          />
+                        );
+                      })
+                    : null}
+                </div>
               </div>
-              <div className="session-modal__header__title">{title}</div>
-              <div className="session-modal__header__icons">
-                {headerIconButtons
-                  ? headerIconButtons.map((iconItem: any) => {
-                      return (
-                        <SessionIconButton
-                          key={iconItem.iconType}
-                          iconType={iconItem.iconType}
-                          iconSize={'large'}
-                          iconRotation={iconItem.iconRotation}
-                          onClick={iconItem.onClick}
-                        />
-                      );
-                    })
-                  : null}
-              </div>
-            </div>
-          ) : null}
+            ) : null}
 
-          <div className="session-modal__body">
-            <div className="session-modal__centered">
-              {props.children}
+            <div className="session-modal__body">
+              <div className="session-modal__centered">
+                {props.children}
 
-              <div className="session-modal__button-group">
-                {onConfirm ? (
-                  <SessionButton buttonType={SessionButtonType.Simple} onClick={props.onConfirm}>
-                    {confirmText || window.i18n('ok')}
-                  </SessionButton>
-                ) : null}
-                {onClose && showClose ? (
-                  <SessionButton
-                    buttonType={SessionButtonType.Simple}
-                    buttonColor={SessionButtonColor.Danger}
-                    onClick={props.onClose}
-                  >
-                    {cancelText || window.i18n('close')}
-                  </SessionButton>
-                ) : null}
+                <div className="session-modal__button-group">
+                  {onConfirm ? (
+                    <SessionButton buttonType={SessionButtonType.Simple} onClick={props.onConfirm}>
+                      {confirmText || window.i18n('ok')}
+                    </SessionButton>
+                  ) : null}
+                  {onClose && showClose ? (
+                    <SessionButton
+                      buttonType={SessionButtonType.Simple}
+                      buttonColor={SessionButtonColor.Danger}
+                      onClick={props.onClose}
+                    >
+                      {cancelText || window.i18n('close')}
+                    </SessionButton>
+                  ) : null}
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
+    </FocusTrap>
   );
 };

ts/components/basic/SessionButton.tsx

@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react';
 import classNames from 'classnames';
+import React, { ReactNode } from 'react';
 import styled from 'styled-components';
 
 export enum SessionButtonType {
@@ -28,7 +28,7 @@ export enum SessionButtonColor {
   None = 'transparent',
 }
 
-const StyledButton = styled.div<{
+const StyledButton = styled.button<{
   color: string | undefined;
   buttonType: SessionButtonType;
   buttonShape: SessionButtonShape;
@@ -67,6 +67,10 @@ const StyledButton = styled.div<{
     'box-shadow: 0px 0px 6px var(--button-solid-shadow-color);'}
   border-radius: ${props => (props.buttonShape === SessionButtonShape.Round ? '17px' : '6px')};
 
+  :focus-within {
+    outline: 1px var(--primary-color) dashed;
+  }
+
   .session-icon {
     fill: var(--background-primary-color);
   }

ts/components/basic/SessionRadio.tsx

@@ -21,6 +21,10 @@ const StyledInput = styled.input<{
           ? props.selectedColor
           : 'var(--primary-color)'};
   }
+
+  :focus-within + label:before {
+    outline: 1px var(--primary-color) dashed;
+  }
 `;
 
 // NOTE (Will): We don't use a transition because it's too slow and creates flickering when changing buttons.

ts/components/conversation/SessionConversation.tsx

@@ -53,10 +53,7 @@ import { LightboxGallery, MediaItemType } from '../lightbox/LightboxGallery';
 import { NoMessageInConversation } from './SubtleNotification';
 import { ConversationHeaderWithDetails } from './header/ConversationHeader';
 
-import {
-  deleteMessagesById,
-  deleteMessagesByIdForEveryone,
-} from '../../interactions/conversations/unsendingInteractions';
+import { deleteMessagesForX } from '../../interactions/conversations/unsendingInteractions';
 import { isAudio } from '../../types/MIME';
 import { HTMLDirection } from '../../util/i18n';
 import { NoticeBanner } from '../NoticeBanner';
@@ -361,14 +358,7 @@ export class SessionConversation extends React.Component<Props, State> {
         case 'Backspace':
         case 'Delete':
           if (selectionMode && this.props.selectedConversationKey) {
-            if (isPublic) {
-              void deleteMessagesByIdForEveryone(selectedMessages, selectedConversationKey);
-            } else {
-              void deleteMessagesById(
-                this.props.selectedMessages,
-                this.props.selectedConversationKey
-              );
-            }
+            void deleteMessagesForX(selectedMessages, selectedConversationKey, isPublic);
           }
           break;
         default:

ts/components/conversation/composition/CompositionButtons.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
-import { SessionIconButton } from '../../icon';
 import { Noop } from '../../../types/Util';
+import { SessionIconButton } from '../../icon';
 
 const StyledChatButtonContainer = styled.div`
   .session-icon-button {
@@ -50,7 +50,7 @@ export const StartRecordingButton = (props: { onClick: Noop }) => {
 };
 
 // eslint-disable-next-line react/display-name
-export const ToggleEmojiButton = React.forwardRef<HTMLDivElement, { onClick: Noop }>(
+export const ToggleEmojiButton = React.forwardRef<HTMLButtonElement, { onClick: Noop }>(
   (props, ref) => {
     return (
       <StyledChatButtonContainer>

ts/components/conversation/header/ConversationHeaderSelectionOverlay.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import { useKey } from 'react-use';
 import {
   deleteMessagesById,
   deleteMessagesByIdForEveryone,
+  deleteMessagesForX,
 } from '../../../interactions/conversations/unsendingInteractions';
 import { resetSelectedMessageIds } from '../../../state/ducks/conversations';
 import { getSelectedMessageIds } from '../../../state/selectors/conversations';
@@ -33,6 +35,25 @@ export const SelectionOverlay = () => {
   const isPublic = useSelectedIsPublic();
   const dispatch = useDispatch();
 
+  useKey('Delete', event => {
+    const selectionMode = !!selectedMessageIds.length;
+
+    switch (event.key) {
+      case 'Escape':
+        if (selectionMode) {
+          dispatch(resetSelectedMessageIds());
+        }
+        break;
+      case 'Backspace':
+      case 'Delete':
+        if (selectionMode && selectedConversationKey) {
+          void deleteMessagesForX(selectedMessageIds, selectedConversationKey, isPublic);
+        }
+        break;
+      default:
+    }
+  });
+
   function onCloseOverlay() {
     dispatch(resetSelectedMessageIds());
   }

ts/components/conversation/message/message-content/MessageContextMenu.tsx

@@ -10,10 +10,7 @@ import { Data } from '../../../../data/data';
 
 import { MessageInteraction } from '../../../../interactions';
 import { replyToMessage } from '../../../../interactions/conversationInteractions';
-import {
-  deleteMessagesById,
-  deleteMessagesByIdForEveryone,
-} from '../../../../interactions/conversations/unsendingInteractions';
+import { deleteMessagesForX } from '../../../../interactions/conversations/unsendingInteractions';
 import {
   addSenderAsModerator,
   removeSenderFromModerator,
@@ -97,14 +94,9 @@ const DeleteItem = ({ messageId }: { messageId: string }) => {
 
   const onDelete = useCallback(() => {
     if (convoId) {
-      if (!isPublic && isDeletable) {
-        void deleteMessagesById([messageId], convoId);
-      }
-      if (isPublic && isDeletableForEveryone) {
-        void deleteMessagesByIdForEveryone([messageId], convoId);
-      }
+      void deleteMessagesForX([messageId], convoId, isPublic);
     }
-  }, [convoId, isDeletable, isDeletableForEveryone, isPublic, messageId]);
+  }, [convoId, isPublic, messageId]);
 
   if (!convoId || (isPublic && !isDeletableForEveryone) || (!isPublic && !isDeletable)) {
     return null;

ts/components/conversation/right-panel/RightPanel.tsx

@@ -21,11 +21,13 @@ export const StyledRightPanelContainer = styled.div`
 
   background-color: var(--background-primary-color);
   border-left: 1px solid var(--border-color);
+  visibility: hidden;
 
   &.show {
     transform: none;
     transition: transform 0.3s ease-in-out;
     z-index: 3;
+    visibility: visible;
   }
 `;
 

ts/components/dialog/SessionConfirm.tsx

@@ -1,8 +1,8 @@
 import { shell } from 'electron';
 import React, { Dispatch, useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
-import styled from 'styled-components';
 import useKey from 'react-use/lib/useKey';
+import styled from 'styled-components';
 import { useLastMessage } from '../../hooks/useParamSelector';
 import { MessageInteraction } from '../../interactions';
 import {

ts/components/icon/SessionIconButton.tsx

@@ -1,13 +1,13 @@
-import React, { KeyboardEvent } from 'react';
 import classNames from 'classnames';
 import _ from 'lodash';
+import React, { KeyboardEvent } from 'react';
 import styled from 'styled-components';
 
 import { SessionIcon, SessionIconProps } from '.';
 import { SessionNotificationCount } from './SessionNotificationCount';
 
 interface SProps extends SessionIconProps {
-  onClick?: (e?: React.MouseEvent<HTMLDivElement>) => void;
+  onClick?: (e?: React.MouseEvent<HTMLButtonElement>) => void;
   notificationCount?: number;
   isSelected?: boolean;
   isHidden?: boolean;
@@ -19,7 +19,7 @@ interface SProps extends SessionIconProps {
   tabIndex?: number;
 }
 
-const StyledSessionIconButton = styled.div<{ color?: string; isSelected?: boolean }>`
+const StyledSessionIconButton = styled.button<{ color?: string; isSelected?: boolean }>`
   background-color: var(--button-icon-background-color);
 
   svg path {
@@ -37,10 +37,14 @@ const StyledSessionIconButton = styled.div<{ color?: string; isSelected?: boolea
   &:hover svg path {
     ${props => !props.color && 'fill: var(--button-icon-stroke-hover-color);'}
   }
+
+  :focus-within {
+    outline: 1px var(--primary-color) dashed;
+  }
 `;
 
 // eslint-disable-next-line react/display-name
-const SessionIconButtonInner = React.forwardRef<HTMLDivElement, SProps>((props, ref) => {
+const SessionIconButtonInner = React.forwardRef<HTMLButtonElement, SProps>((props, ref) => {
   const {
     iconType,
     iconSize,
@@ -62,13 +66,13 @@ const SessionIconButtonInner = React.forwardRef<HTMLDivElement, SProps>((props,
     style,
     tabIndex,
   } = props;
-  const clickHandler = (e: React.MouseEvent<HTMLDivElement>) => {
+  const clickHandler = (e: React.MouseEvent<HTMLButtonElement>) => {
     if (props.onClick) {
       e.stopPropagation();
       props.onClick(e);
     }
   };
-  const keyPressHandler = (e: KeyboardEvent<HTMLDivElement>) => {
+  const keyPressHandler = (e: KeyboardEvent<HTMLButtonElement>) => {
     if (e.currentTarget.tabIndex > -1 && e.key === 'Enter' && props.onClick) {
       e.stopPropagation();
       props.onClick();
@@ -80,7 +84,6 @@ const SessionIconButtonInner = React.forwardRef<HTMLDivElement, SProps>((props,
       color={iconColor}
       isSelected={isSelected}
       className={classNames('session-icon-button', iconSize)}
-      role="button"
       ref={ref}
       id={id}
       onClick={clickHandler}

ts/interactions/conversations/unsendingInteractions.ts

@@ -335,6 +335,24 @@ const doDeleteSelectedMessages = async ({
   // #endregion
 };
 
+/**
+ * Either delete for everyone or not, based on the props
+ */
+export async function deleteMessagesForX(
+  messageIds: Array<string>,
+  conversationId: string,
+  isPublic: boolean
+) {
+  if (conversationId) {
+    if (!isPublic) {
+      void deleteMessagesById(messageIds, conversationId);
+    }
+    if (isPublic) {
+      void deleteMessagesByIdForEveryone(messageIds, conversationId);
+    }
+  }
+}
+
 export async function deleteMessagesByIdForEveryone(
   messageIds: Array<string>,
   conversationId: string

yarn.lock

@@ -3829,6 +3829,21 @@ flatted@^3.2.7:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.7.tgz#609f39207cb614b89d0765b477cb2d437fbf9787"
   integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
 
+focus-trap-react@^10.2.3:
+  version "10.2.3"
+  resolved "https://registry.yarnpkg.com/focus-trap-react/-/focus-trap-react-10.2.3.tgz#a5a2ea7fbb042ffa4337fde72758325ed0fb793a"
+  integrity sha512-YXBpFu/hIeSu6NnmV2xlXzOYxuWkoOtar9jzgp3lOmjWLWY59C/b8DtDHEAV4SPU07Nd/t+nS/SBNGkhUBFmEw==
+  dependencies:
+    focus-trap "^7.5.4"
+    tabbable "^6.2.0"
+
+focus-trap@^7.5.4:
+  version "7.5.4"
+  resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-7.5.4.tgz#6c4e342fe1dae6add9c2aa332a6e7a0bbd495ba2"
+  integrity sha512-N7kHdlgsO/v+iD/dMoJKtsSqs5Dz/dXZVebRgJw23LDk+jMi/974zyiOYDziY2JPp8xivq9BmUGwIJMiuSBi7w==
+  dependencies:
+    tabbable "^6.2.0"
+
 follow-redirects@^1.15.0:
   version "1.15.3"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.3.tgz#fe2f3ef2690afce7e82ed0b44db08165b207123a"
@@ -7514,6 +7529,11 @@ symbol-tree@^3.2.4:
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
   integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
 
+tabbable@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97"
+  integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==
+
 tapable@^2.1.1, tapable@^2.2.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"