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

[MM-61578]: Ensure the Add button is accessible with keyboard (#29653)

Просмотр исходного кода 
* [MA-16]: Ensure the Add button is accessible with keyboard

* [MA-16]: Add translations for label

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
Этот коммит содержится в:
Saurabh Sharma
2025-01-21 02:52:51 +05:30
коммит произвёл GitHub
родитель 821448b94c
Коммит ea3be1a9f2
14 изменённых файлов: 81 добавлений и 40 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

15
webapp/channels/src/components/add_groups_to_channel_modal/__snapshots__/add_groups_to_channel_modal.test.tsx.snap
Просмотреть файл

@@ -157,13 +157,14 @@ exports[`components/AddGroupsToChannelModal should match when renderOption is ca
<div
className="more-modal__actions"
>
<div
<button
aria-label="Add groups to channel"
className="more-modal__actions--round"
>
<i
className="icon icon-plus"
/>
</div>
</button>
</div>
</div>
`;
@@ -206,13 +207,14 @@ exports[`components/AddGroupsToChannelModal should match when renderOption is ca
<div
className="more-modal__actions"
>
<div
<button
aria-label="Add groups to channel"
className="more-modal__actions--round"
>
<i
className="icon icon-plus"
/>
</div>
</button>
</div>
</div>
`;
@@ -255,13 +257,14 @@ exports[`components/AddGroupsToChannelModal should match when renderOption is ca
<div
className="more-modal__actions"
>
<div
<button
aria-label="Add groups to channel"
className="more-modal__actions--round"
>
<i
className="icon icon-plus"
/>
</div>
</button>
</div>
</div>
`;

7
webapp/channels/src/components/add_groups_to_channel_modal/add_groups_to_channel_modal.tsx
Просмотреть файл

@@ -216,9 +216,12 @@ export class AddGroupsToChannelModal extends React.PureComponent<Props, State> {
</div>
</div>
<div className='more-modal__actions'>
<div className='more-modal__actions--round'>
<button
className='more-modal__actions--round'
aria-label='Add groups to channel'
>
<i className='icon icon-plus'/>
</div>
</button>
</div>
</div>
);

10
webapp/channels/src/components/add_groups_to_team_modal/__snapshots__/add_groups_to_team_modal.test.tsx.snap
Просмотреть файл

@@ -196,13 +196,14 @@ exports[`components/AddGroupsToTeamModal should match when renderOption is calle
<div
className="more-modal__actions"
>
<div
<button
aria-label="Add groups to team"
className="more-modal__actions--round"
>
<i
className="icon icon-plus"
/>
</div>
</button>
</div>
</div>
`;
@@ -247,13 +248,14 @@ exports[`components/AddGroupsToTeamModal should match when renderOption is calle
<div
className="more-modal__actions"
>
<div
<button
aria-label="Add groups to team"
className="more-modal__actions--round"
>
<i
className="icon icon-plus"
/>
</div>
</button>
</div>
</div>
`;

7
webapp/channels/src/components/add_groups_to_team_modal/add_groups_to_team_modal.tsx
Просмотреть файл

@@ -223,9 +223,12 @@ export class AddGroupsToTeamModal extends React.PureComponent<Props, State> {
</div>
</div>
<div className='more-modal__actions'>
<div className='more-modal__actions--round'>
<button
className='more-modal__actions--round'
aria-label='Add groups to team'
>
<i className='icon icon-plus'/>
</div>
</button>
</div>
</div>
);

7
webapp/channels/src/components/add_user_to_group_multiselect/multiselect_option/multiselect_option.tsx
Просмотреть файл

@@ -56,11 +56,14 @@ const MultiSelectOption = React.forwardRef(({
</div>
</div>
<div className='more-modal__actions'>
<div className='more-modal__actions--round'>
<button
className='more-modal__actions--round'
aria-label={`Select Option ${option.label}`}
>
<i
className='icon icon-plus'
/>
</div>
</button>
</div>
</div>
);

7
webapp/channels/src/components/add_users_to_team_modal/add_users_to_team_modal.tsx
Просмотреть файл

@@ -135,11 +135,14 @@ export class AddUsersToTeamModal extends React.PureComponent<Props, State> {
</div>
</div>
<div className='more-modal__actions'>
<div className='more-modal__actions--round'>
<button
className='more-modal__actions--round'
aria-label='Add users to team'
>
<i
className='icon icon-plus'
/>
</div>
</button>
</div>
</div>
);

7
webapp/channels/src/components/admin_console/system_roles/system_role/add_users_to_role_modal/add_users_to_role_modal.tsx
Просмотреть файл

@@ -137,11 +137,14 @@ export class AddUsersToRoleModal extends React.PureComponent<Props, State> {
</div>
</div>
<div className='more-modal__actions'>
<div className='more-modal__actions--round'>
<button
className='more-modal__actions--round'
aria-label='Add users to role'
>
<i
className='icon icon-plus'
/>
</div>
</button>
</div>
</div>
);

17
webapp/channels/src/components/channel_invite_modal/channel_invite_modal.tsx
Просмотреть файл

@@ -408,13 +408,9 @@ export class ChannelInviteModal extends React.PureComponent<Props, State> {
{displayName}
{option.is_bot && <BotTag/>}
{isGuest(option.roles) && <GuestTag className='popoverlist'/>}
{displayName === option.username ?
null :
<UsernameSpan
className='ml-2 light'
>
{'@'}{option.username}
</UsernameSpan>
{displayName === option.username ? null : <UsernameSpan className='ml-2 light'>
{'@'}{option.username}
</UsernameSpan>
}
<UserMappingSpan
className='light'
@@ -425,11 +421,14 @@ export class ChannelInviteModal extends React.PureComponent<Props, State> {
</div>
</div>
<div className='more-modal__actions'>
<div className='more-modal__actions--round'>
<button
className='more-modal__actions--round'
aria-label='Add channel to invite'
>
<i
className='icon icon-plus'
/>
</div>
</button>
</div>
</div>
);

7
webapp/channels/src/components/channel_selector_modal/channel_selector_modal.tsx
Просмотреть файл

@@ -186,9 +186,12 @@ export class ChannelSelectorModal extends React.PureComponent<Props, State> {
</div>
</div>
<div className='more-modal__actions'>
<div className='more-modal__actions--round'>
<button
className='more-modal__actions--round'
aria-label='Select channel'
>
<i className='icon icon-plus'/>
</div>
</button>
</div>
</div>
);

10
webapp/channels/src/components/more_direct_channels/list_item/__snapshots__/list_item.test.tsx.snap
Просмотреть файл

@@ -33,13 +33,14 @@ exports[`ListItem should match snapshot when rendering GroupChannel 1`] = `
<div
className="more-modal__actions"
>
<div
<button
aria-label="Add option "
className="more-modal__actions--round"
>
<i
className="icon icon-plus"
/>
</div>
</button>
</div>
</div>
`;
@@ -62,13 +63,14 @@ exports[`ListItem should match snapshot when rendering user 1`] = `
<div
className="more-modal__actions"
>
<div
<button
aria-label="Add option "
className="more-modal__actions--round"
>
<i
className="icon icon-plus"
/>
</div>
</button>
</div>
</div>
`;

12
webapp/channels/src/components/more_direct_channels/list_item/list_item.tsx
Просмотреть файл

@@ -3,6 +3,7 @@
import classNames from 'classnames';
import React, {useCallback} from 'react';
import {useIntl} from 'react-intl';
import Timestamp from 'components/timestamp';
@@ -43,6 +44,7 @@ const ListItem = React.forwardRef((props: Props, ref?: React.Ref<HTMLDivElement>
add,
select,
} = props;
const intl = useIntl();
const {last_post_at: lastPostAt} = option;
@@ -75,9 +77,15 @@ const ListItem = React.forwardRef((props: Props, ref?: React.Ref<HTMLDivElement>
}
<div className='more-modal__actions'>
<div className='more-modal__actions--round'>
<button
className='more-modal__actions--round'
aria-label={intl.formatMessage({
id: 'more_direct_channels.new_convo_add.label',
defaultMessage: 'Add option {label}',
}, {label: option.label})}
>
<i className='icon icon-plus'/>
</div>
</button>
</div>
</div>
);

10
webapp/channels/src/components/team_selector_modal/team_selector_modal.tsx
Просмотреть файл

@@ -190,9 +190,15 @@ export class TeamSelectorModal extends React.PureComponent<Props, State> {
</div>
</div>
<div className='more-modal__actions'>
<div className='more-modal__actions--round'>
<button
className='more-modal__actions--round'
aria-label={this.props.intl.formatMessage({
id: 'add_teams_to_scheme.select_team.label',
defaultMessage: 'Select team {label}',
}, {label: option.label})}
>
<i className='fa fa-plus'/>
</div>
</button>
</div>
</div>
);

2
webapp/channels/src/i18n/en.json
Просмотреть файл

@@ -239,6 +239,7 @@
"add_teams_to_scheme.confirmation.message": "This team is already selected in another team scheme, are you sure you want to move it to this team scheme?",
"add_teams_to_scheme.confirmation.title": "Team Override Scheme Change?",
"add_teams_to_scheme.modalTitle": "Add Teams to Team Selection List",
"add_teams_to_scheme.select_team.label": "Select team {label}",
"add_user_to_channel_modal.add": "Add",
"add_user_to_channel_modal.cancel": "Cancel",
"add_user_to_channel_modal.help": "Type to find a channel. Use ↑↓ to browse, ↵ to select, ESC to dismiss.",
@@ -4390,6 +4391,7 @@
"more_channels.view": "View",
"more_direct_channels.directchannel.deactivated": "{displayname} - Deactivated",
"more_direct_channels.directchannel.you": "{displayname} (you)",
"more_direct_channels.new_convo_add.label": "Add option {label}",
"more_direct_channels.new_convo_note": "This will start a new conversation. If you're adding a lot of people, consider creating a private channel instead.",
"more_direct_channels.new_convo_note.full": "You've reached the maximum number of people for this conversation. Consider creating a private channel instead.",
"more_direct_channels.title": "Direct Messages",

3
webapp/channels/src/sass/components/_modal.scss
Просмотреть файл

@@ -937,7 +937,8 @@
display: none;
width: 32px;
height: 32px;
line-height: 32px;
padding: 0;
border: none;
opacity: 0.75;
text-align: center;
}