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

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

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