feat: conversationHeaderTitle is now keyboard accessible

SessionIconButton is now keyboard accessible if a tabIndex is set to > -1

ts/components/NoticeBanner.tsx

@@ -42,7 +42,7 @@ export const NoticeBanner = (props: NoticeBannerProps) => {
         iconColor="inherit"
         iconSize="small"
         onClick={event => {
-          event.preventDefault();
+          event?.preventDefault();
           dismissCallback();
         }}
       />

ts/components/conversation/header/ConversationHeaderItems.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
+import React, { KeyboardEvent } from 'react';
-import { contextMenu } from 'react-contexify';
+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) => {
+      onKeyPress={handleOnKeyPress}
-        contextMenu.show({
+      onClick={handleOnClick}
-          id: props.triggerId,
+      tabIndex={0}
-          event: e,
-        });
-      }}
       data-testid="three-dots-conversation-options"
     >
       <SessionIconButton iconType="ellipses" iconSize="medium" />

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

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