Merge pull request #22287 from overleaf/dp-review-safari

Allow review panel entry buttons to be focused in safari

GitOrigin-RevId: 1f9854534394d2561b673857fde186058e4acf49

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={() =>

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}`}
           >

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"

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
 }>