feat: add force focus utility and integrate it with delete all conversations modal for improved accessibility

Author: vj-venkatesan

src/webchat-ui/components/WebchatUI.tsx

@@ -69,6 +69,7 @@ import speechOutput from "./plugins/speech-output";
 import getMessagesListWithoutControlCommands from "../utils/filter-out-control-commands";
 import { isValidMarkdown, removeMarkdownChars } from "../../webchat/helper/handleMarkdown";
 import DeleteAllConversationsModal from "./presentational/previous-conversations/DeleteAllConversations";
+import { forceFocus } from "../utils/force-focus";
 
 export interface WebchatUIProps {
 	currentSession: string;
@@ -259,6 +260,7 @@ export class WebchatUI extends React.PureComponent<
 	chatToggleButtonRef: React.RefObject<HTMLButtonElement>;
 	closeButtonInHeaderRef: React.RefObject<HTMLButtonElement>;
 	menuButtonInHeaderRef: React.RefObject<HTMLButtonElement>;
+	deleteButtonInHeaderRef: React.RefObject<HTMLButtonElement>;
 	ratingButtonInHeaderRef: React.RefObject<HTMLButtonElement>;
 	webchatWindowRef: React.RefObject<HTMLDivElement>;
 	homeScreenCloseButtonRef: React.RefObject<HTMLButtonElement>;
@@ -277,6 +279,7 @@ export class WebchatUI extends React.PureComponent<
 		this.chatToggleButtonRef = React.createRef();
 		this.closeButtonInHeaderRef = React.createRef();
 		this.menuButtonInHeaderRef = React.createRef();
+		this.deleteButtonInHeaderRef = React.createRef();
 		this.ratingButtonInHeaderRef = React.createRef();
 		this.webchatWindowRef = React.createRef();
 		this.homeScreenCloseButtonRef = React.createRef();
@@ -1248,6 +1251,9 @@ export class WebchatUI extends React.PureComponent<
 						isOpen
 						onOpenChange={open => {
 							this.setState({ showDeleteAllConversationsModal: open });
+							if (!open && this.deleteButtonInHeaderRef.current) {
+								forceFocus(this.deleteButtonInHeaderRef.current);
+							}
 						}}
 					/>
 				);
@@ -1415,6 +1421,7 @@ export class WebchatUI extends React.PureComponent<
 								title={getTitles()}
 								closeButtonRef={this.closeButtonInHeaderRef}
 								menuButtonRef={this.menuButtonInHeaderRef}
+								deleteButtonRef={this.deleteButtonInHeaderRef}
 								chatToggleButtonRef={this.chatToggleButtonRef}
 								hideBackButton={hideBackButton}
 								showChatScreen={showChatScreen}

src/webchat-ui/components/presentational/Header.tsx

@@ -109,6 +109,7 @@ interface HeaderProps {
 	onSetShowChatOptionsScreen?: (show: boolean) => void;
 	closeButtonRef?: React.RefObject<HTMLButtonElement>;
 	menuButtonRef?: React.RefObject<HTMLButtonElement>;
+	deleteButtonRef?: React.RefObject<HTMLButtonElement>;
 	chatToggleButtonRef?: React.RefObject<HTMLButtonElement>;
 	hideBackButton?: boolean;
 	deleteIconColor?: string;
@@ -189,6 +190,8 @@ const Header: FC<HeaderProps> = props => {
 							aria-label="Delete All Conversations"
 							className="webchat-header-delete-all-conversations-button"
 							iconColor={rest.deleteIconColor}
+							tabIndex={0}
+							ref={rest.deleteButtonRef}
 						>
 							<DeleteIcon></DeleteIcon>
 						</HeaderIconButton>

src/webchat-ui/utils/force-focus.ts

@@ -0,0 +1,22 @@
+/**
+ * Forces focus on a specified element and prevents focus from being applied to any other element.
+ * This function applies focus to the target element and sets up event listeners to maintain that focus.
+ * @param targetElement - The HTML element that should maintain focus
+ */
+export function forceFocus(targetElement: HTMLElement) {
+	// Initially focus the element
+
+	// Function to handle any focus event in the document
+	setTimeout(() => {
+		targetElement.focus();
+
+		const preventFocusChange = e => {
+			e.preventDefault();
+			targetElement.focus();
+			document.removeEventListener("focusin", preventFocusChange);
+		};
+
+		// Listen for any focus changes immediately after
+		document.addEventListener("focusin", preventFocusChange);
+	}, 10);
+}