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

[MM-55285]: Screen reader speaking wrong item in list in Find Channels modal (#29552)

Просмотр исходного кода 
* [MA-11]: Fix Screen reader speaking wrong item in list in Find Channels modal

* [MA-11]: Update types across files

* [MA-11]: Minor refactoring

* [MA-11]: Fix e2e test

* [MA-11]: Fix E2E tests

* [MA-11]: Update role and id

* [MA-11]: Fix playwright tests

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
Этот коммит содержится в:
Saurabh Sharma
2025-01-17 01:05:13 +05:30
коммит произвёл GitHub
родитель 540408545a
Коммит 132c27fb34
38 изменённых файлов: 120 добавлений и 76 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

4
e2e-tests/cypress/tests/integration/channels/archived_channel/archive_channel_operations_spec.ts
Просмотреть файл

@@ -57,7 +57,7 @@ describe('Leave an archived channel', () => {
// * The archived channel appears in channel switcher search results
cy.get('#suggestionList').should('be.visible');
cy.get('#suggestionList').find(`#switchChannel_${testChannel.name}`).should('be.visible');
cy.get('#suggestionList').find(`#quickSwitchInput_${testChannel.id}`).should('be.visible');
// # Reload the app (refresh the web page)
cy.reload().then(() => {
@@ -68,7 +68,7 @@ describe('Leave an archived channel', () => {
cy.get('#quickSwitchInput').type(testChannel.display_name).then(() => {
// * The archived channel appears in channel switcher search results
cy.get('#suggestionList').should('be.visible');
cy.get('#suggestionList').find(`#switchChannel_${testChannel.name}`).should('be.visible');
cy.get('#suggestionList').find(`#quickSwitchInput_${testChannel.id}`).should('be.visible');
});
});
});

2
e2e-tests/cypress/tests/integration/channels/autocomplete/database/users_in_channel_switcher_spec.ts
Просмотреть файл

@@ -35,7 +35,7 @@ describe('Autocomplete with Database - Users', () => {
// # Open quick channel switcher
cy.typeCmdOrCtrl().type('k');
cy.findByRole('textbox', {name: 'quick switch input'}).should('be.visible');
cy.findByRole('combobox', {name: 'quick switch input'}).should('be.visible');
});
});

4
e2e-tests/cypress/tests/integration/channels/autocomplete/helpers.ts
Просмотреть файл

@@ -119,7 +119,7 @@ function getPostTextboxInput() {
}
function getQuickChannelSwitcherInput() {
cy.findByRole('textbox', {name: 'quick switch input'}).
cy.findByRole('combobox', {name: 'quick switch input'}).
should('be.visible').
as('input').
clear();
@@ -158,7 +158,7 @@ function searchForChannel(name: string) {
cy.typeCmdOrCtrl().type('k').wait(TIMEOUTS.ONE_SEC);
// # Clear out and type in the name
cy.findByRole('textbox', {name: 'quick switch input'}).
cy.findByRole('combobox', {name: 'quick switch input'}).
should('be.visible').
as('input').
clear().

12
e2e-tests/cypress/tests/integration/channels/channel/channel_switcher_spec.ts
Просмотреть файл

@@ -42,7 +42,7 @@ describe('Channel Switcher', () => {
// # Start typing channel name in the "Switch Channels" modal message box
// # Use up/down arrow keys to highlight second channel
// # Press ENTER
cy.findByRole('textbox', {name: 'quick switch input'}).
cy.findByRole('combobox', {name: 'quick switch input'}).
type(`${channelDisplayNamePrefix} `).
type('{downarrow}{downarrow}{enter}');
@@ -60,7 +60,7 @@ describe('Channel Switcher', () => {
cy.typeCmdOrCtrl().type('K', {release: true});
// # Start typing channel name in the "Switch Channels" modal message box
cy.findByRole('textbox', {name: 'quick switch input'}).type(`${channelDisplayNamePrefix} `);
cy.findByRole('combobox', {name: 'quick switch input'}).type(`${channelDisplayNamePrefix} `);
cy.get(`[data-testid^=${channelNamePrefix}-c] > span`).click();
@@ -78,7 +78,7 @@ describe('Channel Switcher', () => {
cy.typeCmdOrCtrl().type('K', {release: true});
// # Type invalid channel name in the "Switch Channels" modal message box
cy.findByRole('textbox', {name: 'quick switch input'}).type('there-is-no-spoon');
cy.findByRole('combobox', {name: 'quick switch input'}).type('there-is-no-spoon');
// * Expect 'nothing found' message
cy.get('.no-results__title > span').should('be.visible');
@@ -91,10 +91,10 @@ describe('Channel Switcher', () => {
cy.typeCmdOrCtrl().type('K', {release: true});
// # Press ESC
cy.findByRole('textbox', {name: 'quick switch input'}).type('{esc}');
cy.findByRole('combobox', {name: 'quick switch input'}).type('{esc}');
// * Expect the dialog to be closed
cy.findByRole('textbox', {name: 'quick switch input'}).should('not.exist');
cy.findByRole('combobox', {name: 'quick switch input'}).should('not.exist');
// * Expect staying in the same channel
cy.url().should('contain', 'off-topic');
@@ -106,7 +106,7 @@ describe('Channel Switcher', () => {
cy.get('.modal').click({force: true});
// * Expect the dialog to be closed
cy.findByRole('textbox', {name: 'quick switch input'}).should('not.exist');
cy.findByRole('combobox', {name: 'quick switch input'}).should('not.exist');
// * Expect staying in the same channel
cy.url().should('contain', 'off-topic');

2
e2e-tests/cypress/tests/integration/channels/enterprise/elasticsearch_autocomplete/helpers.ts
Просмотреть файл

@@ -31,7 +31,7 @@ export function searchForChannel(name: string) {
cy.typeCmdOrCtrl().type('k').wait(TIMEOUTS.ONE_SEC);
// # Clear out and type in the name
cy.findByRole('textbox', {name: 'quick switch input'}).
cy.findByRole('combobox', {name: 'quick switch input'}).
should('be.visible').
as('input').
clear().

2
e2e-tests/cypress/tests/integration/channels/enterprise/elasticsearch_autocomplete/users_in_channel_switcher_spec.ts
Просмотреть файл

@@ -38,7 +38,7 @@ describe('Autocomplete with Elasticsearch - Users', () => {
// # Open quick channel switcher
cy.typeCmdOrCtrl().type('k');
cy.findByRole('textbox', {name: 'quick switch input'}).should('be.visible');
cy.findByRole('combobox', {name: 'quick switch input'}).should('be.visible');
});
});

2
e2e-tests/cypress/tests/integration/channels/enterprise/guest_accounts/guest_identification_ui_spec.ts
Просмотреть файл

@@ -133,7 +133,7 @@ describe('Verify Guest User Identification in different screens', () => {
cy.uiOpenFindChannels();
// # Type the guest user name on Channel switcher input
cy.findByRole('textbox', {name: 'quick switch input'}).type(guestUser.username).wait(TIMEOUTS.HALF_SEC);
cy.findByRole('combobox', {name: 'quick switch input'}).type(guestUser.username).wait(TIMEOUTS.HALF_SEC);
// * Verify if Guest badge is displayed for the guest user in the Switch Channel Dialog
cy.get('#suggestionList').should('be.visible');

4
e2e-tests/cypress/tests/integration/channels/enterprise/ldap/ldap_group_sync_spec.ts
Просмотреть файл

@@ -408,7 +408,7 @@ context('ldap', () => {
cy.wait(TIMEOUTS.THREE_SEC);
// # Type channel display name on Channel switcher input
cy.findByRole('textbox', {name: 'quick switch input'}).type(publicChannel.display_name);
cy.findByRole('combobox', {name: 'quick switch input'}).type(publicChannel.display_name);
cy.wait(TIMEOUTS.HALF_SEC);
// * Should open up suggestion list for channels
@@ -433,7 +433,7 @@ context('ldap', () => {
cy.wait(TIMEOUTS.THREE_SEC);
// # Type channel display name on Channel switcher input
cy.findByRole('textbox', {name: 'quick switch input'}).type(publicChannel.display_name);
cy.findByRole('combobox', {name: 'quick switch input'}).type(publicChannel.display_name);
cy.wait(TIMEOUTS.HALF_SEC);
// * Should open up suggestion list for channels

4
e2e-tests/cypress/tests/integration/channels/interactive_dialog/scrollable_spec.js
Просмотреть файл

@@ -86,7 +86,7 @@ describe('Interactive Dialog', () => {
cy.wrap($elForm).find('.suggestion-list__item').first().should('be.visible');
cy.wrap($elForm).find('.form-control').type('{uparrow}', {force: true});
cy.wrap($elForm).find('.form-control').type('{downarrow}'.repeat(10), {force: true});
cy.wrap($elForm).find('.suggestion-list__item').first().should('not.be.visible');
cy.wrap($elForm).find('.suggestion-list__item').should('not.exist');
cy.wrap($elForm).find('.form-control').type('{uparrow}'.repeat(10), {force: true});
cy.wrap($elForm).find('.suggestion-list__item').first().should('be.visible');
} else if (index === 1) {
@@ -94,7 +94,7 @@ describe('Interactive Dialog', () => {
cy.wrap($elForm).find('.suggestion-list__item').first().should('be.visible');
cy.wrap($elForm).find('.form-control').type('{uparrow}', {force: true});
cy.wrap($elForm).find('.form-control').type('{downarrow}'.repeat(10), {force: true});
cy.wrap($elForm).find('.suggestion-list__item').first().should('not.be.visible');
cy.wrap($elForm).find('.suggestion-list__item').should('not.exist');
cy.wrap($elForm).find('.form-control').type('{uparrow}'.repeat(10), {force: true});
cy.wrap($elForm).find('.suggestion-list__item').first().should('be.visible');
}

4
e2e-tests/cypress/tests/integration/channels/keyboard_shortcuts/ctrl_cmd_k_user_from_other_team_spec.js
Просмотреть файл

@@ -56,7 +56,7 @@ describe('Keyboard Shortcuts', () => {
cy.typeCmdOrCtrl().type('K', {release: true});
// # Start typing the name of other user
cy.findByRole('textbox', {name: 'quick switch input'}).type(this.otherUser.username);
cy.findByRole('combobox', {name: 'quick switch input'}).type(this.otherUser.username);
// # Select other user from the list
cy.findByTestId(this.otherUser.username).should('not.exist');
@@ -104,7 +104,7 @@ function verifyUserIsFoundAndDMOpensOnClick(user) {
cy.typeCmdOrCtrl().type('K', {release: true});
// # Start typing the name of other user
cy.findByRole('textbox', {name: 'quick switch input'}).type(user.username);
cy.findByRole('combobox', {name: 'quick switch input'}).type(user.username);
// # Select other user from the list
cy.findByTestId(user.username).should('be.visible');

4
e2e-tests/cypress/tests/integration/channels/keyboard_shortcuts/keyboard_shortcuts_1_spec.js
Просмотреть файл

@@ -50,7 +50,7 @@ describe('Keyboard Shortcuts', () => {
cy.apiAddUserToTeam(testTeam.id, tempUser.id);
// # In the "Switch Channels" modal type the first chars of the test channel name
cy.findByRole('textbox', {name: 'quick switch input'}).should('be.focused').type(testChannel.name.substring(0, 3)).wait(TIMEOUTS.HALF_SEC);
cy.findByRole('combobox', {name: 'quick switch input'}).should('be.focused').type(testChannel.name.substring(0, 3)).wait(TIMEOUTS.HALF_SEC);
// # Verify that the list of users and channels suggestions is present
cy.get('#suggestionList').should('be.visible').within(() => {
@@ -360,7 +360,7 @@ describe('Keyboard Shortcuts', () => {
cy.uiGetPostTextBox().cmdOrCtrlShortcut('K').then(() => {
// * Channel switcher hint should be visible and focused on
cy.get('#quickSwitchHint').should('be.visible');
cy.findByRole('textbox', {name: 'quick switch input'}).should('be.focused');
cy.findByRole('combobox', {name: 'quick switch input'}).should('be.focused');
});
// # Type CTRL/CMD+K to close 'Switch Channels' modal

2
e2e-tests/cypress/tests/integration/channels/messaging/ctrl_cmd_k_open_dm_with_mouse_spec.js
Просмотреть файл

@@ -41,7 +41,7 @@ describe('Messaging', () => {
cy.uiGetPostTextBox().cmdOrCtrlShortcut('K');
// # In the "Switch Channels" modal type the first 6 characters of the username
cy.findByRole('textbox', {name: 'quick switch input'}).should('be.focused').type(secondUser.username.substring(0, 6)).wait(TIMEOUTS.HALF_SEC);
cy.findByRole('combobox', {name: 'quick switch input'}).should('be.focused').type(secondUser.username.substring(0, 6)).wait(TIMEOUTS.HALF_SEC);
// # Verify that the list of users and channels suggestions is present
cy.get('#suggestionList').should('be.visible').within(() => {

2
e2e-tests/cypress/tests/integration/channels/messaging/focus_move_spec.js
Просмотреть файл

@@ -68,7 +68,7 @@ describe('Messaging', () => {
cy.get('#quickSwitchHint').should('be.visible');
// # Type channel name and select it
cy.findByRole('textbox', {name: 'quick switch input'}).type(testChannelName).wait(TIMEOUTS.HALF_SEC).type('{enter}');
cy.findByRole('combobox', {name: 'quick switch input'}).type(testChannelName).wait(TIMEOUTS.HALF_SEC).type('{enter}');
// * Verify that it redirected into selected channel
cy.get('#channelHeaderTitle').should('be.visible').should('contain', testChannelName);

6
e2e-tests/cypress/tests/integration/channels/messaging/message_draft_then_switch_channel_spec.js
Просмотреть файл

@@ -25,7 +25,7 @@ describe('Message Draft and Switch Channels', () => {
});
it('MM-T131 Message Draft Pencil Icon - CTRL/CMD+K & "Jump to"', () => {
const {name, display_name: displayName} = testChannel;
const {name, display_name: displayName, id} = testChannel;
const message = 'message draft test';
// * Validate if the draft icon is not visible at LHS before making a draft
@@ -55,10 +55,10 @@ describe('Message Draft and Switch Channels', () => {
// * Suggestion list is visible
cy.get('#suggestionList').should('be.visible').within(() => {
// * A pencil icon before the channel name in the filtered list is visible
cy.get(`#switchChannel_${name}`).find('.icon-pencil-outline').should('be.visible');
cy.get(`#switchChannel_${id}`).find('.icon-pencil-outline').should('be.visible');
// # Click to switch back to the test channel
cy.get(`#switchChannel_${name}`).click({force: true});
cy.get(`#switchChannel_${id}`).click({force: true});
});
// * Draft is saved in the text input box of the test channel

2
e2e-tests/cypress/tests/integration/channels/messaging/private_channel_open_spec.js
Просмотреть файл

@@ -32,7 +32,7 @@ describe('Messaging - Opening a private channel using keyboard shortcuts', () =>
// # Type the first letter of a private channel in the "Switch Channels" modal message box
// # Use up/down arrow keys to highlight a private channel
// # Press ENTER
cy.findByRole('textbox', {name: 'quick switch input'}).type('Pr').type('{downarrow}').type('{enter}');
cy.findByRole('combobox', {name: 'quick switch input'}).type('Pr').type('{downarrow}').type('{enter}');
// * Private channel opens
cy.get('#channelHeaderTitle').should('be.visible').should('contain', 'Private').wait(TIMEOUTS.HALF_SEC);

2
e2e-tests/cypress/tests/integration/channels/search_autocomplete/renaming_spec.js
Просмотреть файл

@@ -144,7 +144,7 @@ function searchAndVerifyChannel(channel) {
cy.typeCmdOrCtrl().type('k');
// # Search for channel's display name
cy.findByRole('textbox', {name: 'quick switch input'}).
cy.findByRole('combobox', {name: 'quick switch input'}).
should('be.visible').
as('input').
clear().

4
e2e-tests/cypress/tests/integration/channels/settings/sidebar/channel_switcher_not_cloud_spec.js
Просмотреть файл

@@ -36,7 +36,7 @@ describe('Settings > Sidebar > Channel Switcher', () => {
cy.get('#quickSwitchHint').should('be.visible').should('contain', 'Type to find a channel. Use UP/DOWN to browse, ENTER to select, ESC to dismiss.');
// # Type CTRL/CMD+shift+L
cy.findByRole('textbox', {name: 'quick switch input'}).cmdOrCtrlShortcut('{shift}L');
cy.findByRole('combobox', {name: 'quick switch input'}).cmdOrCtrlShortcut('{shift}L');
// * Suggestion list should not be visible
cy.get('#suggestionList').should('not.exist');
@@ -56,7 +56,7 @@ describe('Settings > Sidebar > Channel Switcher', () => {
cy.get('#quickSwitchHint').should('be.visible').should('contain', 'Type to find a channel. Use UP/DOWN to browse, ENTER to select, ESC to dismiss.');
// # Type CTRL/CMD+shift+m
cy.findByRole('textbox', {name: 'quick switch input'}).cmdOrCtrlShortcut('{shift}M');
cy.findByRole('combobox', {name: 'quick switch input'}).cmdOrCtrlShortcut('{shift}M');
// * Suggestion list should not be visible
cy.get('#suggestionList').should('not.exist');

4
e2e-tests/cypress/tests/integration/channels/settings/sidebar/channel_switcher_spec.js
Просмотреть файл

@@ -50,14 +50,14 @@ function verifyChannelSwitch(team, channel) {
cy.get('#quickSwitchHint').should('be.visible').should('contain', 'Type to find a channel. Use UP/DOWN to browse, ENTER to select, ESC to dismiss.');
// # Type channel display name on Channel switcher input
cy.findByRole('textbox', {name: 'quick switch input'}).type(channel.display_name);
cy.findByRole('combobox', {name: 'quick switch input'}).type(channel.display_name);
cy.wait(TIMEOUTS.HALF_SEC);
// * Suggestion list should be visible
cy.get('#suggestionList').should('be.visible');
// # Press enter
cy.findByRole('textbox', {name: 'quick switch input'}).type('{enter}');
cy.findByRole('combobox', {name: 'quick switch input'}).type('{enter}');
// * Verify that it redirected into "channel-switcher" as selected channel
cy.url().should('include', `/${team.name}/channels/${channel.name}`);

2
e2e-tests/playwright/support/ui/components/channels/find_channels_modal.ts
Просмотреть файл

@@ -11,7 +11,7 @@ export default class FindChannelsModal {
constructor(container: Locator) {
this.container = container;
this.input = container.getByRole('textbox', {name: 'quick switch input'});
this.input = container.getByRole('combobox', {name: 'quick switch input'});
this.searchList = container.locator('.suggestion-list__item');
}