feat: a11y for auto-like dlg, prompt dlg, config dlg action btn & hotkey input

assets/translations/README.md

@@ -16,15 +16,15 @@ To submit or edit a translation, please follow [this guide](../../contributing.m
 ### Translation progress:
 |   | Locale | Translated keys | Based on |
 | :----: | ------ | --------------- | :------: |
-|  | [`en_US`](./en_US.json) | `321` (default locale) |  |
-| ✅ | [`de_DE`](./de_DE.json) | `321/321` (100%) | ─ |
-|  | [`en_UK`](./en_UK.json) | `321/321` (100%) | `en_US` |
-| ✅ | [`es_ES`](./es_ES.json) | `321/321` (100%) | ─ |
-| ✅ | [`fr_FR`](./fr_FR.json) | `321/321` (100%) | ─ |
-| ✅ | [`hi_IN`](./hi_IN.json) | `321/321` (100%) | ─ |
-| ✅ | [`ja_JA`](./ja_JA.json) | `321/321` (100%) | ─ |
-| ✅ | [`pt_BR`](./pt_BR.json) | `321/321` (100%) | ─ |
-| ✅ | [`zh_CN`](./zh_CN.json) | `321/321` (100%) | ─ |
+|  | [`en_US`](./en_US.json) | `322` (default locale) |  |
+| ✅ | [`de_DE`](./de_DE.json) | `322/322` (100%) | ─ |
+|  | [`en_UK`](./en_UK.json) | `322/322` (100%) | `en_US` |
+| ✅ | [`es_ES`](./es_ES.json) | `322/322` (100%) | ─ |
+| ✅ | [`fr_FR`](./fr_FR.json) | `322/322` (100%) | ─ |
+| ✅ | [`hi_IN`](./hi_IN.json) | `322/322` (100%) | ─ |
+| ✅ | [`ja_JA`](./ja_JA.json) | `322/322` (100%) | ─ |
+| ✅ | [`pt_BR`](./pt_BR.json) | `322/322` (100%) | ─ |
+| ✅ | [`zh_CN`](./zh_CN.json) | `322/322` (100%) | ─ |
 
 <sub>
 ✅ - Fully translated

assets/translations/de_DE.json

@@ -154,6 +154,7 @@
     "auto_like": "Auto-Like",
     "auto_like_button_tooltip_enabled": "Klicke um Auto-Liken zu deaktivieren. Shift-Klick um den Management-Dialog zu öffnen.",
     "auto_like_button_tooltip_disabled": "Klicke um Auto-Liken zu aktivieren. Shift-Klick um den Management-Dialog zu öffnen.",
+    "auto_like_channel_toggle_tooltip": "Auto-Liken für den Kanal %1 umschalten",
     "add_auto_like_channel_id_prompt": "Gib die Benutzer-ID (@Name / UC...) oder die vollständige URL des Kanals ein, den du auto-liken möchtest.\nDrücke \"Abbrechen\" um zu beenden.",
     "add_auto_like_channel_invalid_id": "Die eingegebene Benutzer-ID ist ungültig.\nBitte stelle sicher, dass du die gesamte Kanal-URL kopierst! Sie sollte einen Teil wie \"channel/UC...\" oder \"/@...\" enthalten",
     "add_auto_like_channel_already_exists_prompt_new_name": "Ein Kanal mit dieser ID ist bereits in der Liste.\nMöchtest du den Namen ändern?",
@@ -186,8 +187,8 @@
     "vote_ratio_green_red": "Grün und rot",
     "vote_ratio_blue_gray": "Blau und grau",
 
-    "votes_format_short": "Kurz: %1",
-    "votes_format_long": "Lang: %1",
+    "votes_format_short": "Kurz",
+    "votes_format_long": "Lang",
 
     "unit_entries-1": "Eintrag",
     "unit_entries-n": "Einträge",
@@ -252,7 +253,7 @@
     "feature_desc_fixHdrIssues": "Verhindere einige Rendering-Probleme bei der Verwendung einer HDR-kompatiblen Grafikkarte mit Monitor",
     "feature_desc_showVotes": "Zeige die Anzahl der Likes und Dislikes auf dem aktuell spielenden Song",
     "feature_helptext_showVotes": "Dieses Feature ist dank Return YouTube Dislike möglich. Es zeigt die ungefähre Anzahl von Likes und Dislikes auf dem aktuell spielenden Song an.",
-    "feature_desc_numbersFormat": "Wie sollen die Likes und Dislikes formatiert werden?",
+    "feature_desc_numbersFormat": "Wie sollen Zahlen formatiert werden?",
 
     "feature_desc_volumeSliderLabel": "Füge eine Prozent-Beschriftung neben dem Lautstärkeregler hinzu",
     "feature_desc_volumeSliderSize": "Die Breite des Lautstärkereglers in Pixeln",

assets/translations/en_US.json

@@ -154,6 +154,7 @@
     "auto_like": "Auto-like",
     "auto_like_button_tooltip_enabled": "Click to disable auto-liking. Shift-click to open the management dialog.",
     "auto_like_button_tooltip_disabled": "Click to enable auto-liking. Shift-click to open the management dialog.",
+    "auto_like_channel_toggle_tooltip": "Toggle auto-liking for the channel %1",
     "add_auto_like_channel_id_prompt": "Enter the user ID (@Name / UC...) or full URL of the channel you want to auto-like.\nPress \"cancel\" to exit.",
     "add_auto_like_channel_invalid_id": "The entered user ID is invalid.\nPlease make sure you copy the entire channel URL! It should contain a part like \"channel/UC...\" or \"/@...\"",
     "add_auto_like_channel_already_exists_prompt_new_name": "A channel with that ID is already in the list.\nDo you want to change the name?",
@@ -186,8 +187,8 @@
     "vote_ratio_green_red": "Green and red",
     "vote_ratio_blue_gray": "Blue and gray",
 
-    "votes_format_short": "Short: %1",
-    "votes_format_long": "Full: %1",
+    "votes_format_short": "Short",
+    "votes_format_long": "Long",
 
     "unit_entries-1": "entry",
     "unit_entries-n": "entries",
@@ -252,7 +253,7 @@
     "feature_desc_fixHdrIssues": "Prevent some rendering issues when using an HDR-compatible GPU and monitor",
     "feature_desc_showVotes": "Show the amount of likes and dislikes on the currently playing song",
     "feature_helptext_showVotes": "This feature is powered by Return YouTube Dislike and will show the approximate amount of likes and dislikes on the currently playing song.",
-    "feature_desc_numbersFormat": "How should the likes and dislikes be formatted?",
+    "feature_desc_numbersFormat": "How should numbers be formatted?",
 
     "feature_desc_volumeSliderLabel": "Add a percentage label next to the volume slider",
     "feature_desc_volumeSliderSize": "The width of the volume slider in pixels",

assets/translations/es_ES.json

@@ -154,6 +154,7 @@
     "auto_like": "Me gusta automático",
     "auto_like_button_tooltip_enabled": "Haga clic para deshabilitar el me gusta automático. Haga clic con Mayús para abrir el diálogo de administración.",
     "auto_like_button_tooltip_disabled": "Haga clic para habilitar el me gusta automático. Haga clic con Mayús para abrir el diálogo de administración.",
+    "auto_like_channel_toggle_tooltip": "Alternar el me gusta automático para el canal %1",
     "add_auto_like_channel_id_prompt": "Ingrese el ID de usuario (@Nombre / UC...) o la URL completa del canal que desea dar me gusta automáticamente.\nPresione \"cancelar\" para salir.",
     "add_auto_like_channel_invalid_id": "El ID de usuario ingresado no es válido.\n¡Asegúrese de copiar la URL completa del canal! Debería contener una parte como \"channel/UC...\" o \"/@...\"",
     "add_auto_like_channel_already_exists_prompt_new_name": "Ya hay un canal con ese ID en la lista.\n¿Quieres cambiar el nombre?",
@@ -186,8 +187,8 @@
     "vote_ratio_green_red": "Verde y rojo",
     "vote_ratio_blue_gray": "Azul y gris",
 
-    "votes_format_short": "Corto: %1",
-    "votes_format_long": "Completo: %1",
+    "votes_format_short": "Corto",
+    "votes_format_long": "Largo",
 
     "unit_entries-1": "entrada",
     "unit_entries-n": "entradas",
@@ -252,7 +253,7 @@
     "feature_desc_fixHdrIssues": "Prevenir algunos problemas de renderizado al usar una GPU y un monitor compatibles con HDR",
     "feature_desc_showVotes": "Mostrar la cantidad de me gusta y no me gusta en la canción que se está reproduciendo actualmente",
     "feature_helptext_showVotes": "Esta función está alimentada por Return YouTube Dislike y mostrará la cantidad aproximada de me gusta y no me gusta en la canción que se está reproduciendo actualmente.",
-    "feature_desc_numbersFormat": "¿Cómo deberían formatearse los me gusta y no me gusta?",
+    "feature_desc_numbersFormat": "¿Cómo deberían formatearse los números?",
 
     "feature_desc_volumeSliderLabel": "Agregue una etiqueta de porcentaje junto al control deslizante de volumen",
     "feature_desc_volumeSliderSize": "El ancho del control deslizante de volumen en píxeles",

assets/translations/fr_FR.json

@@ -154,6 +154,7 @@
     "auto_like": "Auto-aimer",
     "auto_like_button_tooltip_enabled": "Cliquez pour désactiver l'auto-aimer. Cliquez sur Maj pour ouvrir le dialogue de gestion.",
     "auto_like_button_tooltip_disabled": "Cliquez pour activer l'auto-aimer. Cliquez sur Maj pour ouvrir le dialogue de gestion.",
+    "auto_like_channel_toggle_tooltip": "Activer ou désactiver l'auto-aimer pour la chaîne %1",
     "add_auto_like_channel_id_prompt": "Entrez l'ID de l'utilisateur (@Nom / UC...) ou l'URL complète de la chaîne que vous souhaitez auto-aimer.\nAppuyez sur \"Annuler\" pour quitter.",
     "add_auto_like_channel_invalid_id": "L'ID de l'utilisateur saisi est invalide.\nAssurez-vous de copier l'intégralité de l'URL de la chaîne! Elle doit contenir une partie comme \"channel/UC...\" ou \"/@...\"",
     "add_auto_like_channel_already_exists_prompt_new_name": "Une chaîne avec cet ID est déjà dans la liste.\nVoulez-vous changer le nom?",
@@ -186,8 +187,8 @@
     "vote_ratio_green_red": "Vert et rouge",
     "vote_ratio_blue_gray": "Bleu et gris",
 
-    "votes_format_short": "Court: %1",
-    "votes_format_long": "Complet: %1",
+    "votes_format_short": "Court",
+    "votes_format_long": "Long",
 
     "unit_entries-1": "entrée",
     "unit_entries-n": "entrées",
@@ -252,7 +253,7 @@
     "feature_desc_fixHdrIssues": "Prévenir certains problèmes de rendu lors de l'utilisation d'un GPU et d'un moniteur compatibles HDR",
     "feature_desc_showVotes": "Afficher le nombre de j'aime et de je n'aime pas sur la chanson en cours de lecture",
     "feature_helptext_showVotes": "Cette fonctionnalité est alimentée par Return YouTube Dislike et affichera le nombre approximatif de j'aime et de je n'aime pas sur la chanson en cours de lecture.",
-    "feature_desc_numbersFormat": "Comment les j'aime et les je n'aime pas doivent-ils être formatés?",
+    "feature_desc_numbersFormat": "Comment les nombres doivent-ils être formatés?",
 
     "feature_desc_volumeSliderLabel": "Ajouter une étiquette de pourcentage à côté du curseur de volume",
     "feature_desc_volumeSliderSize": "La largeur du curseur de volume en pixels",

assets/translations/hi_IN.json

@@ -154,6 +154,7 @@
     "auto_like": "ऑटो-पसंद",
     "auto_like_button_tooltip_enabled": "ऑटो-पसंद को अक्षम करने के लिए क्लिक करें। शिफ्ट-क्लिक करने पर प्रबंधन संवाद खोलें।",
     "auto_like_button_tooltip_disabled": "ऑटो-पसंद को सक्षम करने के लिए क्लिक करें। शिफ्ट-क्लिक करने पर प्रबंधन संवाद खोलें।",
+    "auto_like_channel_toggle_tooltip": "चैनल %1 के लिए ऑटो-पसंद को सक्षम/अक्षम करें",
     "add_auto_like_channel_id_prompt": "उस चैनल का उपयोगकर्ता आईडी (@नाम / यूसी...) या पूरा यूआरएल दर्ज करें जिसे आप स्वतः पसंद करना चाहते हैं।\nबाहर निकलने के लिए \"रद्द करें\" दबाएँ।",
     "add_auto_like_channel_invalid_id": "दर्ज किया गया उपयोगकर्ता आईडी अमान्य है।\nकृपया सुनिश्चित करें कि आपने पूरा चैनल यूआरएल कॉपी किया है! इसमें \"चैनल/UC...\" या \"/@...\" जैसा भाग होना चाहिए",
     "add_auto_like_channel_already_exists_prompt_new_name": "उस चैनल का नाम पहले से ही सूची में है।\nक्या आप नाम बदलना चाहते हैं?",
@@ -186,8 +187,8 @@
     "vote_ratio_green_red": "हरा और लाल",
     "vote_ratio_blue_gray": "नीला और ग्रे",
 
-    "votes_format_short": "लघु: %1",
-    "votes_format_long": "दीर्घ: %1",
+    "votes_format_short": "छोटा",
+    "votes_format_long": "लंबा",
 
     "unit_entries-1": "विषय",
     "unit_entries-n": "विषय",
@@ -252,7 +253,7 @@
     "feature_desc_fixHdrIssues": "एचडीआर-संगत जीपीयू और मॉनिटर का उपयोग करते समय कुछ रेंडरिंग समस्याओं को रोकें",
     "feature_desc_showVotes": "वर्तमान गाने पर लाइक और नापसंद की संख्या दिखाएं",
     "feature_helptext_showVotes": "यह सुविधा Return YouTube Dislike द्वारा संचालित है और वर्तमान गाने पर लाइक और नापसंद की लगभग संख्या दिखाएगी।",
-    "feature_desc_numbersFormat": "लाइक और नापसंद को कैसे स्वरूपित किया जाना चाहिए?",
+    "feature_desc_numbersFormat": "संख्याएँ कैसे स्वरूपित की जाएं?",
 
     "feature_desc_volumeSliderLabel": "वॉल्यूम स्लाइडर के पास एक प्रतिशत लेबल जोड़ें",
     "feature_desc_volumeSliderSize": "वॉल्यूम स्लाइडर की चौड़ाई पिक्सेल में",

assets/translations/ja_JA.json

@@ -154,6 +154,7 @@
     "auto_like": "自動的に好き",
     "auto_like_button_tooltip_enabled": "クリックして自動的に好きにするのを無効にします。シフトクリックで管理ダイアログを開きます。",
     "auto_like_button_tooltip_disabled": "クリックして自動的に好きにするのを有効にします。シフトクリックで管理ダイアログを開きます。",
+    "auto_like_channel_toggle_tooltip": "チャンネル %1 の自動的に好きにするを切り替える",
     "add_auto_like_channel_id_prompt": "自動的に好きなチャンネルのユーザー ID（@名前 / UC...）またはフル URL を入力してください。\n「キャンセル」を押して終了します。",
     "add_auto_like_channel_invalid_id": "入力されたユーザー ID が無効です。\nチャンネル URL 全体をコピーしたことを確認してください！「channel/UC...」または「/@...」のような部分が含まれている必要があります。",
     "add_auto_like_channel_already_exists_prompt_new_name": "その ID のチャンネルはすでにリストにあります。\n名前を変更しますか？",
@@ -186,8 +187,8 @@
     "vote_ratio_green_red": "緑と赤",
     "vote_ratio_blue_gray": "青と灰色",
 
-    "votes_format_short": "短い: %1",
-    "votes_format_long": "完全: %1",
+    "votes_format_short": "短い",
+    "votes_format_long": "長い",
 
     "unit_entries-1": "項目",
     "unit_entries-n": "項目",
@@ -251,7 +252,7 @@
     "feature_desc_fixHdrIssues": "HDR 互換 GPU とモニターを使用しているときの一部のレンダリング問題を防止する",
     "feature_desc_showVotes": "現在再生中の曲のいいねと嫌いの数を表示する",
     "feature_helptext_showVotes": "この機能は Return YouTube Dislike によって提供され、現在再生中の曲のいいねと嫌いの数をおおよその数で表示します。",
-    "feature_desc_numbersFormat": "いいねと嫌いの数をどのようにフォーマットするか",
+    "feature_desc_numbersFormat": "数字のフォーマット方法",
 
     "feature_desc_volumeSliderLabel": "音量スライダーの横にパーセンテージラベルを追加する",
     "feature_desc_volumeSliderSize": "音量スライダーの幅（ピクセル単位）",

assets/translations/pt_BR.json

@@ -154,6 +154,7 @@
     "auto_like": "Auto-curtir",
     "auto_like_button_tooltip_enabled": "Clique para desativar o auto-curtir. Shift-clique para abrir o diálogo de gerenciamento.",
     "auto_like_button_tooltip_disabled": "Clique para ativar o auto-curtir. Shift-clique para abrir o diálogo de gerenciamento.",
+    "auto_like_channel_toggle_tooltip": "Alternar auto-curtir para o canal %1",
     "add_auto_like_channel_id_prompt": "Digite o ID do usuário (@Nome / UC...) ou a URL completa do canal que você deseja auto-curtir.\nPressione \"cancelar\" para sair.",
     "add_auto_like_channel_invalid_id": "O ID do usuário inserido é inválido.\nCertifique-se de copiar a URL do canal inteira! Deve conter uma parte como \"channel/UC...\" ou \"/@...\"",
     "add_auto_like_channel_already_exists_prompt_new_name": "Um canal com esse ID já está na lista.\nVocê deseja alterar o nome?",
@@ -186,8 +187,8 @@
     "vote_ratio_green_red": "Verde e vermelho",
     "vote_ratio_blue_gray": "Azul e cinza",
 
-    "votes_format_short": "Curto: %1",
-    "votes_format_long": "Completo: %1",
+    "votes_format_short": "Curto",
+    "votes_format_long": "Longo",
 
     "unit_entries-1": "entrada",
     "unit_entries-n": "entradas",
@@ -252,7 +253,7 @@
     "feature_desc_fixHdrIssues": "Corrigir problemas de renderização ao usar um GPU e monitor compatíveis com HDR",
     "feature_desc_showVotes": "Mostrar a quantidade de curtidas e descurtidas na música que está tocando atualmente",
     "feature_helptext_showVotes": "Este recurso é alimentado pelo Return YouTube Dislike e mostrará a quantidade aproximada de curtidas e descurtidas na música que está tocando atualmente.",
-    "feature_desc_numbersFormat": "Como as curtidas e descurtidas devem ser formatadas?",
+    "feature_desc_numbersFormat": "Como os números devem ser formatados?",
 
     "feature_desc_volumeSliderLabel": "Adicionar um rótulo de porcentagem ao lado do controle de volume",
     "feature_desc_volumeSliderSize": "A largura do controle deslizante de volume em pixels",

assets/translations/zh_CN.json

@@ -154,6 +154,7 @@
     "auto_like": "自动喜欢",
     "auto_like_button_tooltip_enabled": "点击以禁用自动喜欢。Shift + 单击以打开管理对话框。",
     "auto_like_button_tooltip_disabled": "点击以启用自动喜欢。Shift + 单击以打开管理对话框。",
+    "auto_like_channel_toggle_tooltip": "切换频道 %1 的自动喜欢",
     "add_auto_like_channel_id_prompt": "输入您要自动喜欢的频道的用户 ID（@Name / UC...）或完整 URL。\n按“取消”退出。",
     "add_auto_like_channel_invalid_id": "输入的用户 ID 无效。\n请确保您复制了整个频道 URL！它应该包含类似于“channel/UC...”或“/@...”的部分",
     "add_auto_like_channel_already_exists_prompt_new_name": "列表中已经存在具有该 ID 的频道。\n您是否要更改名称？",
@@ -186,8 +187,8 @@
     "vote_ratio_green_red": "绿色和红色",
     "vote_ratio_blue_gray": "蓝色和灰色",
 
-    "votes_format_short": "简短：%1",
-    "votes_format_long": "完整：%1",
+    "votes_format_short": "短",
+    "votes_format_long": "长",
 
     "unit_entries-1": "条记录",
     "unit_entries-n": "条记录",
@@ -252,7 +253,7 @@
     "feature_desc_fixHdrIssues": "在 HDR 兼容的 GPU 和显示器上防止一些渲染问题",
     "feature_desc_showVotes": "显示当前播放的歌曲的喜欢和不喜欢的数量",
     "feature_helptext_showVotes": "此功能由 Return YouTube Dislike 提供支持，将显示当前播放的歌曲的大致喜欢和不喜欢的数量。",
-    "feature_desc_numbersFormat": "喜欢和不喜欢应该如何格式化？",
+    "feature_desc_numbersFormat": "数字应该如何格式化？",
 
     "feature_desc_volumeSliderLabel": "在音量滑块旁边添加百分比标签",
     "feature_desc_volumeSliderSize": "音量滑块的宽度（像素）",

src/components/hotkeyInput.ts

@@ -74,6 +74,7 @@ export function createHotkeyInput({ initialValue, onChange, createTitle }: Hotke
     inputElem.innerText = initialValue!.code;
     setInnerHtml(infoElem, getHotkeyInfoHtml(initialValue!));
     resetElem.classList.add("bytm-hidden");
+    inputElem.ariaLabel = inputElem.title = createTitle(hotkeyToString(initialValue));
   };
 
   onInteraction(resetElem, resetClicked);

src/dialogs/autoLike.ts

@@ -204,6 +204,7 @@ async function renderBody() {
       onChange: (en) => setChannelEnabled(chanId, en),
     });
     toggleElem.classList.add("bytm-auto-like-channel-toggle");
+    toggleElem.title = toggleElem.ariaLabel = t("auto_like_channel_toggle_tooltip", chanName);
 
     const btnCont = document.createElement("div");
     btnCont.classList.add("bytm-auto-like-channel-row-btn-cont");

src/dialogs/prompt.ts

@@ -88,6 +88,7 @@ class PromptDialog extends BytmDialog {
     const messageElem = document.createElement("p");
     messageElem.id = "bytm-prompt-dialog-message";
     messageElem.role = "alert";
+    messageElem.ariaLive = "polite";
     messageElem.tabIndex = 0;
     messageElem.textContent = String(message);
     upperContElem.appendChild(messageElem);

src/menu/menu_old.ts

@@ -693,7 +693,7 @@ async function mountCfgMenu() {
 
               (customInputEl as HTMLButtonElement).disabled = true;
               customInputEl!.classList.add("bytm-busy");
-              customInputEl!.textContent = customInputEl!.ariaLabel = customInputEl!.title = hasKey(`feature_btn_${featKey}_running`) ? t(`feature_btn_${featKey}_running`) : t("trigger_btn_action_running");
+              customInputEl!.textContent = hasKey(`feature_btn_${featKey}_running`) ? t(`feature_btn_${featKey}_running`) : t("trigger_btn_action_running");
 
               if(res instanceof Promise)
                 await res;
@@ -701,7 +701,7 @@ async function mountCfgMenu() {
               const finalize = () => {
                 (customInputEl as HTMLButtonElement).disabled = false;
                 customInputEl!.classList.remove("bytm-busy");
-                customInputEl!.textContent = customInputEl!.ariaLabel = customInputEl!.title = hasKey(`feature_btn_${featKey}`) ? t(`feature_btn_${featKey}`) : t("trigger_btn_action");
+                customInputEl!.textContent = hasKey(`feature_btn_${featKey}`) ? t(`feature_btn_${featKey}`) : t("trigger_btn_action");
               };
 
               // artificial timeout ftw