From d740c9fc61f8e0e7aee99e244d335db31c08de25 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Mon, 26 Jun 2023 14:49:55 -0700
Subject: [PATCH] fix: :bug: apply skin tone to default reactions, aria labels
 for tone picker

---
 locales/en-US.yml                             |  8 +++++++-
 .../src/components/MkEmojiPicker.section.vue  | 10 +++++++++-
 .../client/src/components/MkEmojiPicker.vue   | 20 ++++++++++++++++++-
 .../client/src/pages/settings/reaction.vue    | 18 ++++++++++-------
 packages/client/src/scripts/emojilist.ts      |  9 ---------
 5 files changed, 46 insertions(+), 19 deletions(-)

diff --git a/locales/en-US.yml b/locales/en-US.yml
index 03ec9284b..eb4ad495a 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -2073,7 +2073,13 @@ _experiments:
   postImportsCaption: "Allows users to import their posts from past Calckey,\
     \ Misskey, Mastodon, Akkoma, and Pleroma accounts. It may cause slowdowns during\
     \ load if your queue is bottlenecked."
-
 _dialog:
   charactersExceeded: "Max characters exceeded! Current: {current}/Limit: {max}"
   charactersBelow: "Not enough characters! Current: {current}/Limit: {min}"
+_skinTones:
+  yellow: "Yellow"
+  light: "Light"
+  mediumLight: "Medium Light"
+  medium: "Medium"
+  mediumDark: "Medium Dark"
+  dark: "Dark"
diff --git a/packages/client/src/components/MkEmojiPicker.section.vue b/packages/client/src/components/MkEmojiPicker.section.vue
index c6052c60e..1a9bccb14 100644
--- a/packages/client/src/components/MkEmojiPicker.section.vue
+++ b/packages/client/src/components/MkEmojiPicker.section.vue
@@ -22,7 +22,14 @@
 				>
 					<i
 						class="ph-circle ph-fill ph-fw ph-lg"
-						:style="{ color: skinTone + '!important' }"
+						:style="{ color: skinTone + ' !important' }"
+						:aria-label="
+							props.skinToneLabels
+								? props.skinToneLabels[
+										props.skinTones.indexOf(skinTone)
+								  ]
+								: ''
+						"
 					></i>
 				</button>
 			</span>
@@ -49,6 +56,7 @@ const props = defineProps<{
 	initialShown?: boolean;
 	skinToneSelector?: boolean;
 	skinTones?: string[];
+	skinToneLabels?: string[];
 }>();
 
 const localEmojis = ref([...props.emojis]);
diff --git a/packages/client/src/components/MkEmojiPicker.vue b/packages/client/src/components/MkEmojiPicker.vue
index 260898e6e..88eaf3eed 100644
--- a/packages/client/src/components/MkEmojiPicker.vue
+++ b/packages/client/src/components/MkEmojiPicker.vue
@@ -115,6 +115,7 @@
 						:key="category"
 						:skin-tone-selector="category === 'people'"
 						:skin-tones="unicodeEmojiSkinTones"
+						:skin-tone-labels="unicodeEmojiSkinToneLabels"
 						:emojis="
 							emojilist
 								.filter((e) => e.category === category)
@@ -168,7 +169,6 @@ import XSection from "@/components/MkEmojiPicker.section.vue";
 import {
 	emojilist,
 	unicodeEmojiCategories,
-	unicodeEmojiSkinTones,
 	UnicodeEmojiDef,
 	getNicelyLabeledCategory,
 } from "@/scripts/emojilist";
@@ -210,6 +210,24 @@ const {
 	recentlyUsedEmojis,
 } = defaultStore.reactiveState;
 
+const unicodeEmojiSkinTones = [
+	"#FFDC5E",
+	"#F7DFCF",
+	"#F3D3A3",
+	"#D6AE89",
+	"#B17F56",
+	"#7D523C",
+];
+
+const unicodeEmojiSkinToneLabels = [
+	i18n.ts._skinTones.yellow,
+	i18n.ts._skinTones.light,
+	i18n.ts._skinTones.mediumLight,
+	i18n.ts._skinTones.medium,
+	i18n.ts._skinTones.mediumDark,
+	i18n.ts._skinTones.dark,
+];
+
 const size = computed(() =>
 	props.asReactionPicker ? reactionPickerSize.value : 1
 );
diff --git a/packages/client/src/pages/settings/reaction.vue b/packages/client/src/pages/settings/reaction.vue
index 65abaaa76..60f1ee03d 100644
--- a/packages/client/src/pages/settings/reaction.vue
+++ b/packages/client/src/pages/settings/reaction.vue
@@ -47,22 +47,22 @@
 
 			<FormRadios v-model="reactionPickerSkinTone" class="_formBlock">
 				<template #label>{{ i18n.ts.reactionPickerSkinTone }}</template>
-				<option :value="1">
+				<option :value="1" :aria-label="i18n.ts._skinTones.yellow">
 					<MkEmoji style="height: 1.7em" emoji="✌️" />
 				</option>
-				<option :value="6">
+				<option :value="6" :aria-label="i18n.ts._skinTones.dark">
 					<MkEmoji style="height: 1.7em" emoji="✌🏿" />
 				</option>
-				<option :value="5">
+				<option :value="5" :aria-label="i18n.ts._skinTones.mediumDark">
 					<MkEmoji style="height: 1.7em" emoji="✌🏾" />
 				</option>
-				<option :value="4">
+				<option :value="4" :aria-label="i18n.ts._skinTones.medium">
 					<MkEmoji style="height: 1.7em" emoji="✌🏽" />
 				</option>
-				<option :value="3">
+				<option :value="3" :aria-label="i18n.ts._skinTones.mediumLight">
 					<MkEmoji style="height: 1.7em" emoji="✌🏼" />
 				</option>
-				<option :value="2">
+				<option :value="2" :aria-label="i18n.ts._skinTones.light">
 					<MkEmoji style="height: 1.7em" emoji="✌🏻" />
 				</option>
 			</FormRadios>
@@ -137,6 +137,7 @@ import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { deepClone } from "@/scripts/clone";
 import { unisonReload } from "@/scripts/unison-reload";
+import {addSkinTone } from "@/scripts/emojilist";
 
 async function reloadAsk() {
 	const { canceled } = await os.confirm({
@@ -239,8 +240,11 @@ watch(enableEmojiReactions, async () => {
 });
 
 watch(reactionPickerSkinTone, async () => {
+	reactions.forEach((emoji) => {
+		addSkinTone(emoji, reactionPickerSkinTone.value);
+	});
 	await reloadAsk();
-})
+});
 
 const headerActions = $computed(() => []);
 
diff --git a/packages/client/src/scripts/emojilist.ts b/packages/client/src/scripts/emojilist.ts
index 5ae8bce3b..662063588 100644
--- a/packages/client/src/scripts/emojilist.ts
+++ b/packages/client/src/scripts/emojilist.ts
@@ -35,15 +35,6 @@ export const categoryMapping = {
 	Flags: "flags",
 } as const;
 
-export const unicodeEmojiSkinTones = [
-	"#FFDC5E",
-	"#F7DFCF",
-	"#F3D3A3",
-	"#D6AE89",
-	"#B17F56",
-	"#7D523C",
-];
-
 export function addSkinTone(emoji: string, skinTone?: number) {
 	const individualData = import("unicode-emoji-json/data-by-emoji.json");