Repository: wagtail/wagtail
File: client/src/components/CommentApp/components/Comment/index.tsx (TypeScript)

Code before:
        setFocusedComment(this.props.comment.localId, {
          updatePinnedComment: true,
          forceFocus: true,
        }),
      );
    };

    const top = this.props.layout.getCommentPosition(
      this.props.comment.localId,
    );

    return (
      <FocusTrap
        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 hasFocusTarget = containers.some(
                (container) =>
                  container.getAttribute('data-focus-target') === 'true',
              );
              if (hasFocusTarget) {
                return Promise.resolve();
              }

              return new Promise((resolve) => {
                setTimeout(resolve, 250);
              });
            },
            initialFocus: '[data-focus-target="true"]',
            delayInitialFocus: true,
          } as any
        } // For some reason, the types for FocusTrap props don't yet include preventScroll.
        active={this.props.isFocused && this.props.forceFocus}
      >
        <li
          tabIndex={-1}
          data-focus-target={
            this.props.isFocused &&
            !['creating', 'editing'].includes(this.props.comment.mode)
          }

Review comment (suggestion):
```suggestion
            /** Allow delay for side panel to open and comment card to fade in with animations */
```

Let's use JSDoc syntax, it will support better editor integration for documenting this option's purpose.

Code after:
        setFocusedComment(this.props.comment.localId, {
          updatePinnedComment: true,
          forceFocus: true,
        }),
      );
    };

    const top = this.props.layout.getCommentPosition(
      this.props.comment.localId,
    );

    return (
      <FocusTrap
        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
          tabIndex={-1}
          data-focus-target={
            this.props.isFocused &&
            !['creating', 'editing'].includes(this.props.comment.mode)
          }
          key={this.props.comment.localId}