Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[MA-17]: Added aria-activedescendant to the textbox #31

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

[MA-17]: Added aria-activedescendant to the textbox #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions ...ts/cypress/tests/integration/channels/archived_channel/archive_channel_operations_spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(`#switchChannel_${testChannel.id}`).should('be.visible');

// # Reload the app (refresh the web page)
cy.reload().then(() => {
Expand All @@ -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(`#switchChannel_${testChannel.id}`).should('be.visible');
});
});
});
Expand Down
6 changes: 3 additions & 3 deletions ...ts/cypress/tests/integration/channels/messaging/message_draft_then_switch_channel_spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
20 changes: 20 additions & 0 deletions webapp/channels/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,13 +32,17 @@ exports[`components/search_bar/SearchBar should match snapshot with search 1`] =
class="input-wrapper"
>
<input
aria-autocomplete="list"
aria-describedby="searchbar-help-popup"
aria-expanded="false"
aria-label="Search"
aria-owns="suggestionList"
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"
Expand Down Expand Up @@ -104,13 +108,17 @@ exports[`components/search_bar/SearchBar should match snapshot with search, with
class="input-wrapper"
>
<input
aria-autocomplete="list"
aria-describedby="searchbar-help-popup"
aria-expanded="false"
aria-label="Search"
aria-owns="suggestionList"
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"
Expand Down Expand Up @@ -168,13 +176,17 @@ exports[`components/search_bar/SearchBar should match snapshot without search 1`
class="input-wrapper"
>
<input
aria-autocomplete="list"
aria-describedby="searchbar-help-popup"
aria-expanded="false"
aria-label="Search"
aria-owns="suggestionList"
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=""
Expand Down Expand Up @@ -227,13 +239,17 @@ exports[`components/search_bar/SearchBar should match snapshot without search, w
class="input-wrapper"
>
<input
aria-autocomplete="list"
aria-describedby="searchbar-help-popup"
aria-expanded="false"
aria-label="Search"
aria-owns="suggestionList"
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=""
Expand Down Expand Up @@ -278,13 +294,17 @@ exports[`components/search_bar/SearchBar should match snapshot without search, w
class="input-wrapper"
>
<input
aria-autocomplete="list"
aria-describedby="searchbar-help-popup"
aria-expanded="false"
aria-label="Search"
aria-owns="suggestionList"
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=""
Expand Down
18 changes: 12 additions & 6 deletions ...mponents/suggestion/at_mention_provider/__snapshots__/at_mention_suggestion.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ exports[`at mention suggestion Should display nick name of non signed in user 1`
>
<SuggestionContainer
data-testid="mentionSuggestion_user2"
id="post_textbox_@user2"
isSelection={false}
item={
Object {
Expand All @@ -32,14 +33,16 @@ exports[`at mention suggestion Should display nick name of non signed in user 1`
matchedPretext="@"
onClick={[MockFunction]}
onMouseMove={[MockFunction]}
role="option"
term="@user"
>
<div
<li
className="suggestion-list__item"
data-testid="mentionSuggestion_user2"
id="post_textbox_@user2"
onClick={[Function]}
onMouseMove={[Function]}
role="button"
role="option"
tabIndex={-1}
>
<span
Expand Down Expand Up @@ -88,7 +91,7 @@ exports[`at mention suggestion Should display nick name of non signed in user 1`
<div />
</Component>
</span>
</div>
</li>
</SuggestionContainer>
</AtMentionSuggestion>
`;
Expand All @@ -113,6 +116,7 @@ exports[`at mention suggestion Should not display nick name of the signed in use
>
<SuggestionContainer
data-testid="mentionSuggestion_user"
id="post_textbox_@user"
isSelection={false}
item={
Object {
Expand All @@ -127,14 +131,16 @@ exports[`at mention suggestion Should not display nick name of the signed in use
matchedPretext="@"
onClick={[MockFunction]}
onMouseMove={[MockFunction]}
role="option"
term="@user"
>
<div
<li
className="suggestion-list__item"
data-testid="mentionSuggestion_user"
id="post_textbox_@user"
onClick={[Function]}
onMouseMove={[Function]}
role="button"
role="option"
tabIndex={-1}
>
<span
Expand Down Expand Up @@ -191,7 +197,7 @@ exports[`at mention suggestion Should not display nick name of the signed in use
<div />
</Component>
</span>
</div>
</li>
</SuggestionContainer>
</AtMentionSuggestion>
`;
24 changes: 19 additions & 5 deletions webapp/channels/src/components/suggestion/at_mention_provider/at_mention_suggestion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -52,7 +52,10 @@ const AtMentionSuggestion = React.forwardRef<HTMLDivElement, SuggestionProps<Ite
/>
);
icon = (
<span className='suggestion-list__icon suggestion-list__icon--large'>
<span
className='suggestion-list__icon suggestion-list__icon--large'
aria-hidden='true'
>
<i
className='icon icon-account-multiple-outline'
title={intl.formatMessage({id: 'generic_icons.member', defaultMessage: 'Member Icon'})}
Expand All @@ -68,7 +71,10 @@ const AtMentionSuggestion = React.forwardRef<HTMLDivElement, SuggestionProps<Ite
/>
);
icon = (
<span className='suggestion-list__icon suggestion-list__icon--large'>
<span
className='suggestion-list__icon suggestion-list__icon--large'
aria-hidden='true'
>
<i
className='icon icon-account-multiple-outline'
title={intl.formatMessage({id: 'generic_icons.member', defaultMessage: 'Member Icon'})}
Expand All @@ -84,7 +90,10 @@ const AtMentionSuggestion = React.forwardRef<HTMLDivElement, SuggestionProps<Ite
/>
);
icon = (
<span className='suggestion-list__icon suggestion-list__icon--large'>
<span
className='suggestion-list__icon suggestion-list__icon--large'
aria-hidden='true'
>
<i
className='icon icon-account-multiple-outline'
title={intl.formatMessage({id: 'generic_icons.member', defaultMessage: 'Member Icon'})}
Expand All @@ -97,7 +106,10 @@ const AtMentionSuggestion = React.forwardRef<HTMLDivElement, SuggestionProps<Ite
<span className='ml-1'>{'- '}{item.display_name}</span>
);
icon = (
<span className='suggestion-list__icon suggestion-list__icon--large'>
<span
className='suggestion-list__icon suggestion-list__icon--large'
aria-hidden='true'
>
<i
className='icon icon-account-multiple-outline'
title={intl.formatMessage({id: 'generic_icons.member', defaultMessage: 'Member Icon'})}
Expand Down Expand Up @@ -175,8 +187,10 @@ const AtMentionSuggestion = React.forwardRef<HTMLDivElement, SuggestionProps<Ite
return (
<SuggestionContainer
ref={ref}
role='option'
{...props}
data-testid={`mentionSuggestion_${itemname}`}
id={`post_textbox_@${itemname}`}
>
{icon}
<span className='suggestion-list__ellipsis'>
Expand Down
2 changes: 1 addition & 1 deletion webapp/channels/src/components/suggestion/channel_mention_provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
2 changes: 1 addition & 1 deletion webapp/channels/src/components/suggestion/command_provider/command_provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
Expand Down
2 changes: 1 addition & 1 deletion webapp/channels/src/components/suggestion/emoticon_provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
2 changes: 1 addition & 1 deletion webapp/channels/src/components/suggestion/generic_channel_provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion webapp/channels/src/components/suggestion/generic_user_provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion webapp/channels/src/components/suggestion/menu_action_provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down
2 changes: 1 addition & 1 deletion ...hannels/src/components/suggestion/search_channel_suggestion/search_channel_suggestion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion webapp/channels/src/components/suggestion/search_channel_with_permissions_provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion webapp/channels/src/components/suggestion/search_suggestion_list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
2 changes: 1 addition & 1 deletion webapp/channels/src/components/suggestion/search_user_provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
8 changes: 4 additions & 4 deletions webapp/channels/src/components/suggestion/suggestion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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,
Expand Down Expand Up @@ -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}
Expand All @@ -57,7 +57,7 @@ const SuggestionContainer = React.forwardRef<HTMLDivElement, SuggestionProps<unk
{...otherProps}
>
{children}
</div>
</li>
);
});

Expand Down
Loading
Loading