devs
/
emoji-picker-element
mirror of https://github.com/nolanlawson/emoji-picker-element.git
4
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

Fixes #366
This commit is contained in:
Nolan Lawson 2023-10-08 13:11:12 -07:00 committed by GitHub
parent 0524c1d279
commit bd2004b25d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 26 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
bin/bundlesize.js
View File

@ -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'

4
src/picker/components/Picker/Picker.html
View File

@ -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}

14
src/picker/components/Picker/Picker.js
View File

@ -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(', ')
)
//

6
src/picker/utils/summarizeEmojisForUI.js
View File

@ -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)
}))
}

3
test/spec/picker/custom.test.js
View File

@ -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())

8
test/spec/picker/dataSource.test.js
View File

@ -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)