Convert typed emoticons into Emoji in the TextBox

[corinagum]

#3249 (Feature incomplete)

Changelog Entry

• Convert typed emoticons into emoji in the Textbox: #3249, by @corinagum, in PR #3303

Description

• Adds the ability to convert various emoticon (e.g. :)) into emoji (😀) while typing on the fly.
• Emoji autocorrect is disabled by default. Enable via styleOptions
• Developer may add custom emoji list. Enable via styleOptions
• Accessibility:
  • Emoji are announced by Narrator in Edge and Chrome after typing Space
  • ❌ Emoji are announced by NVDA and Chrome
  • This is an external bug. Issue filed with NVDA team NVDA does not speak emoji name with Speak Typed Words enabled nvaccess/nvda#11372
• End-user may undo a typed emoji by using Ctrl + Z
  • This feature has not been completed

Specific Changes

• By enabling emojiAutocorrect to true in styleOptions, emoticon typed ins SendBox will be converted to emoji on the fly
• emojiList in style options allows customers to assign custom map.
  • The default list of Emoji uses guidance from Microsoft Office behavior
  • Default map:

  const emojiUnicodeMap = emojiList || {
    ':)': '😊',
    ':-)': '😊',
    '(:': '😊',
    '(-:': '😊',
    ':-|': '😐',
    ':|': '😐',
    ':-D': '😀',
    ':D': '😀',
    ':-p': '😛',
    ':p': '😛',
    ':-P': '😛',
    ':P': '😛',
    ':-o': '😲',
    ':o': '😲',
    ':O': '😲',
    ':-O': '😲',
    ':-0': '😲',
    ':0': '😲',
    ';-)': '😉',
    ';)': '😉',
    '<3': '❤️',
    '</3': '💔',
    '<\\3': '💔'
  };

• Default RegExp for detecting emoji: /([:<()\\|\/3DPpoO0-]{2,3})/gim
  • Custom RegExp will be determined via the custom emoji list in styles

Example styleOptions to enable custom emoji:

const styleOptions = {
    emojiAutocorrect: true,
    emojiList: {
        ':sheep:': '🐑',
        '<3': '❤️
    }
 };

window.WebChat.renderWebChat(
  {
    directLine: window.WebChat.createDirectLine({ token }),
    styleOptions
  },
  document.getElementById('webchat')
 );

• Testing Added

Data

Emoji conversion behavior comparison by app:

	🌟 Web Chat	Teams	Skype	Slack	WhatsApp	Messenger
Undo autocorrect	N/A	Ctrl + Z (buggy)	No	Ctrl + Delete; Deletes emoji or shows text	Backspace	No
Copy/Paste	Yes	No	Converts after send	Yes	No	Converts after send
Undo after blur	N/A	Yes	N/A (converts after send)	Deletes emoji	Yes	No
:)	Yes	Yes	Yes	converts to :) emoji	No (:-))	Yes
(:	Yes	No	No	Yes	No	converts to :) emoji
spaces required?	No	No	No	Yes	No	Yes
Disable feature	Yes (disabled by default)	No	No	No	No	No
Add list of own emoji	Yes	No	No	Yes	No	No

Note on Assistive Technology behavior when Speak Typed Words is enabled:

Announces	Chrome/NVDA	Edge/Narrator	Chrome/Narrator
hi	❌	❌	❌
hi[space]	✔	✔	✔
:)	❌	❌	❌
:)[space]	❌	✔	✔
[C&P]hi	❌	❌	❌
[C&P]hi[space]	❌	✔	✔
[C&P]:)[space]	❌	✔	✔
[Emoji panel]:)	❌	❌	❌	(all combos read on selection in panel)

File issue: nvaccess/nvda#11372

[beyackle]

Just a question about implementation and another that's possibly just my own lack of understanding about hooks.

[corinagum]

@beyackle @compulim could you take another look? Thanks for the feedback.

[compulim]

1. Please add a sample on how to customize the emoji set.
2. Did you test pressing CTRL + Z after an emoticon is replaced with emoji? Can you add a test?
   • CTRL + Z may not work, but it should not break.
3. Please add a test for pasting text via CTRL + V. And set an expectation.
   • Expectations means: pasted text will have emoticons converted, or pasted text will not have emoticons converted
   • Please paste a text with 2+ emoticons, then append :) after it
4. Please add a test for typing the following texts and set an expectation.
   • function enabled(): boolean { return true; }
     • If the expectation is to converted this to emoji, please make sure there is a way the user can send this text without the emoji

FYI, some tests can only run under WebDriver but not Chrome because CTRL + V/Z cannot be emulated using JS.