Accessibility fixes for ConversationDetails and AvatarPopup

ts/components/ChatColorPicker.tsx

@@ -18,6 +18,8 @@ import { SampleMessageBubbles } from './SampleMessageBubbles';
 import { PanelRow } from './conversation/conversation-details/PanelRow';
 import { getCustomColorStyle } from '../util/getCustomColorStyle';
 
+import { useDelayedRestoreFocus } from '../hooks/useRestoreFocus';
+
 type CustomColorDataType = {
   id?: string;
   value?: CustomColorType;
@@ -84,6 +86,8 @@ export const ChatColorPicker = ({
     CustomColorDataType | undefined
   >(undefined);
 
+  const [focusRef] = useDelayedRestoreFocus();
+
   const onSelectColor = (
     conversationColor: ConversationColorType,
     customColorData?: { id: string; value: CustomColorType }
@@ -172,7 +176,7 @@ export const ChatColorPicker = ({
       />
       <hr />
       <div className="ChatColorPicker__bubbles">
-        {ConversationColors.map(color => (
+        {ConversationColors.map((color, i) => (
           <div
             aria-label={color}
             className={classNames(
@@ -190,6 +194,7 @@ export const ChatColorPicker = ({
             }}
             role="button"
             tabIndex={0}
+            ref={i === 0 ? focusRef : undefined}
           />
         ))}
         {Object.keys(customColors).map(colorId => {