Update comments focus handling to support animation delay before focus

- Updated checkCanFocusTrap to avoid delay if focus element available, accounting for side panel being open/closed AND the animation of a new comment panel being created.
- Remove need for `as any` as the focus trap library now has the correct types for Props.
- Fixes #11021
- Builds on original PR #11022

CHANGELOG.txt

@@ -52,6 +52,7 @@
  * Fix: Update `BooleanColumn` icons so they can be distinguished without relying on color (Sage Abdullah)
  * Fix: Do not delete default homepage by ID in home app migration (Matt Westcott)
  * Fix: Update the start project template to align with Django's recommendation to have the `django.middleware.security.SecurityMiddleware` first (Brylie Christopher Oxley)
+ * Fix: Ensure keyboard usage will correctly focus on new comments, including replies, when the side panel is open or closed (Dhruvi Patel)
  * Docs: Add missing tag library imports to footer template code in tutorial (Dimaco)
  * Docs: Improve documentation around securing user-uploaded files (Jake Howard)
  * Docs: Introduce search_fields in a dedicated tutorial section instead of the introduction (Matt Westcott)

client/src/components/CommentApp/components/Comment/index.tsx

@@ -617,22 +617,35 @@ export default class CommentComponent extends React.Component<CommentProps> {
 
     return (
       <FocusTrap
-        focusTrapOptions={
-          {
-            preventScroll: true,
-            clickOutsideDeactivates: true,
-            onDeactivate: () => {
-              this.props.store.dispatch(
-                setFocusedComment(null, {
-                  updatePinnedComment: true,
-                  forceFocus: false,
-                }),
-              );
-            },
-            initialFocus: '[data-focus-target="true"]',
-            delayFocus: false,
-          } as any
-        } // For some reason, the types for FocusTrap props don't yet include preventScroll.
+        focusTrapOptions={{
+          preventScroll: true,
+          clickOutsideDeactivates: true,
+          onDeactivate: () => {
+            this.props.store.dispatch(
+              setFocusedComment(null, {
+                updatePinnedComment: true,
+                forceFocus: false,
+              }),
+            );
+          },
+          /** Allow delay for side panel to open and comment card to fade in with animations. */
+          checkCanFocusTrap: (containers: (HTMLElement | SVGElement)[]) => {
+            const hasFocusTargetWithSidePanelOpen = containers.some(
+              (container) =>
+                container.matches(
+                  '[data-form-side="comments"].form-side--comments [data-focus-target="true"]',
+                ),
+            );
+
+            if (hasFocusTargetWithSidePanelOpen) return Promise.resolve();
+
+            return new Promise((resolve) => {
+              setTimeout(resolve, 250);
+            });
+          },
+          initialFocus: '[data-focus-target="true"]',
+          delayInitialFocus: true,
+        }}
         active={this.props.isFocused && this.props.forceFocus}
       >
         <li

docs/releases/7.1.md

@@ -67,6 +67,7 @@ The [](../reference/contrib/settings) app now allows permission over site settin
  * Update `BooleanColumn` icons so they can be distinguished without relying on color (Sage Abdullah)
  * Do not delete default homepage by ID in home app migration (Matt Westcott)
  * Update the start project template to align with Django's recommendation to have the `django.middleware.security.SecurityMiddleware` first (Brylie Christopher Oxley)
+ * Ensure keyboard usage will correctly focus on new comments, including replies, when the side panel is open or closed (Dhruvi Patel)
 
 ### Documentation