From 621d81621c1f6f2b0e66b0998a0d9cd8c3b9c6e1 Mon Sep 17 00:00:00 2001
From: Engin Polat <enpolat@microsoft.com>
Date: Tue, 16 Jan 2024 11:49:01 -0800
Subject: [PATCH] fixing in 200% zoom mode, Content which is present in the
 dialog is not visible (#605)

fixing dialog styles to improve accessibility
---
 .../components/feedbackItem.tsx               | 24 ++++++-------------
 1 file changed, 7 insertions(+), 17 deletions(-)

diff --git a/RetrospectiveExtension.Frontend/components/feedbackItem.tsx b/RetrospectiveExtension.Frontend/components/feedbackItem.tsx
index 78167cd9..e6e37ece 100644
--- a/RetrospectiveExtension.Frontend/components/feedbackItem.tsx
+++ b/RetrospectiveExtension.Frontend/components/feedbackItem.tsx
@@ -160,7 +160,7 @@ class FeedbackItem extends React.Component<IFeedbackItemProps, IFeedbackItemStat
     reflectBackendService.removeOnReceiveDeletedItem(this.receiveDeletedItemHandler);
   }
 
-  private receiveDeletedItemHandler = async (columnId: string, feedbackItemId: string) => {
+  private receiveDeletedItemHandler = (columnId: string, feedbackItemId: string) => {
     if (feedbackItemId === this.props.id && !this.state.isMarkedForDeletion) {
       this.markFeedbackItemForDelete();
     }
@@ -247,8 +247,8 @@ class FeedbackItem extends React.Component<IFeedbackItemProps, IFeedbackItemStat
     });
   }
 
-  private onConfirmRemoveFeedbackItemFromGroup = async () => {
-    await this.props.moveFeedbackItem(
+  private onConfirmRemoveFeedbackItemFromGroup = () => {
+    this.props.moveFeedbackItem(
       this.props.refreshFeedbackItems,
       this.props.boardId,
       this.props.id,
@@ -271,7 +271,7 @@ class FeedbackItem extends React.Component<IFeedbackItemProps, IFeedbackItemStat
   }
 
   private markFeedbackItemForDelete = (isLocalDelete: boolean = false) => {
-    if (this.props.groupedItemProps && this.props.groupedItemProps.isMainItem && this.props.groupedItemProps.isGroupExpanded) {
+    if (this.props.groupedItemProps?.isMainItem && this.props.groupedItemProps?.isGroupExpanded) {
       this.props.groupedItemProps.toggleGroupExpand();
     }
 
@@ -317,12 +317,6 @@ class FeedbackItem extends React.Component<IFeedbackItemProps, IFeedbackItemStat
     }
   }
 
-  private showMobileFeedbackItemActionsDialog = () => {
-    this.setState({
-      isMobileFeedbackItemActionsDialogHidden: false,
-    });
-  }
-
   private hideMobileFeedbackItemActionsDialog = () => {
     this.setState({
       isMobileFeedbackItemActionsDialogHidden: true,
@@ -566,8 +560,7 @@ class FeedbackItem extends React.Component<IFeedbackItemProps, IFeedbackItemStat
   private pressSearchedFeedbackItem = (event: React.KeyboardEvent<HTMLDivElement>, feedbackItemProps: IFeedbackItemProps) => {
     event.stopPropagation();
 
-    // Enter
-    if (event.keyCode === 13) {
+    if (event.key === "Enter") {
       FeedbackItemHelper.handleDropFeedbackItemOnFeedbackItem(
         feedbackItemProps,
         this.props.id,
@@ -576,8 +569,7 @@ class FeedbackItem extends React.Component<IFeedbackItemProps, IFeedbackItemStat
       this.hideGroupFeedbackItemDialog();
     }
 
-    // ESC
-    if (event.keyCode === 27) {
+    if (event.key === "Escape") {
       this.hideGroupFeedbackItemDialog();
     }
   }
@@ -617,7 +609,7 @@ class FeedbackItem extends React.Component<IFeedbackItemProps, IFeedbackItemStat
     const isNotGroupedItem = !this.props.groupedItemProps;
     const isMainItem = isNotGroupedItem || this.props.groupedItemProps.isMainItem;
     const isGroupedCarouselItem = this.props.isGroupedCarouselItem;
-    const groupItemsCount = this.props && this.props.groupedItemProps && this.props.groupedItemProps.groupedCount + 1;
+    const groupItemsCount = this.props?.groupedItemProps?.groupedCount + 1;
     const ariaLabel = isNotGroupedItem ? 'Feedback item.' : (!isMainItem ? 'Feedback group item.' : `Feedback group main item. Group has ${groupItemsCount} items.`);
     const hideFeedbackItems = this.props.hideFeedbackItems && (this.props.userIdRef !== getUserIdentity().id);
     const curTimerState = this.props.timerState;
@@ -1040,8 +1032,6 @@ class FeedbackItem extends React.Component<IFeedbackItemProps, IFeedbackItemStat
         </Dialog>
         <Dialog
           hidden={this.state.isRemoveFeedbackItemFromGroupConfirmationDialogHidden}
-          maxWidth={700}
-          minWidth={700}
           onDismiss={this.hideRemoveFeedbackItemFromGroupConfirmationDialog}
           dialogContentProps={{
             type: DialogType.close,