[MA-14]: Ensure all interactive functionality is operable with the ke…

…yboard in emoji picker
Brightscout · Dec 10, 2024 · 70c5e7f · 70c5e7f
1 parent 3224e0d
commit 70c5e7f
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 8 deletions.
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
@@ -134,7 +134,9 @@ exports[`components/emoji_picker/EmojiPicker should match snapshot 1`] = `
       style="height: 290px;"
     >
       <div
+        aria-labelledby="emojiPickerSearch"
         class="emoji-picker__container"
+        role="grid"
       >
         <div
           style="overflow: visible; height: 0px; width: 0px;"

diff --git a/...pp/channels/src/components/emoji_picker/components/emoji_picker_category_or_emoji_row.tsx b/...pp/channels/src/components/emoji_picker/components/emoji_picker_category_or_emoji_row.tsx
@@ -35,6 +35,7 @@ function EmojiPickerCategoryOrEmojiRow({index, style, data, cursorRowIndex, curs
         <div
             style={style}
             className='emoji-picker__row'
+            role='row'
         >
             {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
@@ -17,6 +17,7 @@ function EmojiPickerCategoryRow({categoryName, style}: Props) {
         <div
             className='emoji-picker-items__container'
             style={style}
+            role='row'
         >
             <div
                 className='emoji-picker__category-header'

diff --git a/webapp/channels/src/components/emoji_picker/components/emoji_picker_current_results.tsx b/webapp/channels/src/components/emoji_picker/components/emoji_picker_current_results.tsx
@@ -91,7 +91,11 @@ const EmojiPickerCurrentResults = forwardRef<InfiniteLoader, Props>(({categoryOr
             className='emoji-picker__items'
             style={{height: EMOJI_CONTAINER_HEIGHT}}
         >
-            <div className='emoji-picker__container'>
+            <div
+                className='emoji-picker__container'
+                role='grid'
+                aria-labelledby='emojiPickerSearch'
+            >
                 <AutoSizer>
                     {({height, width}) => (
                         <InfiniteLoader

diff --git a/webapp/channels/src/components/emoji_picker/components/emoji_picker_item.tsx b/webapp/channels/src/components/emoji_picker/components/emoji_picker_item.tsx
@@ -60,7 +60,7 @@ function EmojiPickerItem({emoji, rowIndex, isSelected, onClick, onMouseOver}: Pr
 
         content = (
             <img
-                alt={'emoji image'}
+                alt={`${emoji.name.toLocaleLowerCase()} emoji image`}
                 data-testid={emoji.short_names}
                 src={imgTrans}
                 className={`emojisprite emoji-category-${emoji.category} emoji-${emojiUnified}`}
@@ -74,7 +74,6 @@ function EmojiPickerItem({emoji, rowIndex, isSelected, onClick, onMouseOver}: Pr
                         emojiName: (emojiName).replace(/_/g, ' '),
                     },
                 )}
-                role='button'
             />
         );
     } else {
@@ -89,15 +88,17 @@ function EmojiPickerItem({emoji, rowIndex, isSelected, onClick, onMouseOver}: Pr
     }
 
     return (
-        <div
+        <button
             className={itemClassName}
             onClick={handleClick}
             onMouseOver={throttledMouseOver}
+            data-testid='emojiItem'
+            tabIndex={-1}
+            type='button'
+            aria-label={isSystemEmoji(emoji) ? emoji.short_name : emoji.name}
         >
-            <div data-testid='emojiItem'>
-                {content}
-            </div>
-        </div>
+            {content}
+        </button>
     );
 }
 

diff --git 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;