[MM-61641]: Ensure implicit list markup is avoided (#29787)

* MM-61641: Update post options to use semantic list elements

* MM-61641: Fix lint

* Apply suggestions from code review

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
Co-authored-by: Harrison Healey <harrisonmhealey@gmail.com>

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 = (
-            <CommentIcon
+            <li>
-                handleCommentClick={props.handleCommentClick}
+                <CommentIcon
-                postId={post.id}
+                    handleCommentClick={props.handleCommentClick}
-                extraClass={commentIconExtraClass}
+                    postId={post.id}
-                commentCount={props.collapsedThreadsEnabled ? 0 : props.replyCount}
+                    extraClass={commentIconExtraClass}
-            />
+                    commentCount={props.collapsedThreadsEnabled ? 0 : props.replyCount}
+                />
+            </li>
         );
     }
 
@@ -152,38 +154,44 @@ const PostOptions = (props: Props): JSX.Element => {
     let postReaction;
     if (showReactionIcon) {
         postReaction = (
-            <PostReaction
+            <li>
-                channelId={post.channel_id}
+                <PostReaction
-                location={props.location}
+                    channelId={post.channel_id}
-                postId={post.id}
+                    location={props.location}
-                teamId={props.teamId}
+                    postId={post.id}
-                getDotMenuRef={getDotMenuRef}
+                    teamId={props.teamId}
-                showEmojiPicker={showEmojiPicker}
+                    getDotMenuRef={getDotMenuRef}
-                toggleEmojiPicker={toggleEmojiPicker}
+                    showEmojiPicker={showEmojiPicker}
-            />
+                    toggleEmojiPicker={toggleEmojiPicker}
+                />
+            </li>
         );
     }
 
     let flagIcon: ReactNode = null;
     if (!isMobileView && (!isEphemeral && !post.failed && !systemMessage)) {
         flagIcon = (
-            <PostFlagIcon
+            <li>
-                location={props.location}
+                <PostFlagIcon
-                postId={post.id}
+                    location={props.location}
-                isFlagged={props.isFlagged}
+                    postId={post.id}
-            />
+                    isFlagged={props.isFlagged}
+                />
+            </li>
         );
     }
 
     // Action menus
     const showActionsMenuIcon = props.shouldShowActionsMenu && (isMobileView || hoverLocal);
     const actionsMenu = showActionsMenuIcon && (
-        <ActionsMenu
+        <li>
-            post={post}
+            <ActionsMenu
-            location={props.location}
+                post={post}
-            handleDropdownOpened={handleActionsMenuOpened}
+                location={props.location}
-            isMenuOpen={showActionsMenu}
+                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;
                     return (
-                        <Component
+                        <li key={item.id}>
-                            post={props.post}
+                            <Component
-                            key={item.id}
+                                post={props.post}
-                        />
+                            />
+                        </li>
                     );
                 }
                 return null;
@@ -204,17 +213,19 @@ const PostOptions = (props: Props): JSX.Element => {
     }
 
     const dotMenu = (
-        <DotMenu
+        <li>
-            post={props.post}
+            <DotMenu
-            location={props.location}
+                post={props.post}
-            isFlagged={props.isFlagged}
+                location={props.location}
-            handleDropdownOpened={handleDotMenuOpened}
+                isFlagged={props.isFlagged}
-            handleCommentClick={props.handleCommentClick}
+                handleDropdownOpened={handleDotMenuOpened}
-            handleAddReactionClick={toggleEmojiPicker}
+                handleCommentClick={props.handleCommentClick}
-            isReadOnly={isReadOnly || channelIsArchived}
+                handleAddReactionClick={toggleEmojiPicker}
-            isMenuOpen={showDotMenu}
+                isReadOnly={isReadOnly || channelIsArchived}
-            enableEmojiPicker={props.enableEmojiPicker}
+                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>
                     <CommentIcon
                         location={props.location}
                         handleCommentClick={props.handleCommentClick}
@@ -247,22 +259,25 @@ const PostOptions = (props: Props): JSX.Element => {
                         searchStyle={'search-item__comment'}
                         extraClass={props.replyCount ? 'icon--visible' : ''}
                     />
+                </li>
                 }
-                <a
+                <li>
-                    href='#'
+                    <a
-                    onClick={props.handleJumpClick}
+                        href='#'
-                    className='search-item__jump'
+                        onClick={props.handleJumpClick}
-                >
+                        className='search-item__jump'
-                    <FormattedMessage
+                    >
-                        id='search_item.jump'
+                        <FormattedMessage
-                        defaultMessage='Jump'
+                            id='search_item.jump'
-                    />
+                            defaultMessage='Jump'
-                </a>
+                        />
-            </div>
+                    </a>
+                </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>
         );
     }
 

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;

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>
         ),

webapp/channels/src/sass/components/_post-menu.scss

@@ -11,6 +11,7 @@
     padding: 4px;
     border: 1px solid transparent;
     border-radius: 4px;
+    list-style: none;
     white-space: normal;
 }