From c82a24f39667bfd84244154e2c07e5b2a25befe9 Mon Sep 17 00:00:00 2001
From: Devin Binnie <52460000+devinbinnie@users.noreply.github.com>
Date: Mon, 12 May 2025 09:08:03 -0400
Subject: [PATCH] [MM-62975][MM-62981] Invite Modal accessibility fixes
 (#30960)

* [MM-62975] Convert results table to actual table instead of divs

* [MM-62981] Ensure remove user button is focusable

* fix playwright test

* fix playwright test

---------

Co-authored-by: yasserfaraazkhan <attitude3cena.yf@gmail.com>
---
 .../invitation_modal/result_table.tsx         | 51 ++++++++++---------
 .../widgets/inputs/users_emails_input.tsx     | 19 +++++--
 2 files changed, 42 insertions(+), 28 deletions(-)

diff --git a/webapp/channels/src/components/invitation_modal/result_table.tsx b/webapp/channels/src/components/invitation_modal/result_table.tsx
index 55fc3e2b1c..75c4affe83 100644
--- a/webapp/channels/src/components/invitation_modal/result_table.tsx
+++ b/webapp/channels/src/components/invitation_modal/result_table.tsx
@@ -90,22 +90,24 @@ export default function ResultTable(props: Props) {
     return (
         <div className={wrapperClass}>
             {header}
-            <div className='InviteResultTable'>
-                <div className='table-header'>
-                    <div className='people-header'>
-                        <FormattedMessage
-                            id='invitation-modal.confirm.people-header'
-                            defaultMessage='People'
-                        />
-                    </div>
-                    <div className='details-header'>
-                        <FormattedMessage
-                            id='invitation-modal.confirm.details-header'
-                            defaultMessage='Details'
-                        />
-                    </div>
-                </div>
-                <div className='rows'>
+            <table className='InviteResultTable'>
+                <thead>
+                    <tr className='table-header'>
+                        <th className='people-header'>
+                            <FormattedMessage
+                                id='invitation-modal.confirm.people-header'
+                                defaultMessage='People'
+                            />
+                        </th>
+                        <th className='details-header'>
+                            <FormattedMessage
+                                id='invitation-modal.confirm.details-header'
+                                defaultMessage='Details'
+                            />
+                        </th>
+                    </tr>
+                </thead>
+                <tbody className='rows'>
                     {props.rows.map((invitation: InviteResult) => {
                         let icon;
                         let username;
@@ -163,27 +165,26 @@ export default function ResultTable(props: Props) {
                         }
 
                         return (
-                            <div
+                            <tr
                                 key={reactKey}
                                 className='InviteResultRow'
                             >
-                                <div className='username-or-icon'>
+                                <td className='username-or-icon'>
                                     {icon}
                                     <span className={className}>
                                         {username}
                                         {botBadge}
                                         {guestBadge}
                                     </span>
-                                </div>
-                                <div className='reason'>
+                                </td>
+                                <td className='reason'>
                                     {reason}
-                                </div>
-                            </div>
+                                </td>
+                            </tr>
                         );
                     })}
-
-                </div>
-            </div>
+                </tbody>
+            </table>
         </div>
     );
 }
diff --git a/webapp/channels/src/components/widgets/inputs/users_emails_input.tsx b/webapp/channels/src/components/widgets/inputs/users_emails_input.tsx
index e38e60d540..7c2be22f58 100644
--- a/webapp/channels/src/components/widgets/inputs/users_emails_input.tsx
+++ b/webapp/channels/src/components/widgets/inputs/users_emails_input.tsx
@@ -262,9 +262,22 @@ export default class UsersEmailsInput extends React.PureComponent<Props, State>
     MultiValueRemove = (props: MultiValueRemoveProps<EmailInvite | UserProfile, true>) => {
         const {children, innerProps} = props;
 
-        return (<div {...innerProps}>
-            {children || <CloseCircleSolidIcon/>}
-        </div>);
+        return (
+            <div
+                {...innerProps}
+                role='button'
+                tabIndex={0}
+                onKeyDown={(e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        innerProps.onClick?.(e as unknown as React.MouseEvent<HTMLDivElement, MouseEvent>);
+                    }
+                }}
+            >
+                {children || <CloseCircleSolidIcon/>}
+            </div>
+        );
     };
 
     components = {