From 9ed3861c701a70d21aba6e4c97003946259fa1fe Mon Sep 17 00:00:00 2001
From: David <33458145+davidmcpowell@users.noreply.github.com>
Date: Mon, 9 Dec 2024 11:07:42 +0000
Subject: [PATCH] Merge pull request #22287 from overleaf/dp-review-safari

Allow review panel entry buttons to be focused in safari

GitOrigin-RevId: 1f9854534394d2561b673857fde186058e4acf49
---
 .../review-panel-new/components/review-panel-change.tsx   | 8 +++++++-
 .../components/review-panel-comment-options.tsx           | 8 +++++++-
 .../review-panel-new/components/review-panel-message.tsx  | 7 ++++++-
 .../features/ui/components/types/dropdown-menu-props.ts   | 1 +
 4 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/services/web/frontend/js/features/review-panel-new/components/review-panel-change.tsx b/services/web/frontend/js/features/review-panel-new/components/review-panel-change.tsx
index b2097ad61d..33a7306fe8 100644
--- a/services/web/frontend/js/features/review-panel-new/components/review-panel-change.tsx
+++ b/services/web/frontend/js/features/review-panel-new/components/review-panel-change.tsx
@@ -110,7 +110,12 @@ export const ReviewPanelChange = memo<{
                   description={t('accept_change')}
                   tooltipProps={{ className: 'review-panel-tooltip' }}
                 >
-                  <button type="button" className="btn" onClick={acceptHandler}>
+                  <button
+                    type="button"
+                    className="btn"
+                    onClick={acceptHandler}
+                    tabIndex={0}
+                  >
                     <MaterialIcon
                       type="check"
                       className="review-panel-entry-actions-icon"
@@ -126,6 +131,7 @@ export const ReviewPanelChange = memo<{
                   tooltipProps={{ className: 'review-panel-tooltip' }}
                 >
                   <button
+                    tabIndex={0}
                     type="button"
                     className="btn"
                     onClick={() =>
diff --git a/services/web/frontend/js/features/review-panel-new/components/review-panel-comment-options.tsx b/services/web/frontend/js/features/review-panel-new/components/review-panel-comment-options.tsx
index b04b1272c6..d0f4fb8f66 100644
--- a/services/web/frontend/js/features/review-panel-new/components/review-panel-comment-options.tsx
+++ b/services/web/frontend/js/features/review-panel-new/components/review-panel-comment-options.tsx
@@ -36,7 +36,12 @@ const ReviewPanelCommentOptions: FC<{
     <BootstrapVersionSwitcher
       bs3={
         <ControlledDropdown id={`review-panel-comment-options-${id}`} pullRight>
-          <BS3Dropdown.Toggle noCaret bsSize="small" bsStyle={null}>
+          <BS3Dropdown.Toggle
+            tabIndex={0}
+            noCaret
+            bsSize="small"
+            bsStyle={null}
+          >
             <MaterialIcon
               type="more_vert"
               className="review-panel-entry-actions-icon"
@@ -54,6 +59,7 @@ const ReviewPanelCommentOptions: FC<{
       bs5={
         <Dropdown align="end">
           <DropdownToggle
+            tabIndex={0}
             as={ReviewPanelCommentDropdownToggleButton}
             id={`review-panel-comment-options-btn-${id}`}
           >
diff --git a/services/web/frontend/js/features/review-panel-new/components/review-panel-message.tsx b/services/web/frontend/js/features/review-panel-new/components/review-panel-message.tsx
index ba3b37245a..26f0af2ea2 100644
--- a/services/web/frontend/js/features/review-panel-new/components/review-panel-message.tsx
+++ b/services/web/frontend/js/features/review-panel-new/components/review-panel-message.tsx
@@ -71,7 +71,12 @@ export const ReviewPanelMessage: FC<{
               description={t('resolve_comment')}
               tooltipProps={{ className: 'review-panel-tooltip' }}
             >
-              <button type="button" className="btn" onClick={onResolve}>
+              <button
+                type="button"
+                tabIndex={0}
+                className="btn"
+                onClick={onResolve}
+              >
                 <MaterialIcon
                   type="check"
                   className="review-panel-entry-actions-icon"
diff --git a/services/web/frontend/js/features/ui/components/types/dropdown-menu-props.ts b/services/web/frontend/js/features/ui/components/types/dropdown-menu-props.ts
index a048573c95..b4ee76a4a0 100644
--- a/services/web/frontend/js/features/ui/components/types/dropdown-menu-props.ts
+++ b/services/web/frontend/js/features/ui/components/types/dropdown-menu-props.ts
@@ -55,6 +55,7 @@ export type DropdownToggleProps = PropsWithChildren<{
   variant?: SplitButtonVariants
   as?: ElementType
   size?: 'sm' | 'lg' | undefined
+  tabIndex?: number
   'aria-label'?: string
 }>