From bd2004b25d46554b6ecc46ea817f0233b1ec6bc5 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sun, 8 Oct 2023 13:11:12 -0700
Subject: [PATCH] fix: put annotation in title/aria-label (#369)

Fixes #366
---
 bin/bundlesize.js                        |  2 +-
 src/picker/components/Picker/Picker.html |  4 ++--
 src/picker/components/Picker/Picker.js   | 14 +++++++++++++-
 src/picker/utils/summarizeEmojisForUI.js |  6 +++---
 test/spec/picker/custom.test.js          |  3 +++
 test/spec/picker/dataSource.test.js      |  8 ++++----
 6 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/bin/bundlesize.js b/bin/bundlesize.js
index 857209c..c699be7 100644
--- a/bin/bundlesize.js
+++ b/bin/bundlesize.js
@@ -5,7 +5,7 @@ import { promisify } from 'node:util'
 import prettyBytes from 'pretty-bytes'
 import fs from 'node:fs/promises'
 
-const MAX_SIZE_MIN = '42.6 kB'
+const MAX_SIZE_MIN = '42.7 kB'
 const MAX_SIZE_MINGZ = '15 kB'
 
 const FILENAME = './bundle.js'
diff --git a/src/picker/components/Picker/Picker.html b/src/picker/components/Picker/Picker.html
index f8b3d6d..503f973 100644
--- a/src/picker/components/Picker/Picker.html
+++ b/src/picker/components/Picker/Picker.html
@@ -154,7 +154,7 @@
             <button role={searchMode ? 'option' : 'menuitem'}
                     aria-selected={searchMode ? i == activeSearchItem : ''}
                     aria-label={labelWithSkin(emoji, currentSkinTone)}
-                    title={emoji.title}
+                    title={titleForEmoji(emoji)}
                     class="emoji {searchMode && i === activeSearchItem ? 'active' : ''}"
                     id="emo-{emoji.id}">
               {#if emoji.unicode}
@@ -181,7 +181,7 @@
     {#each currentFavorites as emoji, i (emoji.id)}
       <button role="menuitem"
               aria-label={labelWithSkin(emoji, currentSkinTone)}
-              title={emoji.title}
+              title={titleForEmoji(emoji)}
               class="emoji"
               id="fav-{emoji.id}">
         {#if emoji.unicode}
diff --git a/src/picker/components/Picker/Picker.js b/src/picker/components/Picker/Picker.js
index 157d9c2..6f6d0b4 100644
--- a/src/picker/components/Picker/Picker.js
+++ b/src/picker/components/Picker/Picker.js
@@ -62,6 +62,9 @@ let currentGroup
 let databaseLoaded = false // eslint-disable-line no-unused-vars
 let activeSearchItemId // eslint-disable-line no-unused-vars
 
+// constants
+const EMPTY_ARRAY = []
+
 //
 // Utils/helpers
 //
@@ -86,7 +89,16 @@ const unicodeWithSkin = (emoji, currentSkinTone) => (
 
 // eslint-disable-next-line no-unused-vars
 const labelWithSkin = (emoji, currentSkinTone) => (
-  uniq([(emoji.name || unicodeWithSkin(emoji, currentSkinTone)), ...(emoji.shortcodes || [])]).join(', ')
+  uniq([
+    (emoji.name || unicodeWithSkin(emoji, currentSkinTone)),
+    emoji.annotation,
+    ...(emoji.shortcodes || EMPTY_ARRAY)
+  ].filter(Boolean)).join(', ')
+)
+
+// eslint-disable-next-line no-unused-vars
+const titleForEmoji = (emoji) => (
+  emoji.annotation || (emoji.shortcodes || EMPTY_ARRAY).join(', ')
 )
 
 //
diff --git a/src/picker/utils/summarizeEmojisForUI.js b/src/picker/utils/summarizeEmojisForUI.js
index fd1d8bb..28553f4 100644
--- a/src/picker/utils/summarizeEmojisForUI.js
+++ b/src/picker/utils/summarizeEmojisForUI.js
@@ -15,14 +15,14 @@ export function summarizeEmojisForUI (emojis, emojiSupportLevel) {
     return res
   }
 
-  return emojis.map(({ unicode, skins, shortcodes, url, name, category }) => ({
+  return emojis.map(({ unicode, skins, shortcodes, url, name, category, annotation }) => ({
     unicode,
     name,
     shortcodes,
     url,
     category,
+    annotation,
     id: unicode || name,
-    skins: skins && toSimpleSkinsMap(skins),
-    title: (shortcodes || []).join(', ')
+    skins: skins && toSimpleSkinsMap(skins)
   }))
 }
diff --git a/test/spec/picker/custom.test.js b/test/spec/picker/custom.test.js
index e5b9a8d..07bcdc2 100644
--- a/test/spec/picker/custom.test.js
+++ b/test/spec/picker/custom.test.js
@@ -79,6 +79,9 @@ describe('Custom emojis tests', () => {
 
     await waitFor(() => expect(getByRole(container, 'menuitem', { name: 'themonkey' })).toBeVisible())
 
+    expect(getByRole(container, 'menuitem', { name: 'themonkey' }).getAttribute('title')).toStrictEqual('themonkey')
+    expect(getByRole(container, 'menuitem', { name: 'themonkey' }).getAttribute('aria-label')).toStrictEqual('themonkey')
+
     getByRole(container, 'tab', { name: 'Flags' }).click()
 
     await waitFor(() => expect(getByRole(container, 'menuitem', { name: /🏁/ })).toBeVisible())
diff --git a/test/spec/picker/dataSource.test.js b/test/spec/picker/dataSource.test.js
index c66aaa0..1455de8 100644
--- a/test/spec/picker/dataSource.test.js
+++ b/test/spec/picker/dataSource.test.js
@@ -34,8 +34,8 @@ describe('dataSource test', () => {
     await waitFor(() => expect(getByRole(container, 'menuitem', { name: /😀/ })).toBeVisible())
 
     // no shortcodes, no title
-    expect(getByRole(container, 'menuitem', { name: /😀/ }).getAttribute('title')).toStrictEqual('')
-    expect(getByRole(container, 'menuitem', { name: /😀/ }).getAttribute('aria-label')).toStrictEqual('😀')
+    expect(getByRole(container, 'menuitem', { name: /😀/ }).getAttribute('title')).toStrictEqual('grinning face')
+    expect(getByRole(container, 'menuitem', { name: /😀/ }).getAttribute('aria-label')).toStrictEqual('😀, grinning face')
 
     await picker.database.delete()
     await tick(20)
@@ -54,8 +54,8 @@ describe('dataSource test', () => {
     await waitFor(() => expect(getByRole(container, 'menuitem', { name: /😀/ })).toBeVisible())
 
     // no shortcodes, no title
-    expect(getByRole(container, 'menuitem', { name: /😀/ }).getAttribute('title')).toStrictEqual('gleeful')
-    expect(getByRole(container, 'menuitem', { name: /😀/ }).getAttribute('aria-label')).toStrictEqual('😀, gleeful')
+    expect(getByRole(container, 'menuitem', { name: /😀/ }).getAttribute('title')).toStrictEqual('grinning face')
+    expect(getByRole(container, 'menuitem', { name: /😀/ }).getAttribute('aria-label')).toStrictEqual('😀, grinning face, gleeful')
 
     await picker.database.delete()
     await tick(20)