upstream/mattermost
1
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2026-05-28 04:35:04 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

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

Browse source 
* [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>
This commit is contained in:
Saurabh Sharma 2025-01-17 01:05:13 +05:30 committed by GitHub
parent 540408545a
commit 132c27fb34
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
38 changed files with 120 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
e2e-tests/cypress/tests/integration/channels/archived_channel/archive_channel_operations_spec.ts
View file

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -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');
}

20
webapp/channels/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap
View file

@ -32,13 +32,17 @@ exports[`components/search_bar/SearchBar should match snapshot with search 1`] =
class="input-wrapper"
>
<input
aria-autocomplete="list"
aria-controls="suggestionList"
aria-describedby="searchbar-help-popup"
aria-expanded="false"
aria-label="Search"
autocomplete="off"
class="search-bar form-control a11y__region"
data-a11y-sort-order="9"
id="searchBox"
placeholder="Search"
role="combobox"
tabindex="0"
type="search"
value="test"
@ -103,13 +107,17 @@ exports[`components/search_bar/SearchBar should match snapshot with search, with
class="input-wrapper"
>
<input
aria-autocomplete="list"
aria-controls="suggestionList"
aria-describedby="searchbar-help-popup"
aria-expanded="false"
aria-label="Search"
autocomplete="off"
class="search-bar form-control a11y__region"
data-a11y-sort-order="9"
id="searchBox"
placeholder="Search"
role="combobox"
tabindex="0"
type="search"
value="test"
@ -166,13 +174,17 @@ exports[`components/search_bar/SearchBar should match snapshot without search 1`
class="input-wrapper"
>
<input
aria-autocomplete="list"
aria-controls="suggestionList"
aria-describedby="searchbar-help-popup"
aria-expanded="false"
aria-label="Search"
autocomplete="off"
class="search-bar form-control a11y__region"
data-a11y-sort-order="9"
id="searchBox"
placeholder="Search"
role="combobox"
tabindex="0"
type="search"
value=""
@ -225,13 +237,17 @@ exports[`components/search_bar/SearchBar should match snapshot without search, w
class="input-wrapper"
>
<input
aria-autocomplete="list"
aria-controls="suggestionList"
aria-describedby="searchbar-help-popup"
aria-expanded="false"
aria-label="Search"
autocomplete="off"
class="search-bar form-control a11y__region"
data-a11y-sort-order="9"
id="searchBox"
placeholder="Search"
role="combobox"
tabindex="0"
type="search"
value=""
@ -276,13 +292,17 @@ exports[`components/search_bar/SearchBar should match snapshot without search, w
class="input-wrapper"
>
<input
aria-autocomplete="list"
aria-controls="suggestionList"
aria-describedby="searchbar-help-popup"
aria-expanded="false"
aria-label="Search"
autocomplete="off"
class="search-bar form-control a11y__region"
data-a11y-sort-order="9"
id="searchBox"
placeholder="Search"
role="combobox"
tabindex="0"
type="search"
value=""

8
webapp/channels/src/components/suggestion/at_mention_provider/__snapshots__/at_mention_suggestion.test.tsx.snap
View file

@ -34,7 +34,7 @@ exports[`at mention suggestion Should display nick name of non signed in user 1`
onMouseMove={[MockFunction]}
term="@user"
>
<div
<li
className="suggestion-list__item"
data-testid="mentionSuggestion_user2"
onClick={[Function]}
@ -88,7 +88,7 @@ exports[`at mention suggestion Should display nick name of non signed in user 1`
<div />
</Component>
</span>
</div>
</li>
</SuggestionContainer>
</AtMentionSuggestion>
`;
@ -129,7 +129,7 @@ exports[`at mention suggestion Should not display nick name of the signed in use
onMouseMove={[MockFunction]}
term="@user"
>
<div
<li
className="suggestion-list__item"
data-testid="mentionSuggestion_user"
onClick={[Function]}
@ -191,7 +191,7 @@ exports[`at mention suggestion Should not display nick name of the signed in use
<div />
</Component>
</span>
</div>
</li>
</SuggestionContainer>
</AtMentionSuggestion>
`;

2
webapp/channels/src/components/suggestion/at_mention_provider/at_mention_suggestion.tsx
View file

@ -34,7 +34,7 @@ interface Group extends Item {
member_count: number;
}
const AtMentionSuggestion = React.forwardRef<HTMLDivElement, SuggestionProps<Item>>((props, ref) => {
const AtMentionSuggestion = React.forwardRef<HTMLLIElement, SuggestionProps<Item>>((props, ref) => {
const {item} = props;
const intl = useIntl();

2
webapp/channels/src/components/suggestion/channel_mention_provider.tsx
View file

@ -27,7 +27,7 @@ type WrappedChannel = {
loading?: boolean;
}
export const ChannelMentionSuggestion = React.forwardRef<HTMLDivElement, SuggestionProps<WrappedChannel>>((props, ref) => {
export const ChannelMentionSuggestion = React.forwardRef<HTMLLIElement, SuggestionProps<WrappedChannel>>((props, ref) => {
const {item} = props;
const channelIsArchived = item.channel && item.channel.delete_at && item.channel.delete_at !== 0;

2
webapp/channels/src/components/suggestion/command_provider/command_provider.tsx
View file

@ -30,7 +30,7 @@ const EXECUTE_CURRENT_COMMAND_ITEM_ID = Constants.Integrations.EXECUTE_CURRENT_C
const OPEN_COMMAND_IN_MODAL_ITEM_ID = Constants.Integrations.OPEN_COMMAND_IN_MODAL_ITEM_ID;
const COMMAND_SUGGESTION_ERROR = Constants.Integrations.COMMAND_SUGGESTION_ERROR;
const CommandSuggestion = React.forwardRef<HTMLDivElement, SuggestionProps<AutocompleteSuggestion>>((props, ref) => {
const CommandSuggestion = React.forwardRef<HTMLLIElement, SuggestionProps<AutocompleteSuggestion>>((props, ref) => {
const {item} = props;
let symbolSpan = <span>{'/'}</span>;

2
webapp/channels/src/components/suggestion/emoticon_provider.tsx
View file

@ -31,7 +31,7 @@ type EmojiItem = {
const suggestionTypeEmoji = 'emoji';
const EmoticonSuggestion = React.forwardRef<HTMLDivElement, SuggestionProps<EmojiItem>>((props, ref) => {
const EmoticonSuggestion = React.forwardRef<HTMLLIElement, SuggestionProps<EmojiItem>>((props, ref) => {
const text = props.term;
const emoji = props.item.emoji;

2
webapp/channels/src/components/suggestion/generic_channel_provider.tsx
View file

@ -15,7 +15,7 @@ import type {SuggestionProps} from './suggestion';
type ChannelSearchFunc = (term: string, success: (channels: Channel[]) => void, error?: (err: ServerError) => void) => (ActionResult | Promise<ActionResult | ActionResult[]>);
const GenericChannelSuggestion = React.forwardRef<HTMLDivElement, SuggestionProps<Channel>>((props, ref) => {
const GenericChannelSuggestion = React.forwardRef<HTMLLIElement, SuggestionProps<Channel>>((props, ref) => {
const {item} = props;
const channelName = item.display_name;

2
webapp/channels/src/components/suggestion/generic_user_provider.tsx
View file

@ -18,7 +18,7 @@ import type {ResultsCallback} from './provider';
import {SuggestionContainer} from './suggestion';
import type {SuggestionProps} from './suggestion';
const GenericUserSuggestion = React.forwardRef<HTMLDivElement, SuggestionProps<UserProfile>>((props, ref) => {
const GenericUserSuggestion = React.forwardRef<HTMLLIElement, SuggestionProps<UserProfile>>((props, ref) => {
const {item} = props;
const username = item.username;

2
webapp/channels/src/components/suggestion/menu_action_provider.tsx
View file

@ -13,7 +13,7 @@ interface MenuAction {
value: string;
}
const MenuActionSuggestion = React.forwardRef<HTMLDivElement, SuggestionProps<MenuAction>>((props, ref) => {
const MenuActionSuggestion = React.forwardRef<HTMLLIElement, SuggestionProps<MenuAction>>((props, ref) => {
const {item} = props;
return (

2
webapp/channels/src/components/suggestion/search_channel_suggestion/search_channel_suggestion.tsx
View file

@ -76,7 +76,7 @@ type Props = SuggestionProps<Channel> & {
teammateIsBot: boolean;
}
const SearchChannelSuggestion = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
const SearchChannelSuggestion = React.forwardRef<HTMLLIElement, Props>((props, ref) => {
const {item, teammateIsBot, currentUserId} = props;
const nameObject = itemToName(item, currentUserId);

2
webapp/channels/src/components/suggestion/search_channel_with_permissions_provider.tsx
View file

@ -36,7 +36,7 @@ interface WrappedChannel {
type ChannelSearchFunction = (teamId: string, channelPrefix: string) => Promise<ActionResult>
const SearchChannelWithPermissionsSuggestion = React.forwardRef<HTMLDivElement, SuggestionProps<WrappedChannel>>((props, ref) => {
const SearchChannelWithPermissionsSuggestion = React.forwardRef<HTMLLIElement, SuggestionProps<WrappedChannel>>((props, ref) => {
const {item} = props;
const channel = item.channel;
const channelIsArchived = channel.delete_at && channel.delete_at !== 0;

2
webapp/channels/src/components/suggestion/search_suggestion_list.tsx
View file

@ -58,7 +58,7 @@ export default class SearchSuggestionList extends SuggestionList {
}
getContent = () => {
return this.itemsContainerRef?.current?.parentNode as HTMLDivElement | null;
return this.itemsContainerRef?.current?.parentNode as HTMLUListElement | null;
};
renderChannelDivider(type: string) {

2
webapp/channels/src/components/suggestion/search_user_provider.tsx
View file

@ -17,7 +17,7 @@ import type {ResultsCallback} from './provider';
import {SuggestionContainer} from './suggestion';
import type {SuggestionProps} from './suggestion';
export const SearchUserSuggestion = React.forwardRef<HTMLDivElement, SuggestionProps<UserProfile>>((props, ref) => {
export const SearchUserSuggestion = React.forwardRef<HTMLLIElement, SuggestionProps<UserProfile>>((props, ref) => {
const {item} = props;
const username = item.username;

8
webapp/channels/src/components/suggestion/suggestion.tsx
View file

@ -4,7 +4,7 @@
import classNames from 'classnames';
import React, {useCallback} from 'react';
export interface SuggestionProps<Item> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onMouseMove'> {
export interface SuggestionProps<Item> extends Omit<React.HTMLAttributes<HTMLLIElement>, 'onClick' | 'onMouseMove'> {
// eslint-disable-next-line react/no-unused-prop-types
item: Item;
@ -17,7 +17,7 @@ export interface SuggestionProps<Item> extends Omit<React.HTMLAttributes<HTMLDiv
onMouseMove: (term: string) => void;
}
const SuggestionContainer = React.forwardRef<HTMLDivElement, SuggestionProps<unknown>>((props, ref) => {
const SuggestionContainer = React.forwardRef<HTMLLIElement, SuggestionProps<unknown>>((props, ref) => {
const {
children,
term,
@ -47,7 +47,7 @@ const SuggestionContainer = React.forwardRef<HTMLDivElement, SuggestionProps<unk
}, [onMouseMove, term]);
return (
<div
<li
ref={ref}
className={classNames('suggestion-list__item', {'suggestion--selected': isSelection})}
onClick={handleClick}
@ -57,7 +57,7 @@ const SuggestionContainer = React.forwardRef<HTMLDivElement, SuggestionProps<unk
{...otherProps}
>
{children}
</div>
</li>
);
});

6
webapp/channels/src/components/suggestion/suggestion_box/suggestion_box.jsx
View file

@ -820,6 +820,12 @@ export default class SuggestionBox extends React.PureComponent {
ref={this.inputRef}
autoComplete='off'
{...props}
aria-controls='suggestionList'
role='combobox'
{...(this.state.selection && {'aria-activedescendant': `${props.id}_${this.state.selection}`}
)}
aria-autocomplete='list'
aria-expanded={this.state.focused || this.props.forceSuggestionsWhenBlur}
onInput={this.handleChange}
onCompositionStart={this.handleCompositionStart}
onCompositionUpdate={this.handleCompositionUpdate}

26
webapp/channels/src/components/suggestion/suggestion_box/suggestion_box.test.tsx
View file

@ -92,7 +92,7 @@ describe('SuggestionBox', () => {
);
// Start with no suggestions rendered
expect(screen.queryByRole('list')).not.toBeInTheDocument();
expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
// Typing some text should cause a suggestion to be shown
userEvent.click(screen.getByPlaceholderText('test input'));
@ -103,9 +103,9 @@ describe('SuggestionBox', () => {
expect(providerSpy).toHaveBeenCalledTimes(1);
});
expect(screen.queryByRole('list')).toBeVisible();
expect(screen.queryByRole('listbox')).toBeVisible();
expect(screen.queryByRole('list')).toBeVisible();
expect(screen.queryByRole('listbox')).toBeVisible();
expect(screen.getByText('Suggestion: testtest')).toBeVisible();
// Typing more text should cause the suggestion to be updaetd
@ -115,13 +115,13 @@ describe('SuggestionBox', () => {
expect(providerSpy).toHaveBeenCalledTimes(2);
});
expect(screen.queryByRole('list')).toBeVisible();
expect(screen.queryByRole('listbox')).toBeVisible();
expect(screen.getByText('Suggestion: testwordstestwords')).toBeVisible();
// Clearing the textbox hides all suggestions
await userEvent.clear(screen.getByPlaceholderText('test input'));
expect(screen.queryByRole('list')).not.toBeInTheDocument();
expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
});
test('should hide suggestions on pressing escape', async () => {
@ -135,20 +135,20 @@ describe('SuggestionBox', () => {
);
// Start with no suggestions rendered
expect(screen.queryByRole('list')).not.toBeInTheDocument();
expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
// Typing some text should cause a suggestion to be shown
userEvent.click(screen.getByPlaceholderText('test input'));
await userEvent.keyboard('test');
await waitFor(() => {
expect(screen.getByRole('list')).toBeVisible();
expect(screen.getByRole('listbox')).toBeVisible();
});
// Pressing escape hides all suggestions
await userEvent.keyboard('{escape}');
expect(screen.queryByRole('list')).not.toBeInTheDocument();
expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
});
test('should autocomplete suggestions by pressing enter', async () => {
@ -166,7 +166,7 @@ describe('SuggestionBox', () => {
await userEvent.keyboard('test');
await waitFor(() => {
expect(screen.queryByRole('list')).toBeVisible();
expect(screen.queryByRole('listbox')).toBeVisible();
expect(screen.getByText('Suggestion: testtest')).toBeVisible();
});
@ -177,7 +177,7 @@ describe('SuggestionBox', () => {
expect(screen.getByPlaceholderText('test input')).toHaveValue('testtest ');
});
expect(screen.queryByRole('list')).not.toBeInTheDocument();
expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
});
test('MM-57320 completing text with enter and calling resultCallback twice should not erase text following caret', async () => {
@ -203,14 +203,14 @@ describe('SuggestionBox', () => {
onSuggestionsReceived.mockClear();
expect(screen.getByPlaceholderText('test input')).toHaveValue('This is important');
expect(screen.getByRole('list')).toBeVisible();
expect(screen.getByRole('listbox')).toBeVisible();
expect(screen.getByText('Suggestion: This is importantThis is important')).toBeVisible();
// Move the caret back to the start of the textbox and then use escape to clear the suggestions because
// we don't support moving the caret with the autocomplete open yet
await userEvent.keyboard('{home}{escape}');
expect(screen.queryByRole('list')).not.toBeInTheDocument();
expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
// Type a space and then start typing something again to show results
onSuggestionsReceived.mockClear();
@ -221,7 +221,7 @@ describe('SuggestionBox', () => {
expect(onSuggestionsReceived).toHaveBeenCalledTimes(2);
});
expect(screen.getByRole('list')).toBeVisible();
expect(screen.getByRole('listbox')).toBeVisible();
expect(screen.getByText('Suggestion: @us@us')).toBeVisible();
onSuggestionsReceived.mockClear();

13
webapp/channels/src/components/suggestion/suggestion_list.tsx
View file

@ -44,7 +44,7 @@ export default class SuggestionList extends React.PureComponent<Props> {
renderDividers: [],
renderNoResults: false,
};
contentRef: React.RefObject<HTMLDivElement>;
contentRef: React.RefObject<HTMLUListElement>;
wrapperRef: React.RefObject<HTMLDivElement>;
itemRefs: Map<string, any>;
currentLabel: string | null;
@ -209,6 +209,7 @@ export default class SuggestionList extends React.PureComponent<Props> {
<div
key={type + '-divider'}
className='suggestion-list__divider'
role='separator'
>
<span>
<FormattedMessage id={id}/>
@ -219,7 +220,7 @@ export default class SuggestionList extends React.PureComponent<Props> {
renderNoResults() {
return (
<div
<ul
key='list-no-results'
className='suggestion-list__no-results'
ref={this.contentRef}
@ -232,7 +233,7 @@ export default class SuggestionList extends React.PureComponent<Props> {
b: (chunks: string) => <b>{chunks}</b>,
}}
/>
</div>
</ul>
);
}
@ -296,10 +297,10 @@ export default class SuggestionList extends React.PureComponent<Props> {
ref={this.wrapperRef}
className={mainClass}
>
<div
<ul
id='suggestionList'
data-testid='suggestionList'
role='list'
role='listbox'
ref={this.contentRef}
style={{
maxHeight: this.maxHeight,
@ -309,7 +310,7 @@ export default class SuggestionList extends React.PureComponent<Props> {
onMouseDown={this.props.preventClose}
>
{items}
</div>
</ul>
</div>
);
}

24
webapp/channels/src/components/suggestion/switch_channel_provider.tsx
View file

@ -121,9 +121,10 @@ type Props = SuggestionProps<WrappedChannel> & WrappedComponentProps & {
isPartOfOnlyOneTeam: boolean;
status?: string;
team?: Team;
id: string;
}
const SwitchChannelSuggestion = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
const SwitchChannelSuggestion = React.forwardRef<HTMLLIElement, Props>((props, ref) => {
const {item, status, collapsedThreads, team, isPartOfOnlyOneTeam} = props;
const channel = item.channel;
const channelIsArchived = channel.delete_at && channel.delete_at !== 0;
@ -255,18 +256,31 @@ const SwitchChannelSuggestion = React.forwardRef<HTMLDivElement, Props>((props,
}
const showSlug = (isPartOfOnlyOneTeam || channel.type === Constants.DM_CHANNEL) && channel.type !== Constants.THREADS;
const getId = () => {
if (channel.type === Constants.DM_CHANNEL) {
if (prefix) {
return `quickSwitchInput_${(channel as FakeDirectChannel).userId}`;
}
}
return `quickSwitchInput_${channel.id}`;
};
return (
<SuggestionContainer
ref={ref}
id={`switchChannel_${channel.name}`}
data-testid={channel.name}
role='listitem'
role='option'
aria-labelledby={`${name.toLowerCase().replaceAll(' ', '-')}-item-name`}
{...props}
id={getId()}
>
{icon}
<div className='suggestion-list__ellipsis suggestion-list__flex'>
<span className='suggestion-list__main'>
<span className={classNames({'suggestion-list__unread': item.unread && !channelIsArchived})}>{name}</span>
<span
className={classNames({'suggestion-list__unread': item.unread && !channelIsArchived})}
id={`${name.toLowerCase().replaceAll(' ', '-')}-item-name`}
>{name}</span>
{showSlug && description && <span className='ml-2 suggestion-list__desc'>{description}</span>}
</span>
{customStatus}
@ -316,6 +330,8 @@ function mapStateToPropsForSwitchChannelSuggestion(state: GlobalState, ownProps:
collapsedThreads,
team,
isPartOfOnlyOneTeam,
// id: 'quickSwitchInput',
};
}

1
webapp/channels/src/sass/components/_suggestion-list.scss
View file

@ -62,6 +62,7 @@
max-width: 100%;
max-height: 292px;
padding-bottom: 12px;
padding-left: 0;
border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
border-radius: 4px;
background-color: functions.v(center-channel-bg);