mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

[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>
Этот коммит содержится в:
Devin Binnie
2025-05-12 09:08:03 -04:00
коммит произвёл GitHub
родитель e0f54447b9
Коммит c82a24f396
2 изменённых файлов: 42 добавлений и 28 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

51
webapp/channels/src/components/invitation_modal/result_table.tsx
Просмотреть файл

@@ -90,22 +90,24 @@ export default function ResultTable(props: Props) {
return ( return (
<div className={wrapperClass}> <div className={wrapperClass}>
{header} {header}
<div className='InviteResultTable'> <table className='InviteResultTable'>
<div className='table-header'> <thead>
<div className='people-header'> <tr className='table-header'>
<FormattedMessage <th className='people-header'>
id='invitation-modal.confirm.people-header' <FormattedMessage
defaultMessage='People' id='invitation-modal.confirm.people-header'
/> defaultMessage='People'
</div> />
<div className='details-header'> </th>
<FormattedMessage <th className='details-header'>
id='invitation-modal.confirm.details-header' <FormattedMessage
defaultMessage='Details' id='invitation-modal.confirm.details-header'
/> defaultMessage='Details'
</div> />
</div> </th>
<div className='rows'> </tr>
</thead>
<tbody className='rows'>
{props.rows.map((invitation: InviteResult) => { {props.rows.map((invitation: InviteResult) => {
let icon; let icon;
let username; let username;
@@ -163,27 +165,26 @@ export default function ResultTable(props: Props) {
} }
return ( return (
<div <tr
key={reactKey} key={reactKey}
className='InviteResultRow' className='InviteResultRow'
> >
<div className='username-or-icon'> <td className='username-or-icon'>
{icon} {icon}
<span className={className}> <span className={className}>
{username} {username}
{botBadge} {botBadge}
{guestBadge} {guestBadge}
</span> </span>
</div> </td>
<div className='reason'> <td className='reason'>
{reason} {reason}
</div> </td>
</div> </tr>
); );
})} })}
</tbody>
</div> </table>
</div>
</div> </div>
); );
} }

19
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>) => { MultiValueRemove = (props: MultiValueRemoveProps<EmailInvite | UserProfile, true>) => {
const {children, innerProps} = props; const {children, innerProps} = props;
return (<div {...innerProps}> return (
{children || <CloseCircleSolidIcon/>} <div
</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 = { components = {