admin/WhatIDo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(chat): валидная разметка карточки диалога и доступ с клавиатуры

Browse Source 
Карточка треда была вложенными <button>, поэтому кнопки действий внутри
неё ломали HTML-структуру. Заменена на <div role="button" tabindex="0">
с обработкой Enter/Space; классы действий переименованы в
chat-thread-act / chat-thread-act-danger, чтобы не путаться с .chat-act.

Также ужата шапка списка диалогов: заголовок не сжимается, кнопки
не переносятся, подпись у кнопки скрытых заменена на бейдж.
This commit is contained in:
dev
2026-10-05 20:02:03 +03:00
parent 7d282d4f3d
commit 62239a35a4
4 changed files with 25 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/chat.js
+13 -5
View File
@@ -70,13 +70,13 @@ function chatThreadCardHtml(t) {
const hidden = t.deleted_at ? ' is-hidden' : '';
const acts = isAdmin() ? (t.deleted_at
? `<span class="chat-thread-acts">
<button type="button" class="chat-act" data-thread-restore="${t.id}" title="Вернуть диалог в список"><i data-lucide="archive-restore"></i></button>
<button type="button" class="chat-act chat-act-danger" data-thread-purge="${t.id}" title="Удалить диалог безвозвратно"><i data-lucide="trash-2"></i></button>
<button type="button" class="chat-thread-act" data-thread-restore="${t.id}" title="Вернуть диалог в список"><i data-lucide="archive-restore"></i></button>
<button type="button" class="chat-thread-act chat-thread-act-danger" data-thread-purge="${t.id}" title="Удалить диалог безвозвратно"><i data-lucide="trash-2"></i></button>
</span>`
: `<span class="chat-thread-acts">
<button type="button" class="chat-act" data-thread-hide="${t.id}" title="Скрыть диалог"><i data-lucide="archive"></i></button>
<button type="button" class="chat-thread-act" data-thread-hide="${t.id}" title="Скрыть диалог"><i data-lucide="archive"></i></button>
</span>`) : '';
return `<button type="button" class="chat-thread${active}${hidden}${unread ? ' unread' : ''}" data-thread="${t.id}">
return `<div class="chat-thread${active}${hidden}${unread ? ' unread' : ''}" data-thread="${t.id}" role="button" tabindex="0">
<span class="chat-thread-avatar">${esc((t.tutor_name || '?').slice(0, 1).toUpperCase())}</span>
<span class="chat-thread-body">
<span class="chat-thread-top">
@@ -90,7 +90,7 @@ function chatThreadCardHtml(t) {
</span>
${unread ? `<span class="chat-thread-badge">${unread > 99 ? '99+' : unread}</span>` : ''}
${acts}
</button>`;
</div>`;
}
function renderChatThreads() {
@@ -708,6 +708,14 @@ function initChatPage() {
if (!btn) return;
selectChatThread(Number(btn.dataset.thread));
});
list.addEventListener('keydown', e => {
if (e.key !== 'Enter' && e.key !== ' ') return;
if (e.target.closest('[data-thread-hide],[data-thread-restore],[data-thread-purge]')) return;
const card = e.target.closest('.chat-thread[data-thread]');
if (!card || e.target !== card) return;
e.preventDefault();
selectChatThread(Number(card.dataset.thread));
});
}
if (attachBox) {
attachBox.addEventListener('click', e => {