From 64ce39398b8d7bbe55e9ac24582277f5b5b1220e Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Mon, 3 Apr 2023 14:09:06 +0200
Subject: [PATCH] feat: conversationHeaderTitle is now keyboard accessible

SessionIconButton is now keyboard accessible if a tabIndex is set to > -1
---
 ts/components/NoticeBanner.tsx                |  2 +-
 .../header/ConversationHeaderItems.tsx        | 28 +++++++++++++------
 .../header/ConversationHeaderTitle.tsx        | 13 ++++++++-
 ts/components/icon/SessionIconButton.tsx      | 14 ++++++++--
 4 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/ts/components/NoticeBanner.tsx b/ts/components/NoticeBanner.tsx
index 70fce54fd..1c3fca995 100644
--- a/ts/components/NoticeBanner.tsx
+++ b/ts/components/NoticeBanner.tsx
@@ -42,7 +42,7 @@ export const NoticeBanner = (props: NoticeBannerProps) => {
         iconColor="inherit"
         iconSize="small"
         onClick={event => {
-          event.preventDefault();
+          event?.preventDefault();
           dismissCallback();
         }}
       />
diff --git a/ts/components/conversation/header/ConversationHeaderItems.tsx b/ts/components/conversation/header/ConversationHeaderItems.tsx
index be88d2844..1a7ac4e8a 100644
--- a/ts/components/conversation/header/ConversationHeaderItems.tsx
+++ b/ts/components/conversation/header/ConversationHeaderItems.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { contextMenu } from 'react-contexify';
+import React, { KeyboardEvent } from 'react';
+import { contextMenu, TriggerEvent } from 'react-contexify';
 import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 import { useIsRequest } from '../../../hooks/useParamSelector';
@@ -26,15 +26,27 @@ export const TripleDotsMenu = (props: { triggerId: string; showBackButton: boole
   if (showBackButton) {
     return null;
   }
+
+  const handleOnClick = (e: TriggerEvent) => {
+    contextMenu.show({
+      id: props.triggerId,
+      event: e,
+    });
+  };
+
+  const handleOnKeyPress = (e: KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === 'Enter') {
+      e.stopPropagation();
+      handleOnClick(e);
+    }
+  };
+
   return (
     <TripleDotContainer
       role="button"
-      onClick={(e: any) => {
-        contextMenu.show({
-          id: props.triggerId,
-          event: e,
-        });
-      }}
+      onKeyPress={handleOnKeyPress}
+      onClick={handleOnClick}
+      tabIndex={0}
       data-testid="three-dots-conversation-options"
     >
       <SessionIconButton iconType="ellipses" iconSize="medium" />
diff --git a/ts/components/conversation/header/ConversationHeaderTitle.tsx b/ts/components/conversation/header/ConversationHeaderTitle.tsx
index 4fa0d0de3..4d74cc43c 100644
--- a/ts/components/conversation/header/ConversationHeaderTitle.tsx
+++ b/ts/components/conversation/header/ConversationHeaderTitle.tsx
@@ -233,6 +233,7 @@ export const ConversationHeaderTitle = () => {
                     handleTitleCycle(-1);
                   }}
                   isHidden={subtitles.length < 2}
+                  tabIndex={0}
                 />
                 {visibleTitleIndex === 2 && expirationType !== 'off' && (
                   <SessionIconButton
@@ -242,7 +243,16 @@ export const ConversationHeaderTitle = () => {
                     margin={'0 var(--margins-xs) 0 0'}
                   />
                 )}
-                <span className="module-conversation-header__title-text">
+                <span
+                  className="module-conversation-header__title-text"
+                  onKeyPress={(e: any) => {
+                    if (e.key === 'Enter') {
+                      e.preventDefault();
+                      handleRightPanelToggle();
+                    }
+                  }}
+                  tabIndex={0}
+                >
                   {subtitles[visibleTitleIndex]}
                 </span>
                 <SessionIconButton
@@ -255,6 +265,7 @@ export const ConversationHeaderTitle = () => {
                     handleTitleCycle(1);
                   }}
                   isHidden={subtitles.length < 2}
+                  tabIndex={0}
                 />
               </Flex>
               <SubtitleDotMenu
diff --git a/ts/components/icon/SessionIconButton.tsx b/ts/components/icon/SessionIconButton.tsx
index e92e6c7c5..4fcb7c050 100644
--- a/ts/components/icon/SessionIconButton.tsx
+++ b/ts/components/icon/SessionIconButton.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { KeyboardEvent } from 'react';
 import classNames from 'classnames';
 import { SessionIcon, SessionIconProps } from '../icon';
 import _ from 'lodash';
@@ -6,7 +6,7 @@ import { SessionNotificationCount } from './SessionNotificationCount';
 import styled from 'styled-components';
 
 interface SProps extends SessionIconProps {
-  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+  onClick?: (e?: React.MouseEvent<HTMLDivElement>) => void;
   notificationCount?: number;
   isSelected?: boolean;
   isHidden?: boolean;
@@ -14,6 +14,7 @@ interface SProps extends SessionIconProps {
   dataTestId?: string;
   id?: string;
   style?: object;
+  tabIndex?: number;
 }
 
 const StyledSessionIconButton = styled.div<{ color?: string; isSelected?: boolean }>`
@@ -55,6 +56,7 @@ const SessionIconButtonInner = React.forwardRef<HTMLDivElement, SProps>((props,
     id,
     dataTestId,
     style,
+    tabIndex,
   } = props;
   const clickHandler = (e: React.MouseEvent<HTMLDivElement>) => {
     if (props.onClick) {
@@ -62,6 +64,12 @@ const SessionIconButtonInner = React.forwardRef<HTMLDivElement, SProps>((props,
       props.onClick(e);
     }
   };
+  const keyPressHandler = (e: KeyboardEvent<HTMLDivElement>) => {
+    if (e.currentTarget.tabIndex > -1 && e.key === 'Enter' && props.onClick) {
+      e.stopPropagation();
+      props.onClick();
+    }
+  };
 
   return (
     <StyledSessionIconButton
@@ -73,6 +81,8 @@ const SessionIconButtonInner = React.forwardRef<HTMLDivElement, SProps>((props,
       id={id}
       onClick={clickHandler}
       style={{ ...style, display: isHidden ? 'none' : 'flex', margin: margin ? margin : '' }}
+      tabIndex={tabIndex}
+      onKeyPress={keyPressHandler}
       data-testid={dataTestId}
     >
       <SessionIcon