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 85a20fb9544..2d6c5fd6358 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;"
     >
       <div
+        aria-labelledby="emojiPickerSearch"
         class="emoji-picker__container"
+        role="grid"
       >
         <div
           style="overflow: visible; height: 0px; width: 0px;"
diff --git a/webapp/channels/src/components/emoji_picker/components/emoji_picker_category_or_emoji_row.tsx b/webapp/channels/src/components/emoji_picker/components/emoji_picker_category_or_emoji_row.tsx
index b099c6783ef..9a86117300f 100644
--- a/webapp/channels/src/components/emoji_picker/components/emoji_picker_category_or_emoji_row.tsx
+++ b/webapp/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
index 3835d98d456..01d052b7362 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) {
         <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
index 5d317687853..5a52e1483b7 100644
--- 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
index e2beccaf134..91a277dce37 100644
--- 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
index 2f51ac09766..4a87a5deb95 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;