From abd15f6df2623206d6aefce746027bb7d9ffdddf Mon Sep 17 00:00:00 2001
From: Ayush Chauhan <ayush.chauhan@brightscout.com>
Date: Tue, 24 Dec 2024 01:34:47 +0530
Subject: [PATCH 1/2] MM-61641: Update post options to use semantic list
 elements

---
 .../src/components/post/post_options.tsx      | 49 ++++++++++++-------
 .../post_view/post_reaction/post_reaction.tsx |  2 +-
 .../post_recent_reactions.tsx                 |  4 +-
 .../src/sass/components/_post-menu.scss       |  1 +
 4 files changed, 36 insertions(+), 20 deletions(-)

diff --git a/webapp/channels/src/components/post/post_options.tsx b/webapp/channels/src/components/post/post_options.tsx
index 25eec3bfc31f..2782056b57a3 100644
--- a/webapp/channels/src/components/post/post_options.tsx
+++ b/webapp/channels/src/components/post/post_options.tsx
@@ -59,7 +59,7 @@ type Props = {
 };
 
 const PostOptions = (props: Props): JSX.Element => {
-    const dotMenuRef = useRef<HTMLDivElement>(null);
+    const dotMenuRef = useRef<HTMLUListElement>(null);
 
     const [showEmojiPicker, setShowEmojiPicker] = useState(false);
     const [showDotMenu, setShowDotMenu] = useState(false);
@@ -120,12 +120,14 @@ const PostOptions = (props: Props): JSX.Element => {
     let commentIcon;
     if (showCommentIcon) {
         commentIcon = (
+            <li key="commentIcon__listItem">
             <CommentIcon
                 handleCommentClick={props.handleCommentClick}
                 postId={post.id}
                 extraClass={commentIconExtraClass}
                 commentCount={props.collapsedThreadsEnabled ? 0 : props.replyCount}
-            />
+                />
+            </li>
         );
     }
 
@@ -144,7 +146,7 @@ const PostOptions = (props: Props): JSX.Element => {
                 teamId={props.teamId}
                 emojis={props.recentEmojis}
                 size={showMoreReactions ? 3 : 1}
-            />
+                />
         );
     }
 
@@ -152,6 +154,7 @@ const PostOptions = (props: Props): JSX.Element => {
     let postReaction;
     if (showReactionIcon) {
         postReaction = (
+            <li key="postReaction__listItem">
             <PostReaction
                 channelId={post.channel_id}
                 location={props.location}
@@ -160,30 +163,35 @@ const PostOptions = (props: Props): JSX.Element => {
                 getDotMenuRef={getDotMenuRef}
                 showEmojiPicker={showEmojiPicker}
                 toggleEmojiPicker={toggleEmojiPicker}
-            />
+                />
+            </li>
         );
     }
 
     let flagIcon: ReactNode = null;
     if (!isMobileView && (!isEphemeral && !post.failed && !systemMessage)) {
         flagIcon = (
-            <PostFlagIcon
+            <li key="flagIcon__listItem">
+             <PostFlagIcon
                 location={props.location}
                 postId={post.id}
                 isFlagged={props.isFlagged}
-            />
+                />
+            </li>
         );
     }
 
     // Action menus
     const showActionsMenuIcon = props.shouldShowActionsMenu && (isMobileView || hoverLocal);
     const actionsMenu = showActionsMenuIcon && (
+        <li key="actionsMenu__listItem">
         <ActionsMenu
             post={post}
             location={props.location}
             handleDropdownOpened={handleActionsMenuOpened}
             isMenuOpen={showActionsMenu}
-        />
+            />
+        </li>
     );
 
     let pluginItems: ReactNode = null;
@@ -193,10 +201,11 @@ const PostOptions = (props: Props): JSX.Element => {
                 if (item.component) {
                     const Component = item.component as any;
                     return (
+                        <li key={item.id}>
                         <Component
                             post={props.post}
-                            key={item.id}
-                        />
+                            />
+                        </li>
                     );
                 }
                 return null;
@@ -204,6 +213,7 @@ const PostOptions = (props: Props): JSX.Element => {
     }
 
     const dotMenu = (
+        <li key="dotMenu__listItem">
         <DotMenu
             post={props.post}
             location={props.location}
@@ -214,7 +224,8 @@ const PostOptions = (props: Props): JSX.Element => {
             isReadOnly={isReadOnly || channelIsArchived}
             isMenuOpen={showDotMenu}
             enableEmojiPicker={props.enableEmojiPicker}
-        />
+            />
+        </li>
     );
 
     // Build post options
@@ -235,10 +246,11 @@ const PostOptions = (props: Props): JSX.Element => {
     } else if (props.location === Locations.SEARCH) {
         const hasCRTFooter = props.collapsedThreadsEnabled && !post.root_id && (post.reply_count > 0 || post.is_following);
         options = (
-            <div className='col__controls post-menu'>
+            <ul className='col__controls post-menu'>
                 {dotMenu}
                 {flagIcon}
                 {props.canReply && !hasCRTFooter &&
+                  <li key="commentIcon__listItem">
                     <CommentIcon
                         location={props.location}
                         handleCommentClick={props.handleCommentClick}
@@ -246,23 +258,26 @@ const PostOptions = (props: Props): JSX.Element => {
                         postId={post.id}
                         searchStyle={'search-item__comment'}
                         extraClass={props.replyCount ? 'icon--visible' : ''}
-                    />
+                        />
+                   </li>
                 }
+                <li key="searchItem__listItem">
                 <a
                     href='#'
                     onClick={props.handleJumpClick}
                     className='search-item__jump'
-                >
+                    >
                     <FormattedMessage
                         id='search_item.jump'
                         defaultMessage='Jump'
-                    />
+                        />
                 </a>
-            </div>
+                </li>
+            </ul>
         );
     } else if (!props.isPostBeingEdited) {
         options = (
-            <div
+            <ul
                 ref={dotMenuRef}
                 data-testid={`post-menu-${props.post.id}`}
                 className={classnames('col post-menu', {'post-menu--position': !hoverLocal && showCommentIcon})}
@@ -275,7 +290,7 @@ const PostOptions = (props: Props): JSX.Element => {
                 {actionsMenu}
                 {commentIcon}
                 {(collapsedThreadsEnabled || showRecentlyUsedReactions) && dotMenu}
-            </div>
+            </ul>
         );
     }
 
diff --git a/webapp/channels/src/components/post_view/post_reaction/post_reaction.tsx b/webapp/channels/src/components/post_view/post_reaction/post_reaction.tsx
index 06812ba73da6..354d7492ccc6 100644
--- a/webapp/channels/src/components/post_view/post_reaction/post_reaction.tsx
+++ b/webapp/channels/src/components/post_view/post_reaction/post_reaction.tsx
@@ -31,7 +31,7 @@ export type Props = WrappedComponentProps & {
     channelId?: string;
     postId: string;
     teamId: string;
-    getDotMenuRef: () => HTMLDivElement | null;
+    getDotMenuRef: () => HTMLUListElement | null;
     location?: keyof typeof Locations;
     showEmojiPicker: boolean;
     toggleEmojiPicker: (e?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
diff --git a/webapp/channels/src/components/post_view/post_recent_reactions/post_recent_reactions.tsx b/webapp/channels/src/components/post_view/post_recent_reactions/post_recent_reactions.tsx
index cb445b201dfe..a9f4f3495033 100644
--- a/webapp/channels/src/components/post_view/post_recent_reactions/post_recent_reactions.tsx
+++ b/webapp/channels/src/components/post_view/post_recent_reactions/post_recent_reactions.tsx
@@ -96,13 +96,13 @@ export default class PostRecentReactions extends React.PureComponent<Props, Stat
                     emoji={getEmojiName(emoji)}
                     isEmojiLarge={true}
                 >
-                    <div>
+                    <li>
                         <EmojiItem
                             emoji={emoji}
                             onItemClick={this.handleToggleEmoji}
                             order={n}
                         />
-                    </div>
+                    </li>
                 </WithTooltip>
             </ChannelPermissionGate>
         ),
diff --git a/webapp/channels/src/sass/components/_post-menu.scss b/webapp/channels/src/sass/components/_post-menu.scss
index f262a46f5979..0ee21f8f63af 100644
--- a/webapp/channels/src/sass/components/_post-menu.scss
+++ b/webapp/channels/src/sass/components/_post-menu.scss
@@ -12,6 +12,7 @@
     border: 1px solid transparent;
     border-radius: 4px;
     white-space: normal;
+    list-style: none;
 }
 
 .post-menu__item {

From 60a2389ad6f7974006dc6022ca24b3034a86e90b Mon Sep 17 00:00:00 2001
From: Ayush Chauhan <ayush.chauhan@brightscout.com>
Date: Tue, 24 Dec 2024 16:46:43 +0530
Subject: [PATCH 2/2] MM-61641: Fix lint

---
 .../src/components/post/post_options.tsx      | 104 +++++++++---------
 .../src/sass/components/_post-menu.scss       |   2 +-
 2 files changed, 53 insertions(+), 53 deletions(-)

diff --git a/webapp/channels/src/components/post/post_options.tsx b/webapp/channels/src/components/post/post_options.tsx
index 2782056b57a3..30aab83fe44e 100644
--- a/webapp/channels/src/components/post/post_options.tsx
+++ b/webapp/channels/src/components/post/post_options.tsx
@@ -120,12 +120,12 @@ const PostOptions = (props: Props): JSX.Element => {
     let commentIcon;
     if (showCommentIcon) {
         commentIcon = (
-            <li key="commentIcon__listItem">
-            <CommentIcon
-                handleCommentClick={props.handleCommentClick}
-                postId={post.id}
-                extraClass={commentIconExtraClass}
-                commentCount={props.collapsedThreadsEnabled ? 0 : props.replyCount}
+            <li key='commentIcon__listItem'>
+                <CommentIcon
+                    handleCommentClick={props.handleCommentClick}
+                    postId={post.id}
+                    extraClass={commentIconExtraClass}
+                    commentCount={props.collapsedThreadsEnabled ? 0 : props.replyCount}
                 />
             </li>
         );
@@ -146,7 +146,7 @@ const PostOptions = (props: Props): JSX.Element => {
                 teamId={props.teamId}
                 emojis={props.recentEmojis}
                 size={showMoreReactions ? 3 : 1}
-                />
+            />
         );
     }
 
@@ -154,15 +154,15 @@ const PostOptions = (props: Props): JSX.Element => {
     let postReaction;
     if (showReactionIcon) {
         postReaction = (
-            <li key="postReaction__listItem">
-            <PostReaction
-                channelId={post.channel_id}
-                location={props.location}
-                postId={post.id}
-                teamId={props.teamId}
-                getDotMenuRef={getDotMenuRef}
-                showEmojiPicker={showEmojiPicker}
-                toggleEmojiPicker={toggleEmojiPicker}
+            <li key='postReaction__listItem'>
+                <PostReaction
+                    channelId={post.channel_id}
+                    location={props.location}
+                    postId={post.id}
+                    teamId={props.teamId}
+                    getDotMenuRef={getDotMenuRef}
+                    showEmojiPicker={showEmojiPicker}
+                    toggleEmojiPicker={toggleEmojiPicker}
                 />
             </li>
         );
@@ -171,11 +171,11 @@ const PostOptions = (props: Props): JSX.Element => {
     let flagIcon: ReactNode = null;
     if (!isMobileView && (!isEphemeral && !post.failed && !systemMessage)) {
         flagIcon = (
-            <li key="flagIcon__listItem">
-             <PostFlagIcon
-                location={props.location}
-                postId={post.id}
-                isFlagged={props.isFlagged}
+            <li key='flagIcon__listItem'>
+                <PostFlagIcon
+                    location={props.location}
+                    postId={post.id}
+                    isFlagged={props.isFlagged}
                 />
             </li>
         );
@@ -184,12 +184,12 @@ const PostOptions = (props: Props): JSX.Element => {
     // Action menus
     const showActionsMenuIcon = props.shouldShowActionsMenu && (isMobileView || hoverLocal);
     const actionsMenu = showActionsMenuIcon && (
-        <li key="actionsMenu__listItem">
-        <ActionsMenu
-            post={post}
-            location={props.location}
-            handleDropdownOpened={handleActionsMenuOpened}
-            isMenuOpen={showActionsMenu}
+        <li key='actionsMenu__listItem'>
+            <ActionsMenu
+                post={post}
+                location={props.location}
+                handleDropdownOpened={handleActionsMenuOpened}
+                isMenuOpen={showActionsMenu}
             />
         </li>
     );
@@ -202,8 +202,8 @@ const PostOptions = (props: Props): JSX.Element => {
                     const Component = item.component as any;
                     return (
                         <li key={item.id}>
-                        <Component
-                            post={props.post}
+                            <Component
+                                post={props.post}
                             />
                         </li>
                     );
@@ -213,17 +213,17 @@ const PostOptions = (props: Props): JSX.Element => {
     }
 
     const dotMenu = (
-        <li key="dotMenu__listItem">
-        <DotMenu
-            post={props.post}
-            location={props.location}
-            isFlagged={props.isFlagged}
-            handleDropdownOpened={handleDotMenuOpened}
-            handleCommentClick={props.handleCommentClick}
-            handleAddReactionClick={toggleEmojiPicker}
-            isReadOnly={isReadOnly || channelIsArchived}
-            isMenuOpen={showDotMenu}
-            enableEmojiPicker={props.enableEmojiPicker}
+        <li key='dotMenu__listItem'>
+            <DotMenu
+                post={props.post}
+                location={props.location}
+                isFlagged={props.isFlagged}
+                handleDropdownOpened={handleDotMenuOpened}
+                handleCommentClick={props.handleCommentClick}
+                handleAddReactionClick={toggleEmojiPicker}
+                isReadOnly={isReadOnly || channelIsArchived}
+                isMenuOpen={showDotMenu}
+                enableEmojiPicker={props.enableEmojiPicker}
             />
         </li>
     );
@@ -250,7 +250,7 @@ const PostOptions = (props: Props): JSX.Element => {
                 {dotMenu}
                 {flagIcon}
                 {props.canReply && !hasCRTFooter &&
-                  <li key="commentIcon__listItem">
+                <li key='commentIcon__listItem'>
                     <CommentIcon
                         location={props.location}
                         handleCommentClick={props.handleCommentClick}
@@ -258,20 +258,20 @@ const PostOptions = (props: Props): JSX.Element => {
                         postId={post.id}
                         searchStyle={'search-item__comment'}
                         extraClass={props.replyCount ? 'icon--visible' : ''}
-                        />
-                   </li>
+                    />
+                </li>
                 }
-                <li key="searchItem__listItem">
-                <a
-                    href='#'
-                    onClick={props.handleJumpClick}
-                    className='search-item__jump'
+                <li key='searchItem__listItem'>
+                    <a
+                        href='#'
+                        onClick={props.handleJumpClick}
+                        className='search-item__jump'
                     >
-                    <FormattedMessage
-                        id='search_item.jump'
-                        defaultMessage='Jump'
+                        <FormattedMessage
+                            id='search_item.jump'
+                            defaultMessage='Jump'
                         />
-                </a>
+                    </a>
                 </li>
             </ul>
         );
diff --git a/webapp/channels/src/sass/components/_post-menu.scss b/webapp/channels/src/sass/components/_post-menu.scss
index 0ee21f8f63af..8e35f99b9533 100644
--- a/webapp/channels/src/sass/components/_post-menu.scss
+++ b/webapp/channels/src/sass/components/_post-menu.scss
@@ -11,8 +11,8 @@
     padding: 4px;
     border: 1px solid transparent;
     border-radius: 4px;
-    white-space: normal;
     list-style: none;
+    white-space: normal;
 }
 
 .post-menu__item {