Improve accessibility for emoji

This commit is contained in:
Max Leiter 2018-03-09 14:00:16 -08:00
parent e43c591890
commit 01753a814c
4 changed files with 2696 additions and 8 deletions

File diff suppressed because it is too large Load Diff

View File

@ -9,6 +9,7 @@ const findEmoji = require("./ircmessageparser/findEmoji");
const findNames = require("./ircmessageparser/findNames");
const merge = require("./ircmessageparser/merge");
const colorClass = require("./colorClass");
const emojiMap = require("../fullnamemap.json");
// Create an HTML `span` with styling information for a given fragment
function createFragment(fragment) {
@ -114,7 +115,11 @@ module.exports = function parse(text, users) {
const escapedChannel = Handlebars.Utils.escapeExpression(textPart.channel);
return `<span class="inline-channel" role="button" tabindex="0" data-chan="${escapedChannel}">${fragments}</span>`;
} else if (textPart.emoji) {
return `<span class="emoji">${fragments}</span>`;
if (!emojiMap[textPart.emoji]) {
return `<span class="emoji" role="img">${fragments}</span>`;
}
return `<span class="emoji" role="img" aria-label="Emoji: ${emojiMap[textPart.emoji]}" title="${emojiMap[textPart.emoji]}">${fragments}</span>`;
} else if (textPart.nick) {
const nick = Handlebars.Utils.escapeExpression(textPart.nick);
return `<span role="button" class="user ${colorClass(nick)}" data-name="${nick}">${fragments}</span>`;

View File

@ -10,18 +10,19 @@ request.get({
json: true,
}, (error, response, emojiStrategy) => {
const emojiMap = {};
const fullNameEmojiMap = {};
for (const key in emojiStrategy) {
if (emojiStrategy.hasOwnProperty(key)) {
const shortname = prepareShortName(emojiStrategy[key].shortname);
const unicode = stringToUnicode(emojiStrategy[key].unicode_output);
fullNameEmojiMap[unicode] = emojiStrategy[key].name;
// Skip tones, at least for now
if (shortname.includes("tone")) {
continue;
}
const unicode = stringToUnicode(emojiStrategy[key].unicode_output);
emojiMap[shortname] = unicode;
for (let alternative of emojiStrategy[key].shortname_alternates) {
@ -36,7 +37,8 @@ request.get({
}
}
const output = JSON.stringify(emojiMap, null, 2) + "\n";
const emojiMapOutput = JSON.stringify(emojiMap, null, 2) + "\n";
const fullNameEmojiMapOutput = JSON.stringify(fullNameEmojiMap, null, 2) + "\n";
fs.writeFileSync(path.resolve(path.join(
__dirname,
@ -45,7 +47,16 @@ request.get({
"js",
"libs",
"simplemap.json"
)), output);
)), emojiMapOutput);
fs.writeFileSync(path.resolve(path.join(
__dirname,
"..",
"client",
"js",
"libs",
"fullnamemap.json"
)), fullNameEmojiMapOutput);
});
function stringToUnicode(key) {

View File

@ -358,16 +358,20 @@ describe("parse Handlebars helper", () => {
[{
name: "in text",
input: "Hello💬",
expected: 'Hello<span class="emoji">💬</span>',
expected: 'Hello<span class="emoji" role="img" aria-label="Emoji: speech balloon" title="speech balloon">💬</span>',
}, {
name: "complicated zero-join-width emoji",
input: "🤦🏿‍♀️",
expected: '<span class="emoji" role="img" aria-label="Emoji: woman facepalming: dark skin tone" title="woman facepalming: dark skin tone">🤦🏿‍♀️</span>',
}, {
name: "with modifiers",
input: "🤷‍♀️",
expected: '<span class="emoji">🤷‍♀️</span>',
expected: '<span class="emoji" role="img" aria-label="Emoji: woman shrugging" title="woman shrugging">🤷‍♀️</span>',
}, {
// FIXME: These multiple `span`s should be optimized into a single one. See https://github.com/thelounge/thelounge/issues/1783
name: "wrapped in style",
input: "Super \x034💚 green!",
expected: 'Super <span class="emoji"><span class="irc-fg4">💚</span></span><span class="irc-fg4"> green!</span>',
expected: 'Super <span class="emoji" role="img" aria-label="Emoji: green heart" title="green heart"><span class="irc-fg4">💚</span></span><span class="irc-fg4"> green!</span>',
}, {
name: "wrapped in URLs",
input: "https://i.❤️.thelounge.chat",