IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
Saturnino Abril 2023-07-28 11:17:11 -04:00 committed by GitHub
parent a47af39d80
commit 93a2c3281a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
46 changed files with 149 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
e2e-tests/cypress/.eslintrc.json
View File

@ -15,6 +15,12 @@
"env": {
"cypress/globals": true
},
"settings": {
"react": {
"pragma": "React",
"version": "detect"
}
},
"rules": {
"header/header": [
2,

3
e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_keyboard_usability_spec.js
View File

@ -137,10 +137,11 @@ describe('Verify Accessibility keyboard usability across different regions in th
cy.clickPostCommentIcon(postId);
// * Verify Screen reader should not switch to virtual cursor mode. This is handled by adding a role=application attribute
const regions = ['#sidebar-left', '#rhsContainer .post-right__content', '.search__form', '#advancedTextEditorCell'];
const regions = ['#sidebar-left', '#rhsContainer .post-right__content', '#advancedTextEditorCell'];
regions.forEach((region) => {
cy.get(region).should('have.attr', 'role', 'application');
});
cy.get('.search__form').should('have.attr', 'role', 'search');
cy.get(`#post_${postId}`).children('.post__content').eq(0).should('have.attr', 'role', 'application');
cy.get(`#rhsPost_${postId}`).children('.post__content').eq(0).should('have.attr', 'role', 'application');
});

4
e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_post_spec.js
View File

@ -201,7 +201,7 @@ describe('Verify Accessibility Support in Post', () => {
cy.focused().tab();
// * Verify focus is on the post text
cy.get(`#postMessageText_${postId}`).should('be.focused').and('have.attr', 'aria-readonly', 'true');
cy.get(`#postMessageText_${postId}`).should('be.focused');
});
});
});
@ -231,7 +231,7 @@ describe('Verify Accessibility Support in Post', () => {
cy.getLastPostId().then((postId) => {
cy.get(`#rhsPost_${postId}`).within(() => {
// * Verify focus is on the post text
cy.get(`#rhsPostMessageText_${postId}`).should('be.focused').and('have.attr', 'aria-readonly', 'true');
cy.get(`#rhsPostMessageText_${postId}`).should('be.focused');
cy.focused().tab({shift: true});
// * Verify focus is on the more button

41
e2e-tests/cypress/tests/integration/channels/channel_sidebar/dm_category_spec.ts
View File

@ -24,6 +24,20 @@ describe('MM-T3156 DM category', () => {
cy.apiInitSetup({loginAfter: true, promoteNewUserAsAdmin: true}).then(({team, user}) => {
testUser = user;
cy.visit(`/${team.name}/channels/town-square`);
const usersPrefixes = ['a', 'c', 'd', 'j', 'p', 'u', 'x', 'z'];
usersPrefixes.forEach((prefix) => {
// # Create users with prefixes in alphabetical order
cy.apiCreateUser({prefix}).then(({user: newUser}) => {
cy.apiCreateDirectChannel([testUser.id, newUser.id]).then(({channel}) => {
// # Post message in The DM channel
cy.postMessageAs({sender: newUser, message: 'test', channelId: channel.id});
// add usernames in array for reference
usernames.push(newUser.username);
});
});
});
});
});
@ -36,20 +50,6 @@ describe('MM-T3156 DM category', () => {
});
it('MM-T3156_2 should order DMs based on recent interactions', () => {
const usersPrefixes = ['a', 'c', 'd', 'j', 'p', 'u', 'x', 'z'];
usersPrefixes.forEach((prefix) => {
// # Create users with prefixes in alphabetical order
cy.apiCreateUser({prefix}).then(({user: newUser}) => {
cy.apiCreateDirectChannel([testUser.id, newUser.id]).then(({channel}) => {
// # Post message in The DM channel
cy.postMessageAs({sender: newUser, message: 'test', channelId: channel.id});
// add usernames in array for reference
usernames.push(newUser.username);
});
});
});
// get DM category group
cy.findByLabelText('DIRECT MESSAGES').parents('.SidebarChannelGroup').within(() => {
const usernamesReversed = [...usernames].reverse();
@ -68,15 +68,14 @@ describe('MM-T3156 DM category', () => {
// # Change sorting to be alphabetical
cy.findByText('Sort').trigger('mouseover');
cy.findByText('Alphabetically').click();
cy.findByText('Alphabetically').click().wait(TIMEOUTS.ONE_SEC);
cy.findByLabelText('DIRECT MESSAGES').should('be.visible').
parents('.SidebarChannelGroup').within(() => {
cy.get('.NavGroupContent').children().each(($el, index) => {
// * Verify that the usernames are in alphabetical order
cy.wrap($el).findByText(usernames[index]).should('be.visible');
});
cy.findByLabelText('DIRECT MESSAGES').parents('.SidebarChannelGroup').within(() => {
cy.get('.NavGroupContent').children().each(($el, index) => {
// * Verify that the usernames are in alphabetical order
cy.wrap($el).findByText(usernames[index]).should('be.visible');
});
});
});
it('MM-T3156_4 should not be able to rearrange DMs', () => {

2
e2e-tests/cypress/tests/integration/channels/enterprise/guest_accounts/guest_identification_spec.ts
View File

@ -119,7 +119,7 @@ describe('Guest Accounts', () => {
children().should('have.length', 1).
eq(0).should('contain', testChannel.name).click();
cy.get('#inviteGuestButton').scrollIntoView().click();
cy.findByTestId('inviteButton').scrollIntoView().click();
cy.findByTestId('confirm-done').should('be.visible').click();
// # Get invitation link.

8
e2e-tests/cypress/tests/integration/channels/enterprise/guest_accounts/guest_invitation_ui_spec.ts
View File

@ -65,7 +65,7 @@ describe('Guest Account - Guest User Invitation Flow', () => {
});
// * Verify Invite Guests button is disabled by default
cy.get('#inviteGuestButton').scrollIntoView().should('be.visible').and('be.disabled');
cy.findByTestId('inviteButton').scrollIntoView().should('be.visible').and('be.disabled');
// * Verify Invite People field
const email = `temp-${getRandomId()}@mattermost.com`;
@ -141,7 +141,7 @@ describe('Guest Account - Guest User Invitation Flow', () => {
invitePeople(email, 1, email, 'Town Square', false);
// * Verify Invite Guests button is disabled
cy.get('#inviteGuestButton').should('be.disabled');
cy.findByTestId('inviteButton').should('be.disabled');
});
it('MM-T4449 Invite Guest via Email containing upper case letters', () => {
@ -177,7 +177,7 @@ describe('Guest Account - Guest User Invitation Flow', () => {
children().should('have.length', 1).eq(0).should('contain', newUser.username).click();
// # Click Invite Members
cy.get('#inviteMembersButton').scrollIntoView().click();
cy.findByTestId('inviteButton').scrollIntoView().click();
// * Verify the content and error message in the Invitation Modal
cy.findByTestId('invitationModal').within(() => {
@ -218,7 +218,7 @@ describe('Guest Account - Guest User Invitation Flow', () => {
cy.get('.users-emails-input__menu').children().should('have.length', 1).eq(0).should('contain', email).click();
// # Click Invite Guests Button
cy.get('#inviteGuestButton').scrollIntoView().click();
cy.findByTestId('inviteButton').scrollIntoView().click();
// * Verify invite more button is present
cy.findByTestId('invite-more').should('be.visible');

2
e2e-tests/cypress/tests/integration/channels/enterprise/guest_accounts/helpers.ts
View File

@ -38,7 +38,7 @@ export function invitePeople(typeText: string, resultsCount: number, verifyText:
if (clickInvite) {
// # Click Invite Guests Button
cy.get('#inviteGuestButton').scrollIntoView().click();
cy.findByTestId('inviteButton').scrollIntoView().click();
}
}

6
e2e-tests/cypress/tests/integration/channels/enterprise/guest_accounts/member_invitation_ui_spec.ts
View File

@ -69,7 +69,7 @@ describe('Guest Account - Member Invitation Flow', () => {
cy.get('@clipboard').its('contents').should('eq', `${baseUrl}/signup_user_complete/?id=${testTeam.invite_id}`);
cy.get('#inviteMembersButton').scrollIntoView().should('be.visible').and('be.disabled');
cy.findByTestId('inviteButton').scrollIntoView().should('be.visible').and('be.disabled');
cy.get('.users-emails-input__control').should('be.visible').within(() => {
// * Verify the input placeholder text
cy.get('.users-emails-input__placeholder').should('have.text', 'Enter a name or email address');
@ -224,7 +224,7 @@ describe('Guest Account - Member Invitation Flow', () => {
});
// # Click Invite Members
cy.get('#inviteMembersButton').scrollIntoView().click();
cy.findByTestId('inviteButton').scrollIntoView().click();
// * Verify the content and message in the Invitation Modal
cy.findByTestId('invitationModal').within(() => {
@ -267,7 +267,7 @@ function invitePeople(typeText, resultsCount, verifyText, clickInvite = true) {
// # Click Invite Members
if (clickInvite) {
cy.get('#inviteMembersButton').scrollIntoView().click();
cy.findByTestId('inviteButton').scrollIntoView().click();
}
}

2
e2e-tests/cypress/tests/integration/channels/enterprise/ldap_group/invite_bot_spec.ts
View File

@ -66,7 +66,7 @@ describe('Group Synced Team - Bot invitation flow', () => {
click();
// # Invite the bot
cy.get('#inviteMembersButton').click();
cy.findByTestId('inviteButton').click();
// * Ensure that the response message was not an error
cy.get('.InviteResultRow').find('.reason').should('not.contain', 'Error');

4
e2e-tests/cypress/tests/integration/channels/interactive_dialog/full_dialog_spec.js
View File

@ -18,7 +18,7 @@ const webhookUtils = require('../../../../utils/webhook_utils');
describe('Interactive Dialog', () => {
const inputTypes = {
realname: 'input',
realname: 'text',
someemail: 'email',
somenumber: 'number',
somepassword: 'password',
@ -101,7 +101,7 @@ describe('Interactive Dialog', () => {
cy.wrap($elForm).find('#suggestionList').scrollIntoView().should('be.visible');
// # Click field label to close any opened drop-downs
cy.wrap($elForm).find('label.control-label').scrollIntoView().click();
cy.wrap($elForm).find('label.control-label').scrollIntoView().click({force: true});
} else if (element.name === 'someradiooptions') {
cy.wrap($elForm).find('input').should('be.visible').and('have.length', optionsLength[element.name]);

12
e2e-tests/cypress/tests/integration/channels/interactive_menu/slack_parsing_message_button_spec.js
View File

@ -44,21 +44,29 @@ describe('Interactive Menu', () => {
// # Post an incoming webhook
cy.postIncomingWebhook({url: incomingWebhook.url, data: payload, waitFor: 'attachment-pretext'});
cy.waitUntil(() => cy.findAllByTestId('postContent').then((el) => {
if (el.length > 0) {
return el[1].innerText.includes(payload.attachments[0].actions[0].name);
}
return false;
}));
// # Click on "Skip Parsing" button
cy.findByText('Skip Parsing').should('be.visible').click({force: true});
cy.findByText(payload.attachments[0].actions[0].name).should('be.visible').click({force: true});
cy.wait(TIMEOUTS.HALF_SEC);
// * Verify that it renders original "spoiler" text
cy.uiWaitUntilMessagePostedIncludes('a < a | b > a');
cy.getLastPostId().then((postId) => {
cy.get(`#postMessageText_${postId}`).should('have.html', '<p>a &lt; a | b &gt; a</p>');
});
// # Click on "Do Parsing" button
cy.findByText('Do Parsing').should('be.visible').click({force: true});
cy.findByText(payload.attachments[0].actions[1].name).should('be.visible').click({force: true});
cy.wait(TIMEOUTS.HALF_SEC);
// * Verify that it renders markdown with link
cy.uiWaitUntilMessagePostedIncludes('a b a');
cy.getLastPostId().then((postId) => {
cy.get(`#postMessageText_${postId}`).should('have.html', '<p>a <a class="theme markdown__link" href="http://a" rel="noreferrer" target="_blank"><span> b </span></a> a</p>');
});

2
e2e-tests/cypress/tests/integration/channels/keyboard_shortcuts/ctrl_cmd_shift_l_does_not_change_focus_to_msgbox_spec.js
View File

@ -32,7 +32,7 @@ describe('Keyboard Shortcuts', () => {
cy.uiClose();
// # Open invite members full-page screen
cy.get('#introTextInvite').click();
cy.findByLabelText('Invite Users').click();
// # Press ctrl/cmd+shift+l
cy.get('body').cmdOrCtrlShortcut('{shift+l}');

2
e2e-tests/cypress/tests/integration/channels/onboarding/invalidate_pending_email_invitations_spec.js
View File

@ -103,6 +103,6 @@ describe('Onboarding', () => {
cy.findByRole('textbox', {name: 'Add or Invite People'}).
typeWithForce(email).wait(TIMEOUTS.HALF_SEC).
typeWithForce('{enter}');
cy.get('#inviteMembersButton').click();
cy.findByTestId('inviteButton').click();
}
});

2
e2e-tests/cypress/tests/integration/channels/team_settings/closed_team_invite_by_email_spec.js
View File

@ -83,7 +83,7 @@ describe('Team Settings', () => {
}
cy.findByRole('textbox', {name: 'Add or Invite People'}).type(email, {force: true}).wait(TIMEOUTS.HALF_SEC).type('{enter}', {force: true});
cy.get('#inviteMembersButton').click();
cy.findByTestId('inviteButton').click();
// # Wait for a while to ensure that email notification is sent and logout from sysadmin account
cy.wait(TIMEOUTS.FIVE_SEC);

2
e2e-tests/cypress/tests/integration/channels/team_settings/helpers.js
View File

@ -40,7 +40,7 @@ export const inviteUserByEmail = (email) => {
typeWithForce(email).
wait(TIMEOUTS.HALF_SEC).
typeWithForce('{enter}');
cy.get('#inviteMembersButton').click();
cy.findByTestId('inviteButton').click();
// # Wait for a while to ensure that email notification is sent
cy.wait(TIMEOUTS.TWO_SEC);

2
e2e-tests/cypress/tests/integration/channels/team_settings/invite_members_spec.js
View File

@ -172,7 +172,7 @@ function inviteUser(user) {
cy.get('.users-emails-input__menu').children().eq(0).should('contain', user.username).click();
// # Click Invite Members
cy.get('#inviteMembersButton').scrollIntoView().click();
cy.findByTestId('inviteButton').scrollIntoView().click();
}
function inviteUserToTeamAsMember(testUser, testTeam, user) {

2
e2e-tests/cypress/tests/integration/channels/team_settings/invite_user_to_closed_team_spec.js
View File

@ -82,6 +82,6 @@ describe('Team Settings', () => {
typeWithForce(email).
wait(TIMEOUTS.HALF_SEC).
typeWithForce('{enter}');
cy.get('#inviteMembersButton').click();
cy.findByTestId('inviteButton').click();
}
});

2
e2e-tests/cypress/tests/integration/channels/team_settings/teams_spec.js
View File

@ -93,7 +93,7 @@ describe('Teams Suite', () => {
click();
// # Click "Invite Members" button, then "Done" button
cy.get('#inviteMembersButton').click();
cy.findByTestId('inviteButton').click();
cy.findByTestId('confirm-done').click();
// * As sysadmin, verify system message posts in Town Square and Off-Topic

6
e2e-tests/cypress/tests/integration/playbooks/channels/broadcast_spec.js
View File

@ -325,10 +325,10 @@ const verifyInitialAndStatusPostInBroadcast = (testTeam, channelName, runName, i
should('exist').
within(() => {
// * Thread should have two posts
cy.findAllByRole('listitem').should('have.length', 2);
cy.findAllByTestId('postContent').should('have.length', 2);
// * The first should be announcement
cy.findAllByRole('listitem').eq(0).contains(initialMessage);
cy.findAllByTestId('postContent').eq(0).contains(initialMessage);
// * Latest post should be update
cy.get(`#rhsPost_${lastPostId}`).contains(
@ -354,7 +354,7 @@ const deleteLatestPostRoot = (testTeam, channelName) => {
cy.get('#rhsContainer').
should('exist').
within(() => {
cy.findAllByRole('listitem').eq(0).then((root) => {
cy.findAllByTestId('postContent').eq(0).parent().then((root) => {
const rootId = root.attr('id').slice(8);
// # Click root's post dot menu.

2
e2e-tests/cypress/tests/support/ui/team.js
View File

@ -14,7 +14,7 @@ Cypress.Commands.add('uiInviteMemberToCurrentTeam', (username) => {
cy.get('.users-emails-input__control input').typeWithForce(username).as('input');
cy.get('.users-emails-input__option ').contains(`@${username}`);
cy.get('@input').typeWithForce('{enter}');
cy.get('#inviteMembersButton').click();
cy.findByTestId('inviteButton').click();
// * Verify user invited to team
cy.get('.invitation-modal-confirm--sent .InviteResultRow').

24
e2e-tests/playwright/support/test_fixture.ts
View File

@ -19,8 +19,9 @@ type ExtendedFixtures = {
};
export const test = base.extend<ExtendedFixtures>({
axe: async ({page}, use) => {
const ab = new AxeBuilderExtended(page);
// eslint-disable-next-line no-empty-pattern
axe: async ({}, use) => {
const ab = new AxeBuilderExtended();
await use(ab);
},
pw: async ({browser, viewport}, use) => {
@ -93,24 +94,15 @@ class PlaywrightExtended {
}
class AxeBuilderExtended {
/**
* Each page should have its own Axe Builder to specifically list known issues
* which are to be excluded from being scanned until issues are fixed.
* Excluded element should have a corresponding ticket.
*/
// '<site_url>/login'
readonly loginPage: () => AxeBuilder;
readonly builder: (page: Page, disableRules?: string[]) => AxeBuilder;
// See https://github.com/dequelabs/axe-core/blob/master/doc/API.md#axe-core-tags
readonly tags: string[] = ['wcag2a', 'wcag2aa'];
// See https://github.com/dequelabs/axe-core/blob/master/doc/rule-descriptions.md#wcag-20-level-a--aa-rules
readonly disabledRules: string[] = [];
constructor(page: Page) {
this.loginPage = () => {
return new AxeBuilder({page}).withTags(this.tags).disableRules(this.disabledRules);
constructor() {
// See https://github.com/dequelabs/axe-core/blob/master/doc/rule-descriptions.md#wcag-20-level-a--aa-rules
this.builder = (page: Page, disableRules?: string[]) => {
return new AxeBuilder({page}).withTags(this.tags).disableRules(disableRules || []);
};
}

26
e2e-tests/playwright/tests/accessibility/channels/intro_channel.spec.ts Normal file
View File

@ -0,0 +1,26 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import {expect, test} from '@e2e-support/test_fixture';
test('Intro to channel', async ({pw, pages, axe}) => {
// Create and sign in a new user
const {user} = await pw.initSetup();
// Log in a user in new browser context
const {page} = await pw.testBrowser.login(user);
// Visit a default channel page
const channelsPage = new pages.ChannelsPage(page);
await channelsPage.goto();
await channelsPage.toBeVisible();
await channelsPage.postMessage('hello');
await channelsPage.sendMessage();
// # Analyze the page
// Disable 'color-contrast' to be addressed by MM-53814
const accessibilityScanResults = await axe.builder(page, ['color-contrast']).analyze();
// * Should have no violation
expect(accessibilityScanResults.violations).toHaveLength(0);
});

2
e2e-tests/playwright/tests/accessibility/common/login.spec.ts
View File

@ -12,7 +12,7 @@ test('/login', async ({pw, pages, page, axe}) => {
await loginPage.toBeVisible();
// # Analyze the page
const accessibilityScanResults = await axe.loginPage().analyze();
const accessibilityScanResults = await axe.builder(loginPage.page).analyze();
// * Should have no violation
expect(accessibilityScanResults.violations).toHaveLength(0);

2
webapp/channels/package.json
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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 generated
View File

@ -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",