From c1646270874627bdbf6e12de024764290c9b3f34 Mon Sep 17 00:00:00 2001
From: Maxim Dolgolyov <maxim.dolgolyov@gmail.com>
Date: Mon, 29 Jun 2026 20:12:37 +0300
Subject: [PATCH] =?UTF-8?q?feat(trainer):=20UX-=D0=BF=D0=B0=D1=81=D1=81=20?=
 =?UTF-8?q?2=20=E2=80=94=20=D0=BA=D0=BB=D0=B0=D0=B2=D0=B8=D0=B0=D1=82?=
 =?UTF-8?q?=D1=83=D1=80=D0=B0=20=D0=B4=D0=BB=D1=8F=20=D0=B2=D0=B0=D1=80?=
 =?UTF-8?q?=D0=B8=D0=B0=D0=BD=D1=82=D0=BE=D0=B2=20+=20=D0=B4=D0=BE=D1=81?=
 =?UTF-8?q?=D1=82=D1=83=D0=BF=D0=BD=D0=BE=D1=81=D1=82=D1=8C=20(a11y)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Клавиатура: в режиме выбора (choice/verify) клавиши 1–9 выбирают вариант;
  после ответа Enter/пробел → «Дальше» (и для текстовых задач тоже). Не мешает
  вводу в полях (input/textarea игнорируются).
- Доступность: #tr-feedback aria-live="polite" (скринридер озвучивает «Верно/
  Неверно»); кнопки-варианты получили aria-label «Вариант N: …»; #tr-choices
  role="group"; тумблеры сложности и «Текст/На чертеже» — aria-pressed; после
  ответа фокус переходит на «Дальше».

Логика проверки/ID не изменены. Inline-скрипт парсится.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/trainer.html | 29 ++++++++++++++++++++++-------
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/frontend/trainer.html b/frontend/trainer.html
index 971f14b..aebfffc 100644
--- a/frontend/trainer.html
+++ b/frontend/trainer.html
@@ -490,11 +490,11 @@
                          placeholder="ответ" aria-label="Ваш ответ"/>
                   <button class="tr-btn tr-primary" id="tr-check" type="button">Проверить</button>
                 </div>
-                <div class="tr-choices" id="tr-choices" style="display:none"></div>
+                <div class="tr-choices" id="tr-choices" role="group" aria-label="Варианты ответа" style="display:none"></div>
                 <button class="tr-btn tr-primary" id="tr-choice-next" type="button" style="display:none">Дальше</button>
                 <div class="tr-keypad" id="tr-keypad"></div>
                 <div class="tr-preview" id="tr-preview"></div>
-                <div class="tr-feedback" id="tr-feedback"></div>
+                <div class="tr-feedback" id="tr-feedback" aria-live="polite"></div>
               </div>
 
               <div id="tr-stepbox" style="display:none">
@@ -705,8 +705,8 @@
     if (!(cur && cur.figure && cur.figurePrompt)) { box.style.display = 'none'; box.innerHTML = ''; return; }
     box.style.display = '';
     box.innerHTML = '<span class="tr-fm-label">Условие</span>' +
-      '<button type="button" class="tr-fm-btn' + (!figureMode ? ' on' : '') + '" data-fm="0">Текст</button>' +
-      '<button type="button" class="tr-fm-btn' + (figureMode ? ' on' : '') + '" data-fm="1">На чертеже</button>';
+      '<button type="button" class="tr-fm-btn' + (!figureMode ? ' on' : '') + '" data-fm="0" aria-pressed="' + (!figureMode) + '">Текст</button>' +
+      '<button type="button" class="tr-fm-btn' + (figureMode ? ' on' : '') + '" data-fm="1" aria-pressed="' + figureMode + '">На чертеже</button>';
   }
 
   var topics = (TG.topics ? TG.topics() : [{ key: null, label: 'Задачи' }]).concat([{ key: 'word', label: 'Текстовые задачи', word: true }]);
@@ -906,7 +906,8 @@
     var autoLvl = (diffMode === 'auto') ? (' · ур.' + levelOf(curGen)) : '';
     el.innerHTML = '<span class="tr-diff-label">Сложность</span>' + opts.map(function (o) {
       var lbl = (o[0] === 'auto') ? ('Авто' + autoLvl) : o[1];
-      return '<button class="tr-diff-btn' + (String(diffMode) === String(o[0]) ? ' on' : '') + '" type="button" data-d="' + o[0] + '">' + lbl + '</button>';
+      var on = String(diffMode) === String(o[0]);
+      return '<button class="tr-diff-btn' + (on ? ' on' : '') + '" type="button" data-d="' + o[0] + '" aria-pressed="' + on + '">' + lbl + '</button>';
     }).join('');
   }
   // общие эффекты «задача решена» (из обычного ответа и из пошагового режима)
@@ -1036,7 +1037,8 @@
     var box = $('tr-choices'); if (!box) return;
     if (!cur || !cur.choices) { box.innerHTML = ''; return; }
     box.innerHTML = cur.choices.map(function (c, i) {
-      return '<button class="tr-choice-btn" type="button" data-ci="' + i + '">' + esc(c.label) + '</button>';
+      return '<button class="tr-choice-btn" type="button" data-ci="' + i +
+        '" aria-label="Вариант ' + (i + 1) + ': ' + esc(c.label) + '">' + esc(c.label) + '</button>';
     }).join('');
   }
   function submitChoice(idx) {
@@ -1061,7 +1063,7 @@
       recordAnswer(false); submitAttempt(false);
       revealSolution();
     }
-    var nx = $('tr-choice-next'); if (nx) nx.style.display = '';
+    var nx = $('tr-choice-next'); if (nx) { nx.style.display = ''; try { nx.focus(); } catch (e) {} }
     updateStats();
   }
   // Текст ответа в фидбеке/раскрытии — по типу задачи.
@@ -1431,6 +1433,19 @@
   });
   $('tr-choice-next').addEventListener('click', advance);
   $('tr-skip').addEventListener('click', newProblem);
+  // Клавиатура: в режиме выбора 1–9 выбирают вариант; после ответа Enter/пробел → «Дальше».
+  document.addEventListener('keydown', function (e) {
+    if (!cur) return;
+    var tag = (e.target && e.target.tagName || '').toLowerCase();
+    if (tag === 'input' || tag === 'textarea' || tag === 'select') return;   // не мешаем вводу/полям
+    var isChoice = (cur.kind === 'choice' || cur.kind === 'verify');
+    if (isChoice && !answered && cur.choices && e.key >= '1' && e.key <= '9') {
+      var idx = +e.key - 1;
+      if (idx < cur.choices.length) { e.preventDefault(); submitChoice(idx); }
+      return;
+    }
+    if (answered && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); advance(); }
+  });
   // ИИ-репетитор: после неверного ответа — разбор ошибки; иначе — наводящая подсказка.
   // Опирается на известный ответ + шаги (движок), ИИ только ОБЪЯСНЯЕТ. Недоступен ИИ → решение.
   function aiExplain() {