fix: put annotation in title/aria-label (#369)

Fixes #366
nolanlawson · Oct 8, 2023 · bd2004b · bd2004b
1 parent 0524c1d
commit bd2004b
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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)