Improve accessibility for emoji
This commit is contained in:
parent
e43c591890
commit
01753a814c
2668
client/js/libs/fullnamemap.json
Normal file
2668
client/js/libs/fullnamemap.json
Normal file
File diff suppressed because it is too large
Load Diff
@ -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>`;
|
||||
|
@ -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) {
|
||||
|
@ -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",
|
||||
|
Loading…
Reference in New Issue
Block a user