Improve emoji rendering

src/Components/AnswerTableRow/index.tsx

@@ -1,3 +1,5 @@
+import Emoji from '../Emoji/Emoji';
+
 interface AnswerTableRowProps {
   time: string;
   selectedIcon: string;
@@ -8,7 +10,9 @@ function AnswerTableRow({ time, selectedIcon, text }: AnswerTableRowProps) {
   return (
     <tr className="bg-white sm:py-4 text-zinc-500">
       <td className="sm:p-4">{time}</td>
-      <td className="sm:p-4">{selectedIcon}</td>
+      <td className="sm:p-4">
+        <Emoji symbol={selectedIcon} />
+      </td>
       <td className="sm:p-4">{text}</td>
     </tr>
   );

src/Components/Emoji/Emoji.tsx

@@ -0,0 +1,16 @@
+type EmojiProps = {
+  symbol: string;
+  label?: string;
+};
+
+export default function Emoji({ symbol, label }: EmojiProps) {
+  return (
+    <span
+      role="img"
+      aria-label={label ? label : ''}
+      aria-hidden={label ? 'false' : 'true'}
+    >
+      {symbol}
+    </span>
+  );
+}

src/Components/EmojiButton/index.tsx

@@ -1,20 +1,25 @@
 import React from 'react';
+import Emoji from '../Emoji/Emoji';
 
 interface EmojiButtonProps {
-    icon: string;
-    selected?: boolean;
-    onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  icon: string;
+  selected?: boolean;
+  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
-function EmojiButton({ icon, onClick, selected = false }: EmojiButtonProps & React.HTMLProps<HTMLButtonElement>) {
+function EmojiButton({
+  icon,
+  onClick,
+  selected = false,
+}: EmojiButtonProps & React.HTMLProps<HTMLButtonElement>) {
   return (
     <button
       className={`bg-white text-3xl p-3 border-4 border-transparent rounded-lg duration-100 m-2 shadow ${
         selected ? 'scale-90 border-slate-300' : ''
       }`}
       onClick={onClick}
     >
-      {icon}
+      <Emoji symbol={icon} />
     </button>
   );
 }

src/Components/EmojiPicker/index.tsx

@@ -1,6 +1,7 @@
 import Picker from 'emoji-picker-react';
 import { useRef, useState } from 'react';
 import { useCloseComponent } from '../../Hooks/useCloseComponent';
+import Emoji from '../Emoji/Emoji';
 
 interface EmojiPickerProps {
   index: number;
@@ -27,14 +28,19 @@ function EmojiPicker({ defaultEmote, index, onEmotePick }: EmojiPickerProps) {
         className="label-text w-16 text-3xl bg-white p-3 rounded-lg shadow transition hover:scale-95"
         onClick={() => setDisplayPicker(!displayPicker)}
       >
-        {chosenEmoji?.emoji || defaultEmote}
+        <Emoji symbol={chosenEmoji?.emoji || defaultEmote} />
       </button>
       {displayPicker && (
         <Picker
+          native
           onEmojiClick={onEmojiClick}
           disableAutoFocus
           disableSearchBar
           disableSkinTonePicker
+          groupVisibility={{
+            flags: false,
+            symbols: false,
+          }}
           pickerStyle={{
             position: 'absolute',
             top: '105%',

src/Pages/SurveyAnswerPage/index.tsx

@@ -59,6 +59,7 @@ function SurveyAnswerPage() {
     setTitle(surveyData.data()?.title);
     const data = answersData.docs.map((doc) => ({
       ...doc.data(),
+      id: doc.id,
       answerDate: formatFirebaseDate(doc.data().answerDate as Timestamp),
     })) as AnswerData[];