Обновить UI-кнопки и прокрутку

shine-UI/js/pages/notifications-view.js

@@ -306,8 +306,20 @@ export function render({ navigate, chrome } = {}) {
   const tabs = document.createElement('div');
   tabs.className = 'tabs';
   tabs.innerHTML = `
-    <button class="tab-btn ${state.notificationsTab === 'replies' ? 'active' : ''}" data-tab="replies">Ответы</button>
-    <button class="tab-btn ${state.notificationsTab === 'events' ? 'active' : ''}" data-tab="events">События</button>
+    <button
+      type="button"
+      class="tab-btn notification-tab-btn ${state.notificationsTab === 'replies' ? 'active' : ''}"
+      data-tab="replies"
+      data-selected="${state.notificationsTab === 'replies' ? 'true' : 'false'}"
+      aria-selected="${state.notificationsTab === 'replies' ? 'true' : 'false'}"
+    >Ответы</button>
+    <button
+      type="button"
+      class="tab-btn notification-tab-btn ${state.notificationsTab === 'events' ? 'active' : ''}"
+      data-tab="events"
+      data-selected="${state.notificationsTab === 'events' ? 'true' : 'false'}"
+      aria-selected="${state.notificationsTab === 'events' ? 'true' : 'false'}"
+    >События</button>
   `;
 
   const list = document.createElement('div');
@@ -347,13 +359,31 @@ export function render({ navigate, chrome } = {}) {
     }
   }
 
-  tabs.querySelectorAll('.tab-btn').forEach((btn) => {
+  function setActiveNotificationTab(nextTab) {
+    const normalizedTab = nextTab === 'events' ? 'events' : 'replies';
+    state.notificationsTab = normalizedTab;
+
+    tabs.querySelectorAll('.notification-tab-btn').forEach((node) => {
+      const selected = node.dataset.tab === normalizedTab;
+      node.classList.toggle('active', selected);
+      node.dataset.selected = selected ? 'true' : 'false';
+      node.setAttribute('aria-selected', selected ? 'true' : 'false');
+    });
+  }
+
+  // Активная кнопка остаётся визуально нажатой до выбора второй вкладки.
+  // При переключении класс active и aria-selected синхронно переходят на новую кнопку.
+  setActiveNotificationTab(state.notificationsTab);
+
+  tabs.querySelectorAll('.notification-tab-btn').forEach((btn) => {
     btn.addEventListener('click', () => {
-      const nextTab = String(btn.dataset.tab || 'replies');
-      if (state.notificationsTab === nextTab) return;
-      state.notificationsTab = nextTab;
-      tabs.querySelectorAll('.tab-btn').forEach((node) => node.classList.remove('active'));
-      btn.classList.add('active');
+      const nextTab = btn.dataset.tab === 'events' ? 'events' : 'replies';
+      if (state.notificationsTab === nextTab) {
+        setActiveNotificationTab(nextTab);
+        return;
+      }
+
+      setActiveNotificationTab(nextTab);
       void load();
     });
   });