diff --git a/e2e-tests/cypress/tests/integration/channels/emoji/custom_emoji_2_spec.ts b/e2e-tests/cypress/tests/integration/channels/emoji/custom_emoji_2_spec.ts index bdfd7b2e2e..81afc15215 100644 --- a/e2e-tests/cypress/tests/integration/channels/emoji/custom_emoji_2_spec.ts +++ b/e2e-tests/cypress/tests/integration/channels/emoji/custom_emoji_2_spec.ts @@ -128,11 +128,11 @@ describe('Custom emojis', () => { cy.findByText('Custom').should('exist').and('is.visible'); // * Verify that first custom emoji exists and is visible to user - cy.findAllByAltText('custom emoji image').should('exist').eq(0).and('is.visible'); + cy.findAllByAltText('custom emoji').should('exist').eq(0).and('is.visible'); // * Verify second custom emoji exists and is visible to user, // if both custom emojis are visible we can conclude that they are not overlapping - cy.findAllByAltText('custom emoji image').should('exist').eq(1).and('is.visible'); + cy.findAllByAltText('custom emoji').should('exist').eq(1).and('is.visible'); }); }); }); diff --git a/e2e-tests/cypress/tests/integration/channels/emoji/recently_used_emoji_1_spec.ts b/e2e-tests/cypress/tests/integration/channels/emoji/recently_used_emoji_1_spec.ts index fcaeb3b38b..7fadd6cc8e 100644 --- a/e2e-tests/cypress/tests/integration/channels/emoji/recently_used_emoji_1_spec.ts +++ b/e2e-tests/cypress/tests/integration/channels/emoji/recently_used_emoji_1_spec.ts @@ -69,10 +69,10 @@ describe('Recent Emoji', () => { cy.findByText(/Recently Used/i).should('exist').and('be.visible'); // * Assert first emoji should equal with second recent emoji - cy.findAllByTestId('emojiItem').eq(0).find('img').should('have.attr', 'aria-label', 'grin emoji'); + cy.findAllByTestId('emojiItem').eq(0).should('have.attr', 'aria-label', 'grin emoji'); // * Assert second emoji should equal with first recent emoji - cy.findAllByTestId('emojiItem').eq(1).find('img').should('have.attr', 'aria-label', 'joy emoji'); + cy.findAllByTestId('emojiItem').eq(1).should('have.attr', 'aria-label', 'joy emoji'); }); it('MM-T4463 Recently used custom emoji, when is deleted should be removed from recent emoji category and quick reactions', () => { @@ -130,7 +130,7 @@ describe('Recent Emoji', () => { cy.findAllByTestId('emojiItem').eq(0).find('img').should('have.attr', 'class', 'emoji-category--custom'); // * Verify second most recent one is the system emoji in emoji picker - cy.findAllByTestId('emojiItem').eq(1).find('img').should('have.attr', 'aria-label', 'lemon emoji'); + cy.findAllByTestId('emojiItem').eq(1).should('have.attr', 'aria-label', 'lemon emoji'); // # Go to custom emoji page cy.findByText('Custom Emoji').should('be.visible').click(); @@ -172,6 +172,6 @@ describe('Recent Emoji', () => { cy.findByText('Recently Used').should('exist').and('be.visible'); // * Verify most recent one is the system emoji in emoji picker and not the custom emoji - cy.findAllByTestId('emojiItem').eq(0).find('img').should('have.attr', 'aria-label', 'lemon emoji'); + cy.findAllByTestId('emojiItem').eq(0).should('have.attr', 'aria-label', 'lemon emoji'); }); }); diff --git a/e2e-tests/cypress/tests/integration/channels/emoji/recently_used_emoji_2_spec.ts b/e2e-tests/cypress/tests/integration/channels/emoji/recently_used_emoji_2_spec.ts index 18bdf6227d..5e909cc4d8 100644 --- a/e2e-tests/cypress/tests/integration/channels/emoji/recently_used_emoji_2_spec.ts +++ b/e2e-tests/cypress/tests/integration/channels/emoji/recently_used_emoji_2_spec.ts @@ -56,7 +56,7 @@ describe('Recent Emoji', () => { cy.findByText('Recently Used').should('exist').and('be.visible'); // * Verify most recent one is the thumbsup emoji with default skin - cy.findAllByTestId('emojiItem').eq(0).find('img').should('have.attr', 'aria-label', '+1 emoji'); + cy.findAllByTestId('emojiItem').eq(0).should('have.attr', 'aria-label', '+1 emoji'); // # Open skin picker again to change the skin cy.findByAltText('emoji skin tone picker').should('exist').parent().click().wait(TIMEOUTS.ONE_SEC); @@ -65,7 +65,7 @@ describe('Recent Emoji', () => { cy.findByTestId('skin-pick-1F3FF').should('exist').click(); // * Verify most recent one is the same thumbsup emoji but now with a dark skin tone - cy.findAllByTestId('emojiItem').eq(0).find('img').should('have.attr', 'aria-label', '+1 dark skin tone emoji'); + cy.findAllByTestId('emojiItem').eq(0).should('have.attr', 'aria-label', '+1 dark skin tone emoji'); }); // # Close emoji picker diff --git a/e2e-tests/cypress/tests/integration/channels/emoji/sorted_emojis_spec.ts b/e2e-tests/cypress/tests/integration/channels/emoji/sorted_emojis_spec.ts index 8a3720bac8..2497083735 100644 --- a/e2e-tests/cypress/tests/integration/channels/emoji/sorted_emojis_spec.ts +++ b/e2e-tests/cypress/tests/integration/channels/emoji/sorted_emojis_spec.ts @@ -32,8 +32,13 @@ describe('Emoji sorting', () => { // # Assert first recently used emoji has the data-test-id value of 'cat' which was the last one we sent cy.findAllByTestId('emojiItem'). - findByRole('button', {name: 'cat emoji'}). - should('exist'); + each(($btn) => { + // Check if the button has the specific aria-label + if ($btn.attr('aria-label') === 'cat emoji') { + // If the aria-label matches, check if the button exists + cy.wrap($btn).should('exist'); + } + }); const emojiList = []; diff --git a/e2e-tests/cypress/tests/integration/channels/messaging/emoji_keyboard_entry_spec.js b/e2e-tests/cypress/tests/integration/channels/messaging/emoji_keyboard_entry_spec.js index 7bc5cfb3db..66d539e644 100644 --- a/e2e-tests/cypress/tests/integration/channels/messaging/emoji_keyboard_entry_spec.js +++ b/e2e-tests/cypress/tests/integration/channels/messaging/emoji_keyboard_entry_spec.js @@ -99,13 +99,13 @@ describe('MM-T154 Use keyboard navigation in emoji picker', () => { cy.uiGetPostTextBox().type('{enter}'); // * Compare selected emoji with last post - cy.getLastPost().find('.emoticon').should('have.attr', 'alt', selectedEmoji); + cy.getLastPost().find('.emoticon').should('have.attr', 'aria-label', selectedEmoji); }); }); }); const testSelectedIndex = (done) => { - cy.get('div.emoji-picker__item.selected').then((selectedEmoji) => { + cy.get('button.emoji-picker__item.selected').then((selectedEmoji) => { done(selectedEmoji.index()); }); }; diff --git a/webapp/channels/src/components/emoji_picker/__snapshots__/emoji_picker.test.tsx.snap b/webapp/channels/src/components/emoji_picker/__snapshots__/emoji_picker.test.tsx.snap index 85a20fb954..2d6c5fd635 100644 --- a/webapp/channels/src/components/emoji_picker/__snapshots__/emoji_picker.test.tsx.snap +++ b/webapp/channels/src/components/emoji_picker/__snapshots__/emoji_picker.test.tsx.snap @@ -134,7 +134,9 @@ exports[`components/emoji_picker/EmojiPicker should match snapshot 1`] = ` style="height: 290px;" >
{row.items.map((emojiColumn) => { const emoji = emojiColumn.item; diff --git a/webapp/channels/src/components/emoji_picker/components/emoji_picker_category_row.tsx b/webapp/channels/src/components/emoji_picker/components/emoji_picker_category_row.tsx index 3835d98d45..01d052b736 100644 --- a/webapp/channels/src/components/emoji_picker/components/emoji_picker_category_row.tsx +++ b/webapp/channels/src/components/emoji_picker/components/emoji_picker_category_row.tsx @@ -17,6 +17,7 @@ function EmojiPickerCategoryRow({categoryName, style}: Props) {
(({categoryOr className='emoji-picker__items' style={{height: EMOJI_CONTAINER_HEIGHT}} > -
+
{({height, width}) => ( ); } else { content = ( {'custom -
- {content} -
-
+ {content} + ); } diff --git a/webapp/channels/src/components/emoji_picker/components/emoji_picker_search.tsx b/webapp/channels/src/components/emoji_picker/components/emoji_picker_search.tsx index 1d53e34c2a..7842a8eef4 100644 --- a/webapp/channels/src/components/emoji_picker/components/emoji_picker_search.tsx +++ b/webapp/channels/src/components/emoji_picker/components/emoji_picker_search.tsx @@ -13,6 +13,8 @@ import {useIntl} from 'react-intl'; import {EMOJI_PER_ROW} from 'components/emoji_picker/constants'; import {NavigationDirection} from 'components/emoji_picker/types'; +import Constants from 'utils/constants'; + interface Props { value: string; cursorCategoryIndex: number; @@ -24,6 +26,8 @@ interface Props { resetCursorPosition: () => void; } +const KeyCodes = Constants.KeyCodes; + const EmojiPickerSearch = forwardRef(({value, cursorCategoryIndex, cursorEmojiIndex, onChange, resetCursorPosition, onKeyDown, focus, onEnter}: Props, ref) => { const {formatMessage} = useIntl(); @@ -39,7 +43,7 @@ const EmojiPickerSearch = forwardRef(({value, cursorCat const handleKeyDown = (event: KeyboardEvent) => { switch (event.key) { - case 'ArrowRight': + case KeyCodes.RIGHT[0]: // If the cursor is at the end of the textbox and an emoji is currently selected, move it to the next emoji if ((event.currentTarget?.selectionStart ?? 0) + 1 > value.length || (cursorCategoryIndex !== -1 || cursorEmojiIndex !== -1)) { event.stopPropagation(); @@ -48,7 +52,7 @@ const EmojiPickerSearch = forwardRef(({value, cursorCat onKeyDown(NavigationDirection.NextEmoji); } break; - case 'ArrowLeft': + case KeyCodes.LEFT[0]: if (cursorCategoryIndex > 0 || cursorEmojiIndex > 0) { event.stopPropagation(); event.preventDefault(); @@ -65,7 +69,7 @@ const EmojiPickerSearch = forwardRef(({value, cursorCat focus(); } break; - case 'ArrowUp': + case KeyCodes.UP[0]: event.stopPropagation(); event.preventDefault(); @@ -88,7 +92,7 @@ const EmojiPickerSearch = forwardRef(({value, cursorCat onKeyDown(NavigationDirection.PreviousEmojiRow); } break; - case 'ArrowDown': + case KeyCodes.DOWN[0]: event.stopPropagation(); event.preventDefault(); @@ -104,7 +108,14 @@ const EmojiPickerSearch = forwardRef(({value, cursorCat onKeyDown(NavigationDirection.NextEmojiRow); } break; - case 'Enter': { + case KeyCodes.SPACE[0]: { + event.stopPropagation(); + event.preventDefault(); + + onEnter(); + break; + } + case KeyCodes.ENTER[0]: { event.stopPropagation(); event.preventDefault(); diff --git a/webapp/channels/src/components/emoji_picker/emoji_picker.tsx b/webapp/channels/src/components/emoji_picker/emoji_picker.tsx index 235183c512..bdec803295 100644 --- a/webapp/channels/src/components/emoji_picker/emoji_picker.tsx +++ b/webapp/channels/src/components/emoji_picker/emoji_picker.tsx @@ -340,6 +340,7 @@ const EmojiPicker = ({ return; } + searchInputRef.current?.setAttribute('aria-activedescendant', newCursorEmoji.name.toLocaleLowerCase().replaceAll(' ', '_')); setCursor({ rowIndex: newCursor.rowIndex, emojiId: newCursor.emojiId, diff --git a/webapp/channels/src/components/post_emoji/post_emoji.tsx b/webapp/channels/src/components/post_emoji/post_emoji.tsx index effb4c1d6e..f46e7d4b11 100644 --- a/webapp/channels/src/components/post_emoji/post_emoji.tsx +++ b/webapp/channels/src/components/post_emoji/post_emoji.tsx @@ -29,6 +29,7 @@ const PostEmoji = ({children, name, imageUrl}: Props) => { className='emoticon' data-testid={`postEmoji.${emojiText}`} style={{backgroundImage: backgroundImageUrl}} + aria-label={emojiText} > {children} diff --git a/webapp/channels/src/sass/components/_emoticons.scss b/webapp/channels/src/sass/components/_emoticons.scss index 2f51ac0976..0a1fc3737f 100644 --- a/webapp/channels/src/sass/components/_emoticons.scss +++ b/webapp/channels/src/sass/components/_emoticons.scss @@ -538,7 +538,9 @@ $emoji-footer-height: $emoji-footer-border-width + $emoji-half-height + $emoji- height: 36px; align-items: center; justify-content: center; + border: none; border-radius: 3px; + background-color: transparent; cursor: pointer; vertical-align: middle;