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

MM-53813: Fix(accessibility): on channels page (#24122)

Просмотр исходного кода 
* fix(accessibility): on channels page

* fix lint and update dynamic-virtualized-list

* fix snapshot and update per feedback

* fix e2e tests

* fix test

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
Этот коммит содержится в:
Saturnino Abril
2023-07-28 11:17:11 -04:00
коммит произвёл GitHub
родитель a47af39d80
Коммит 93a2c3281a
46 изменённых файлов: 149 добавлений и 141 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

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

@@ -32,7 +32,7 @@
"crypto-browserify": "3.12.0",
"css-vars-ponyfill": "2.4.8",
"date-fns": "2.29.3",
"dynamic-virtualized-list": "github:mattermost/dynamic-virtualized-list#1c330717d6778315a40e70137ace38247c6a1d0f",
"dynamic-virtualized-list": "github:mattermost/dynamic-virtualized-list#3fe918b41de4cb08dbf43f1207bb58827b38e833",
"emoji-regex": "10.2.1",
"exif2css": "1.3.0",
"fast-deep-equal": "3.1.3",

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

@@ -65,7 +65,7 @@ exports[`components/SearchableChannelList should match init snapshot 1`] = `
</div>
<div
className="more-modal__list"
role="application"
role="search"
tabIndex={-1}
>
<div

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

@@ -56,7 +56,6 @@ exports[`components/ChannelHeader should match snapshot with last active display
</span>
</strong>
<span
aria-label="dropdown icon"
className="icon icon-chevron-down header-dropdown-chevron-icon"
id="channelHeaderDropdownIcon"
/>
@@ -380,7 +379,6 @@ exports[`components/ChannelHeader should match snapshot with no last active disp
</span>
</strong>
<span
aria-label="dropdown icon"
className="icon icon-chevron-down header-dropdown-chevron-icon"
id="channelHeaderDropdownIcon"
/>
@@ -676,7 +674,6 @@ exports[`components/ChannelHeader should render active channel files 1`] = `
</span>
</strong>
<span
aria-label="dropdown icon"
className="icon icon-chevron-down header-dropdown-chevron-icon"
id="channelHeaderDropdownIcon"
/>
@@ -978,7 +975,6 @@ exports[`components/ChannelHeader should render active flagged posts 1`] = `
</span>
</strong>
<span
aria-label="dropdown icon"
className="icon icon-chevron-down header-dropdown-chevron-icon"
id="channelHeaderDropdownIcon"
/>
@@ -1280,7 +1276,6 @@ exports[`components/ChannelHeader should render active mentions posts 1`] = `
</span>
</strong>
<span
aria-label="dropdown icon"
className="icon icon-chevron-down header-dropdown-chevron-icon"
id="channelHeaderDropdownIcon"
/>
@@ -1582,7 +1577,6 @@ exports[`components/ChannelHeader should render active pinned posts 1`] = `
</span>
</strong>
<span
aria-label="dropdown icon"
className="icon icon-chevron-down header-dropdown-chevron-icon"
id="channelHeaderDropdownIcon"
/>
@@ -1887,7 +1881,6 @@ exports[`components/ChannelHeader should render archived view 1`] = `
</span>
</strong>
<span
aria-label="dropdown icon"
className="icon icon-chevron-down header-dropdown-chevron-icon"
id="channelHeaderDropdownIcon"
/>
@@ -2155,7 +2148,6 @@ exports[`components/ChannelHeader should render correct menu when muted 1`] = `
</span>
</strong>
<span
aria-label="dropdown icon"
className="icon icon-chevron-down header-dropdown-chevron-icon"
id="channelHeaderDropdownIcon"
/>
@@ -2489,7 +2481,6 @@ exports[`components/ChannelHeader should render not active channel files 1`] = `
</span>
</strong>
<span
aria-label="dropdown icon"
className="icon icon-chevron-down header-dropdown-chevron-icon"
id="channelHeaderDropdownIcon"
/>
@@ -2799,7 +2790,6 @@ exports[`components/ChannelHeader should render properly when custom status is e
</span>
</strong>
<span
aria-label="dropdown icon"
className="icon icon-chevron-down header-dropdown-chevron-icon"
id="channelHeaderDropdownIcon"
/>
@@ -3123,7 +3113,6 @@ exports[`components/ChannelHeader should render properly when custom status is s
</span>
</strong>
<span
aria-label="dropdown icon"
className="icon icon-chevron-down header-dropdown-chevron-icon"
id="channelHeaderDropdownIcon"
/>
@@ -3459,7 +3448,6 @@ exports[`components/ChannelHeader should render properly when empty 1`] = `
</span>
</strong>
<span
aria-label="dropdown icon"
className="icon icon-chevron-down header-dropdown-chevron-icon"
id="channelHeaderDropdownIcon"
/>
@@ -3761,7 +3749,6 @@ exports[`components/ChannelHeader should render properly when populated 1`] = `
</span>
</strong>
<span
aria-label="dropdown icon"
className="icon icon-chevron-down header-dropdown-chevron-icon"
id="channelHeaderDropdownIcon"
/>
@@ -4063,7 +4050,6 @@ exports[`components/ChannelHeader should render properly when populated with cha
</span>
</strong>
<span
aria-label="dropdown icon"
className="icon icon-chevron-down header-dropdown-chevron-icon"
id="channelHeaderDropdownIcon"
/>
@@ -4396,7 +4382,6 @@ exports[`components/ChannelHeader should render shared view 1`] = `
</span>
</strong>
<span
aria-label="dropdown icon"
className="icon icon-chevron-down header-dropdown-chevron-icon"
id="channelHeaderDropdownIcon"
/>
@@ -4700,7 +4685,6 @@ exports[`components/ChannelHeader should render the pinned icon with the pinned
</span>
</strong>
<span
aria-label="dropdown icon"
className="icon icon-chevron-down header-dropdown-chevron-icon"
id="channelHeaderDropdownIcon"
/>

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

@@ -785,7 +785,6 @@ class ChannelHeader extends React.PureComponent<Props, State> {
<span
id='channelHeaderDropdownIcon'
className='icon icon-chevron-down header-dropdown-chevron-icon'
aria-label={formatMessage({id: 'generic_icons.dropdown', defaultMessage: 'Dropdown Icon'}).toLowerCase()}
/>
</button>
</div>

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

@@ -267,7 +267,7 @@ export default function InviteView(props: Props) {
disabled={!isInviteValid}
onClick={props.invite}
className={'btn btn-primary'}
id={props.inviteType === InviteType.MEMBER ? 'inviteMembersButton' : 'inviteGuestButton'}
data-testid={'inviteButton'}
>
<FormattedMessage
id='invite_modal.invite'

1
webapp/channels/src/components/post/post_component.tsx
Просмотреть файл

@@ -513,7 +513,6 @@ const PostComponent = (props: Props): JSX.Element => {
{(isSearchResultItem || (props.location !== Locations.CENTER && (props.isPinnedPosts || props.isFlaggedPosts))) && <DateSeparator date={currentPostDay}/>}
<PostAriaLabelDiv
ref={postRef}
role='listitem'
id={getTestId()}
data-testid={props.location === 'CENTER' ? 'postView' : ''}
tabIndex={0}

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

@@ -253,7 +253,6 @@ exports[`components/post_edit_history should match snapshot 1`] = `
style="max-height: 600px;"
>
<div
aria-readonly="true"
class="post-message__text"
dir="auto"
id="rhsPostMessageText_post_id"

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

@@ -2,7 +2,7 @@
// See LICENSE.txt for license information.
import React, {memo, useCallback, useState} from 'react';
import {FormattedMessage} from 'react-intl';
import {useIntl} from 'react-intl';
import classNames from 'classnames';
import {
FloatingFocusManager,
@@ -41,19 +41,16 @@ function PostPriorityPickerOverlay({
onClose,
}: Props) {
const [pickerOpen, setPickerOpen] = useState(false);
const {formatMessage} = useIntl();
const messagePriority = formatMessage({id: 'shortcuts.msgs.formatting_bar.post_priority', defaultMessage: 'Message priority'});
const {
reference: tooltipRef,
getReferenceProps: getTooltipReferenceProps,
tooltip,
} = useTooltip({
placement: 'top',
message: (
<FormattedMessage
id='shortcuts.msgs.formatting_bar.post_priority'
defaultMessage={'Message priority'}
/>
),
message: messagePriority,
});
const handleClose = useCallback(() => {
@@ -104,6 +101,7 @@ function PostPriorityPickerOverlay({
className={classNames({control: true, active: pickerOpen})}
disabled={disabled}
type='button'
aria-label={messagePriority}
{...getPickerReferenceProps()}
>
<AlertCircleOutlineIcon

3
webapp/channels/src/components/post_view/post_list_virtualized/post_list_virtualized.tsx
Просмотреть файл

@@ -642,7 +642,6 @@ export default class PostList extends React.PureComponent<Props, State> {
return (
<div
role='list'
className='a11y__region'
data-a11y-sort-order='1'
data-a11y-focus-child={true}
@@ -664,12 +663,10 @@ export default class PostList extends React.PureComponent<Props, State> {
</React.Fragment>
)}
<div
role='presentation'
className='post-list-holder-by-time'
key={'postlist-' + channelId}
>
<div
role='presentation'
className='post-list__table'
>
<div

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

@@ -6,7 +6,6 @@ exports[`components/post_view/PostAttachment should match snapshot 1`] = `
text="post message"
>
<div
aria-readonly="true"
className="post-message__text"
dir="auto"
id="postMessageText_post_id"
@@ -46,7 +45,6 @@ exports[`components/post_view/PostAttachment should match snapshot, on Show Less
text="post message"
>
<div
aria-readonly="true"
className="post-message__text"
dir="auto"
id="postMessageText_post_id"
@@ -86,7 +84,6 @@ exports[`components/post_view/PostAttachment should match snapshot, on Show More
text="post message"
>
<div
aria-readonly="true"
className="post-message__text"
dir="auto"
id="postMessageText_post_id"
@@ -144,7 +141,6 @@ exports[`components/post_view/PostAttachment should match snapshot, on edited po
text="post message"
>
<div
aria-readonly="true"
className="post-message__text"
dir="auto"
id="postMessageText_post_id"
@@ -185,7 +181,6 @@ exports[`components/post_view/PostAttachment should match snapshot, on ephemeral
text="post message"
>
<div
aria-readonly="true"
className="post-message__text"
dir="auto"
id="postMessageText_post_id"

1
webapp/channels/src/components/post_view/post_message_view/post_message_view.tsx
Просмотреть файл

@@ -145,7 +145,6 @@ export default class PostMessageView extends React.PureComponent<Props, State> {
maxHeight={maxHeight}
>
<div
aria-readonly='true'
tabIndex={0}
id={id}
className='post-message__text'

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

@@ -10,7 +10,7 @@ exports[`components/search_bar/SearchBar should match snapshot with search 1`] =
aria-labelledby="searchBox"
autocomplete="off"
class="search__form"
role="application"
role="search"
style="overflow: visible;"
>
<div
@@ -70,7 +70,7 @@ exports[`components/search_bar/SearchBar should match snapshot with search, with
aria-labelledby="searchBox"
autocomplete="off"
class="search__form"
role="application"
role="search"
style="overflow: visible;"
>
<div
@@ -138,7 +138,7 @@ exports[`components/search_bar/SearchBar should match snapshot without search 1`
aria-labelledby="searchBox"
autocomplete="off"
class="search__form"
role="application"
role="search"
style="overflow: visible;"
>
<div
@@ -187,7 +187,7 @@ exports[`components/search_bar/SearchBar should match snapshot without search, w
aria-labelledby="searchBox"
autocomplete="off"
class="search__form"
role="application"
role="search"
style="overflow: visible;"
>
<div
@@ -244,7 +244,7 @@ exports[`components/search_bar/SearchBar should match snapshot without search, w
aria-labelledby="searchBox"
autocomplete="off"
class="search__form"
role="application"
role="search"
style="overflow: visible;"
>
<div

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

@@ -111,7 +111,7 @@ const SearchBar: React.FunctionComponent<Props> = (props: Props): JSX.Element =>
className='search-form__container'
>
<form
role='application'
role='search'
className={classNames(['search__form', {'search__form--focused': isFocused}])}
onSubmit={props.handleSubmit}
style={style.searchForm}

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

@@ -463,7 +463,7 @@ export default class SearchableChannelList extends React.PureComponent<Props, St
{input}
{dropDownContainer}
<div
role='application'
role='search'
className='more-modal__list'
tabIndex={-1}
>

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

@@ -13,7 +13,7 @@ exports[`components/new_channel_modal should match snapshot 1`] = `
id="addChannelsCta"
onClick={[Function]}
>
<li
<div
aria-label="Add channels"
>
<i
@@ -22,7 +22,7 @@ exports[`components/new_channel_modal should match snapshot 1`] = `
<span>
Add Channels
</span>
</li>
</div>
</button>
<Menu
ariaLabel="Add Channels Dropdown"
@@ -63,7 +63,7 @@ exports[`components/new_channel_modal should match snapshot when user has only j
id="addChannelsCta"
onClick={[Function]}
>
<li
<div
aria-label="Add channels"
>
<i
@@ -72,6 +72,6 @@ exports[`components/new_channel_modal should match snapshot when user has only j
<span>
Add Channels
</span>
</li>
</div>
</button>
`;

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

@@ -38,7 +38,7 @@ exports[`components/sidebar/invite_members_button should match snapshot 1`] = `
teamId="team_id2sss"
>
<Connect(ToggleModalButton)
ariaLabel="Invite Users"
ariaLabel="Invite Members"
className="intro-links color--link cursor--pointer"
dialogType={
Object {
@@ -48,7 +48,7 @@ exports[`components/sidebar/invite_members_button should match snapshot 1`] = `
"type": [Function],
}
}
id="introTextInvite"
id="inviteMembersButton"
modalId="invitation"
onClick={[Function]}
>
@@ -58,7 +58,7 @@ exports[`components/sidebar/invite_members_button should match snapshot 1`] = `
"openModal": [Function],
}
}
ariaLabel="Invite Users"
ariaLabel="Invite Members"
className="intro-links color--link cursor--pointer"
dialogType={
Object {
@@ -68,17 +68,17 @@ exports[`components/sidebar/invite_members_button should match snapshot 1`] = `
"type": [Function],
}
}
id="introTextInvite"
id="inviteMembersButton"
modalId="invitation"
onClick={[Function]}
>
<button
aria-label="Invite Users dialog"
aria-label="Invite Members dialog"
className="style--none intro-links color--link cursor--pointer"
id="introTextInvite"
id="inviteMembersButton"
onClick={[Function]}
>
<li
<div
aria-label="Invite Members"
className="SidebarChannelNavigator__inviteMembersLhsButton"
>
@@ -93,7 +93,7 @@ exports[`components/sidebar/invite_members_button should match snapshot 1`] = `
Invite Members
</span>
</FormattedMessage>
</li>
</div>
</button>
</ToggleModalButton>
</Connect(ToggleModalButton)>

4
webapp/channels/src/components/sidebar/add_channels_cta_button.tsx
Просмотреть файл

@@ -117,14 +117,14 @@ const AddChannelsCtaButton = (): JSX.Element | null => {
aria-label={intl.formatMessage({id: 'sidebar_left.add_channel_dropdown.dropdownAriaLabel', defaultMessage: 'Add Channel Dropdown'})}
onClick={handleClick}
>
<li
<div
aria-label={intl.formatMessage({id: 'sidebar_left.sidebar_channel_navigator.addChannelsCta', defaultMessage: 'Add channels'})}
>
<i className='icon-plus-box'/>
<span>
{intl.formatMessage({id: 'sidebar_left.addChannelsCta', defaultMessage: 'Add Channels'})}
</span>
</li>
</div>
</button>
);
};

8
webapp/channels/src/components/sidebar/invite_members_button.tsx
Просмотреть файл

@@ -43,14 +43,14 @@ const InviteMembersButton = (props: Props): JSX.Element | null => {
permissions={[Permissions.ADD_USER_TO_TEAM, Permissions.INVITE_GUEST]}
>
<ToggleModalButton
ariaLabel={intl.formatMessage({id: 'sidebar_left.inviteUsers', defaultMessage: 'Invite Users'})}
id='introTextInvite'
ariaLabel={intl.formatMessage({id: 'sidebar_left.inviteMembers', defaultMessage: 'Invite Members'})}
id='inviteMembersButton'
className={`intro-links color--link cursor--pointer${props.className ? ` ${props.className}` : ''}`}
modalId={ModalIdentifiers.INVITATION}
dialogType={InvitationModal}
onClick={handleButtonClick}
>
<li
<div
className='SidebarChannelNavigator__inviteMembersLhsButton'
aria-label={intl.formatMessage({id: 'sidebar_left.sidebar_channel_navigator.inviteUsers', defaultMessage: 'Invite Members'})}
>
@@ -59,7 +59,7 @@ const InviteMembersButton = (props: Props): JSX.Element | null => {
id={'sidebar_left.inviteMembers'}
defaultMessage='Invite Members'
/>
</li>
</div>
</ToggleModalButton>
</TeamPermissionGate>
);

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

@@ -40,6 +40,14 @@ type Props = StaticProps & {
}
export const SidebarCategoryHeader = React.forwardRef((props: Props, ref?: React.Ref<HTMLButtonElement>) => {
const {dragHandleProps} = props;
// (Accessibility) Ensures interactive controls are not nested as they are not always announced
// by screen readers or can cause focus problems for assistive technologies.
if (dragHandleProps && dragHandleProps.role) {
Reflect.deleteProperty(dragHandleProps, 'role');
}
return (
<div
className={classNames('SidebarChannelGroupHeader', {
@@ -61,7 +69,7 @@ export const SidebarCategoryHeader = React.forwardRef((props: Props, ref?: React
/>
<div
className='SidebarChannelGroupHeader_text'
{...props.dragHandleProps}
{...dragHandleProps}
>
{wrapEmojis(props.displayName)}
</div>

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

@@ -4788,7 +4788,6 @@
"sidebar_left.channel_navigator.goForwardLabel": "Forward",
"sidebar_left.channel_navigator.jumpTo": "Find channel",
"sidebar_left.inviteMembers": "Invite Members",
"sidebar_left.inviteUsers": "Invite Users",
"sidebar_left.sidebar_category_menu.createCategory": "Create New Category",
"sidebar_left.sidebar_category_menu.deleteCategory": "Delete Category",
"sidebar_left.sidebar_category_menu.dropdownAriaLabel": "Edit category menu",

1
webapp/channels/src/plugins/test/__snapshots__/post_type.test.jsx.snap
Просмотреть файл

@@ -71,7 +71,6 @@ exports[`plugins/PostMessageView should match snapshot with no extended post typ
text="this is some text"
>
<div
aria-readonly="true"
className="post-message__text"
dir="auto"
id="postMessageText_post_id"

4
webapp/channels/src/sass/layout/_sidebar-left.scss
Просмотреть файл

@@ -212,7 +212,7 @@ $sidebarOpacityAnimationDuration: 0.15s;
margin-left: 0;
background: none;
li {
div {
display: flex;
margin-left: 15px;
}
@@ -753,7 +753,7 @@ $sidebarOpacityAnimationDuration: 0.15s;
}
}
#introTextInvite,
#inviteMembersButton,
#addChannelsCta {
display: flex;
width: 100%;

14
webapp/package-lock.json сгенерированный
Просмотреть файл

@@ -78,7 +78,7 @@
"crypto-browserify": "3.12.0",
"css-vars-ponyfill": "2.4.8",
"date-fns": "2.29.3",
"dynamic-virtualized-list": "github:mattermost/dynamic-virtualized-list#1c330717d6778315a40e70137ace38247c6a1d0f",
"dynamic-virtualized-list": "github:mattermost/dynamic-virtualized-list#3fe918b41de4cb08dbf43f1207bb58827b38e833",
"emoji-regex": "10.2.1",
"exif2css": "1.3.0",
"fast-deep-equal": "3.1.3",
@@ -9623,8 +9623,8 @@
},
"node_modules/dynamic-virtualized-list": {
"version": "1.0.0-beta",
"resolved": "git+ssh://git@github.com/mattermost/dynamic-virtualized-list.git#1c330717d6778315a40e70137ace38247c6a1d0f",
"integrity": "sha512-L07ABAHYAd/47wdSEQTvaGWf+Ar+VzFjQH/n9+RvRy9Au+ncsE9QMmx/ObaDLvNeRgvrJon/mCe1toLarxpUXg==",
"resolved": "git+ssh://git@github.com/mattermost/dynamic-virtualized-list.git#3fe918b41de4cb08dbf43f1207bb58827b38e833",
"integrity": "sha512-xvrcAQ+zZoxChBDKZnOB9a6qK7T36FMDJXL5YhdpcjWLrmW2AlEepRFSPDWi6MXObLjtJ0iK2gh6ldF6vlr/DQ==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.0.0",
@@ -30654,9 +30654,9 @@
"optional": true
},
"dynamic-virtualized-list": {
"version": "git+ssh://git@github.com/mattermost/dynamic-virtualized-list.git#1c330717d6778315a40e70137ace38247c6a1d0f",
"integrity": "sha512-L07ABAHYAd/47wdSEQTvaGWf+Ar+VzFjQH/n9+RvRy9Au+ncsE9QMmx/ObaDLvNeRgvrJon/mCe1toLarxpUXg==",
"from": "dynamic-virtualized-list@github:mattermost/dynamic-virtualized-list#1c330717d6778315a40e70137ace38247c6a1d0f",
"version": "git+ssh://git@github.com/mattermost/dynamic-virtualized-list.git#3fe918b41de4cb08dbf43f1207bb58827b38e833",
"integrity": "sha512-xvrcAQ+zZoxChBDKZnOB9a6qK7T36FMDJXL5YhdpcjWLrmW2AlEepRFSPDWi6MXObLjtJ0iK2gh6ldF6vlr/DQ==",
"from": "dynamic-virtualized-list@github:mattermost/dynamic-virtualized-list#3fe918b41de4cb08dbf43f1207bb58827b38e833",
"requires": {
"@babel/runtime": "^7.0.0",
"memoize-one": "^3.1.1"
@@ -35367,7 +35367,7 @@
"crypto-browserify": "3.12.0",
"css-vars-ponyfill": "2.4.8",
"date-fns": "2.29.3",
"dynamic-virtualized-list": "github:mattermost/dynamic-virtualized-list#1c330717d6778315a40e70137ace38247c6a1d0f",
"dynamic-virtualized-list": "github:mattermost/dynamic-virtualized-list#3fe918b41de4cb08dbf43f1207bb58827b38e833",
"emoji-datasource": "6.1.1",
"emoji-datasource-apple": "6.1.1",
"emoji-datasource-google": "6.1.1",