chuijs 4.0.2 → 4.0.3

package/framework/components/chui_modal/modal.js

@@ -1,7 +1,7 @@
-const {Animation} = require('../../modules/chui_animations/animations');
-const {OverlayA11y} = require('../../modules/chui_a11y/chui_a11y');
-const {optionOr} = require('../../modules/chui_functions');
-const {I18n} = require('../../modules/chui_i18n/chui_i18n');
+const { Animation } = require("../../modules/chui_animations/animations");
+const { OverlayA11y } = require("../../modules/chui_a11y/chui_a11y");
+const { optionOr } = require("../../modules/chui_functions");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 
 class Dialog {
     #id = require("randomstring").generate();
@@ -9,23 +9,24 @@ class Dialog {
     // Занавес под диалогом: размывает и затемняет окно. Живёт отдельным узлом в body
     // (внутри диалога его бы срезал собственный overflow), клики пропускает насквозь.
     #scrim = document.createElement(`dialog_scrim`);
-    #header = document.createElement('dialog_header');
-    #body = document.createElement('dialog_body');
-    #footer = document.createElement('dialog_footer');
+    #header = document.createElement("dialog_header");
+    #body = document.createElement("dialog_body");
+    #footer = document.createElement("dialog_footer");
     //
     #a11y = undefined;
     #outside_click_bound = false;
     isOpen = false;
 
-    constructor(options = {
-        width: String(),
-        height: String(),
-        title: String(),
-        closeOutSideClick: false
-    }) {
-
-        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_Dialogs');
-        this.#dialog.id = this.#id
+    constructor(
+        options = {
+            width: String(),
+            height: String(),
+            title: String(),
+            closeOutSideClick: false,
+        }
+    ) {
+        require("../../modules/chui_functions").setStyles(__dirname + "/styles.css", "chUiJS_Dialogs");
+        this.#dialog.id = this.#id;
         this.#scrim.setAttribute("aria-hidden", "true");
         // Занавес встаёт в body при открытии: у неоткрытого диалога в документе не остаётся
         // лишнего узла (TextEditor и витрина создают диалоги заранее — каждый оставлял занавес)
@@ -35,7 +36,7 @@ class Dialog {
         this.#a11y = new OverlayA11y(this.#dialog, {
             role: "dialog",
             label: optionOr(options.title, I18n.t("feedback.dialog")),
-            onEscape: () => this.close()
+            onEscape: () => this.close(),
         });
 
         this.#dialog.style.width = options.width === undefined ? "max-content" : options.width;
@@ -45,31 +46,31 @@ class Dialog {
             this.#dialog.addEventListener("animationend", (evt) => {
                 if (evt.animationName === "fade-in" && !this.#outside_click_bound) {
                     this.#outside_click_bound = true;
-                    window.addEventListener('click', this.#closeOutsideEvent)
+                    window.addEventListener("click", this.#closeOutsideEvent);
                 }
-            })
+            });
         }
         //ADDS
-        this.#dialog.appendChild(this.#body)
+        this.#dialog.appendChild(this.#body);
     }
 
     #closeOutsideEvent = (event) => {
         if (!this.#dialog.contains(event.target)) {
             if (this.#outside_click_bound) {
                 this.#outside_click_bound = false;
-                window.removeEventListener("click", this.#closeOutsideEvent)
+                window.removeEventListener("click", this.#closeOutsideEvent);
             }
-            this.close()
+            this.close();
         }
-    }
+    };
 
     #resizeEvent = () => {
         if (!document.contains(this.#dialog)) return;
-        this.#setCenter(this.#dialog, window)
-    }
+        this.#setCenter(this.#dialog, window);
+    };
 
     addToHeader(...components) {
-        this.#dialog.insertBefore(this.#header, this.#body)
+        this.#dialog.insertBefore(this.#header, this.#body);
         for (let component of components) this.#header.appendChild(component.set());
     }
 
@@ -78,7 +79,7 @@ class Dialog {
     }
 
     addToFooter(...components) {
-        this.#dialog.appendChild(this.#footer)
+        this.#dialog.appendChild(this.#footer);
         for (let component of components) this.#footer.appendChild(component.set());
     }
 
@@ -95,7 +96,7 @@ class Dialog {
     }
 
     open() {
-        this.isOpen = true
+        this.isOpen = true;
         // if (this.#width === "-webkit-fill-available" && this.#height === "-webkit-fill-available") {
         //     dialog.style.top = "0"
         //     dialog.style.left = "0"
@@ -106,38 +107,38 @@ class Dialog {
         //     this.#setCenter(dialog, window)
         // }
 
-        window.addEventListener("resize", this.#resizeEvent)
+        window.addEventListener("resize", this.#resizeEvent);
         // Занавес нужен только открытому слою
         if (document.body.contains(this.#scrim) === false) document.body.appendChild(this.#scrim);
         new Animation(this.#dialog).fadeIn();
         new Animation(this.#scrim).fadeIn();
-        this.#setCenter(this.#dialog, window)
-        this.#a11y.open()
+        this.#setCenter(this.#dialog, window);
+        this.#a11y.open();
     }
 
     /** Доступное имя диалога (aria-label), если заголовок в разметке не годится.
      *  Пустое значение имя не затирает — иначе слой остался бы безымянным */
     setAriaLabel(text = String()) {
         if (typeof text !== "string" || text.trim() === "") return;
-        this.#a11y.setLabel(text)
+        this.#a11y.setLabel(text);
     }
 
     openAndClose() {
         if (!this.isOpen) {
-            this.open()
+            this.open();
         } else {
-            this.close()
+            this.close();
         }
     }
 
     close() {
         if (this.#outside_click_bound) {
             this.#outside_click_bound = false;
-            window.removeEventListener("click", this.#closeOutsideEvent)
+            window.removeEventListener("click", this.#closeOutsideEvent);
         }
-        window.removeEventListener("resize", this.#resizeEvent)
-        this.isOpen = false
-        this.#a11y.close()
+        window.removeEventListener("resize", this.#resizeEvent);
+        this.isOpen = false;
+        this.#a11y.close();
         new Animation(this.#dialog).fadeOut();
         new Animation(this.#scrim).fadeOut();
     }
@@ -155,20 +156,20 @@ class Dialog {
 
     #setCenter(element, window) {
         // Ширина
-        const width = parseInt(window.getComputedStyle(element).width) + "px"
+        const width = parseInt(window.getComputedStyle(element).width) + "px";
         if (element.style.width === "-webkit-fill-available") {
-            element.style.left = "0"
+            element.style.left = "0";
         } else {
             element.style.left = `calc(100% / 2 - ${width} / 2)`;
         }
         // Высота
-        const height = parseInt(window.getComputedStyle(element).height) + "px"
+        const height = parseInt(window.getComputedStyle(element).height) + "px";
         if (element.style.height === "-webkit-fill-available") {
-            element.style.top = "0"
+            element.style.top = "0";
         } else {
             element.style.top = `calc(100% / 2 - ${height} / 2)`;
         }
     }
 }
 
-exports.Dialog = Dialog
+exports.Dialog = Dialog;

package/framework/components/chui_modal/styles.css

@@ -59,7 +59,8 @@ dialog_header .chui_button:not(:disabled):hover {
 }
 
 dialog_header .chui_button:not(:disabled):active {
-    background: var(--element_background_prime); color: var(--text_color_hover);
+    background: var(--element_background_prime);
+    color: var(--text_color_hover);
     border: none;
 }
 
@@ -91,4 +92,4 @@ dialog_footer {
     margin-top: 12px;
     padding-top: 12px;
     border-top: 1px solid var(--border_color);
-}
+}

package/framework/components/chui_notification/notification.js

@@ -1,10 +1,10 @@
-const {Animation} = require('../../modules/chui_animations/animations');
-const {setStyles, markdownToHtml, getTime, getDayKey, optionOr} = require('../../modules/chui_functions');
-const {LAYOUT_ROLE, requireLayoutNode} = require('../../modules/chui_layout/chui_layout');
-const {Icon, Icons} = require('../chui_icons/icons');
-const {I18n} = require('../../modules/chui_i18n/chui_i18n');
+const { Animation } = require("../../modules/chui_animations/animations");
+const { setStyles, markdownToHtml, getTime, getDayKey, optionOr } = require("../../modules/chui_functions");
+const { LAYOUT_ROLE, requireLayoutNode } = require("../../modules/chui_layout/chui_layout");
+const { Icon, Icons } = require("../chui_icons/icons");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
 // Плашка значка состояния — общая на всё семейство карточек уведомлений
-const {setStatusPlate} = require("./status_plate");
+const { setStatusPlate } = require("./status_plate");
 
 /**
  * Карточка уведомления в панели: значок состояния, заголовок с отметкой времени, текст,
@@ -38,7 +38,7 @@ class Notification {
     #notification_header = document.createElement("notification_header");
     #notification_title = document.createElement("notification_title");
     #notification_date = document.createElement("notification_date");
-    #notification_text = document.createElement("notification_text")
+    #notification_text = document.createElement("notification_text");
     #notification_progress = document.createElement("notification_progress");
     #notification_close = document.createElement("button");
     // Отсчёт автоскрытия: таймер, дедлайн и остаток — чтобы пауза не теряла время
@@ -47,12 +47,17 @@ class Notification {
     #remaining = 0;
     #dismissed = false;
 
-    constructor(options = {
-        title: String(), markdownTitle: String(),
-        text: String(), markdownText: String(),
-        style: undefined, showTime: Number()
-    }) {
-        setStyles(__dirname + "/styles.css", 'chUiJS_Notification');
+    constructor(
+        options = {
+            title: String(),
+            markdownTitle: String(),
+            text: String(),
+            markdownText: String(),
+            style: undefined,
+            showTime: Number(),
+        }
+    ) {
+        setStyles(__dirname + "/styles.css", "chUiJS_Notification");
         // Время показа — только настоящее число: заготовка `Number()` из описания опций
         // раньше доезжала как значение и карточка без опций исчезала мгновенно
         const show_time = Number(options.showTime);
@@ -86,10 +91,16 @@ class Notification {
         //
         const style = optionOr(options.style, undefined);
         if (style !== undefined) this.#notification.classList.add(style);
+        // Карточка появляется сама, без фокуса, поэтому о ней сообщает роль: ошибку
+        // объявляем сразу, остальное — вежливо (то же правило, что у `Toast`)
+        this.#notification.setAttribute("role", style === Notification.STYLE.ERROR ? "alert" : "status");
         // Иконка состояния — украшение: стиль читается и по тексту уведомления.
         // Цвет и глиф плашки выбирает общий помощник семейства — по ключу стиля
         this.#notification_icon.setAttribute("aria-hidden", "true");
-        setStatusPlate(this.#notification_icon, typeof style === "string" ? style.replace("notification_", "") : undefined);
+        setStatusPlate(
+            this.#notification_icon,
+            typeof style === "string" ? style.replace("notification_", "") : undefined
+        );
         // Закрытие — настоящая кнопка: доступна мышью, с клавиатуры и скринридеру
         this.#notification_close.className = "notification_close";
         this.#notification_close.type = "button";
@@ -97,14 +108,14 @@ class Notification {
         this.#notification_close.setAttribute("title", I18n.t("common.close"));
         this.#notification_close.innerHTML = new Icon(Icons.NAVIGATION.CLOSE, "16px").getHTML();
         //
-        this.#notification_header.appendChild(this.#notification_title)
-        this.#notification_header.appendChild(this.#notification_date)
+        this.#notification_header.appendChild(this.#notification_title);
+        this.#notification_header.appendChild(this.#notification_date);
         //
-        this.#notification_content.appendChild(this.#notification_header)
-        this.#notification_content.appendChild(this.#notification_text)
-        this.#notification.appendChild(this.#notification_icon)
-        this.#notification.appendChild(this.#notification_content)
-        this.#notification.appendChild(this.#notification_close)
+        this.#notification_content.appendChild(this.#notification_header);
+        this.#notification_content.appendChild(this.#notification_text);
+        this.#notification.appendChild(this.#notification_icon);
+        this.#notification.appendChild(this.#notification_content);
+        this.#notification.appendChild(this.#notification_close);
         // Полоса отсчёта нужна только тем уведомлениям, которые закрываются сами
         if (this.#time > 0) {
             this.#notification_progress.style.animationDuration = `${this.#time}ms`;
@@ -128,12 +139,17 @@ class Notification {
         panel.appendChild(this.#notification);
         new Animation(this.#notification).slideRightIn();
         // animationend прилетает и от детей (полоса отсчёта) — отсчёт запускаем только по своему
-        this.#notification.addEventListener('animationend', (event) => {
+        this.#notification.addEventListener("animationend", (event) => {
             if (event.target !== this.#notification) return;
             this.#start(this.#time);
         });
         this.#notification.addEventListener("click", () => this.dismiss());
-        if (showOnSystem) require("electron").ipcRenderer.send("show_system_notification", this.#notification_title.innerText, this.#notification_text.innerText);
+        if (showOnSystem)
+            require("electron").ipcRenderer.send(
+                "show_system_notification",
+                this.#notification_title.innerText,
+                this.#notification_text.innerText
+            );
         return this;
     }
 
@@ -196,24 +212,24 @@ class Notification {
             // инлайновые значения (в карточке их несколько — отсчёт, отклик на наведение)
             notification.style.removeProperty("animation-name");
             notification.style.removeProperty("transition");
-            notification.style.display = 'flex';
-            notification.style.width = '-webkit-fill-available';
-            notification.style.opacity = "0"
-            notification.style.transform = "translateX(100%)"
+            notification.style.display = "flex";
+            notification.style.width = "-webkit-fill-available";
+            notification.style.opacity = "0";
+            notification.style.transform = "translateX(100%)";
             // В ящике карточка — запись истории: полоса отсчёта и закрытие там лишние
             notification.classList.add("notification_in_box");
             const box = requireLayoutNode(LAYOUT_ROLE.NOTIFICATION_BOX_MAIN, notification);
             // Новые записи идут сверху: история читается от свежего к старому, и группы дней
             // (их расставляет NotificationBox) ложатся в том же порядке — «Сегодня» первой.
-            box.prepend(notification)
+            box.prepend(notification);
             setTimeout(() => {
-                notification.style.opacity = "1"
-                notification.style.transform = "translateX(0)"
-            }, 500)
-        })
+                notification.style.opacity = "1";
+                notification.style.transform = "translateX(0)";
+            }, 500);
+        });
     }
 
-    static STYLE = { ERROR: 'notification_error', SUCCESS: 'notification_success', WARNING: 'notification_warning' }
+    static STYLE = { ERROR: "notification_error", SUCCESS: "notification_success", WARNING: "notification_warning" };
 }
 
-exports.Notification = Notification
+exports.Notification = Notification;

package/framework/components/chui_notification/notification_download.js

@@ -1,9 +1,9 @@
-const {Animation} = require('../../modules/chui_animations/animations');
-const {setStyles, getTime, optionOr} = require('../../modules/chui_functions');
-const {LAYOUT_ROLE, requireLayoutNode} = require('../../modules/chui_layout/chui_layout');
-const {Icons} = require("../chui_icons/icons");
+const { Animation } = require("../../modules/chui_animations/animations");
+const { setStyles, getTime, optionOr } = require("../../modules/chui_functions");
+const { LAYOUT_ROLE, requireLayoutNode } = require("../../modules/chui_layout/chui_layout");
+const { Icons } = require("../chui_icons/icons");
 // Плашка значка — общая на всё семейство карточек уведомлений
-const {createStatusPlate, setStatusPlate} = require("./status_plate");
+const { createStatusPlate, setStatusPlate } = require("./status_plate");
 
 class DownloadNotification {
     #id = require("randomstring").generate();
@@ -16,8 +16,10 @@ class DownloadNotification {
     #download_notification_body = document.createElement("download_notification_body");
     #download_notification_text = document.createElement("download_notification_text");
     constructor(options = { title: String(), text: String(), type: String() }) {
-        setStyles(__dirname + "/styles_download.css", 'chUiJS_downloadNotification');
+        setStyles(__dirname + "/styles_download.css", "chUiJS_downloadNotification");
         this.#download_notification.id = this.#id;
+        // Ход загрузки объявляется вежливо; итог с ошибкой меняет роль в `#renderTest()`
+        this.#download_notification.setAttribute("role", "status");
         // Пустая заготовка опции равносильна отсутствующей: пустое уведомление не собирается
         const title = optionOr(options.title, undefined);
         const text = optionOr(options.text, undefined);
@@ -26,22 +28,22 @@ class DownloadNotification {
         } else {
             throw new Error("Должна быть установлена опция title");
         }
-        this.#download_notification_body.style.width = "-webkit-fill-available"
+        this.#download_notification_body.style.width = "-webkit-fill-available";
         this.#download_notification_date.innerHTML = getTime();
         if (text !== undefined) {
             this.#download_notification_text.innerText = text;
         } else {
             throw new Error("Должна быть установлена опция text");
         }
-        this.#download_notification_header.appendChild(this.#download_notification_title)
-        this.#download_notification_header.appendChild(this.#download_notification_date)
-        this.#download_notification_content.appendChild(this.#download_notification_header)
-        this.#download_notification_body.appendChild(this.#download_notification_text)
-        this.#download_notification_content.appendChild(this.#download_notification_body)
+        this.#download_notification_header.appendChild(this.#download_notification_title);
+        this.#download_notification_header.appendChild(this.#download_notification_date);
+        this.#download_notification_content.appendChild(this.#download_notification_header);
+        this.#download_notification_body.appendChild(this.#download_notification_text);
+        this.#download_notification_content.appendChild(this.#download_notification_body);
         // Значок состояния — в плашке слева, как у Notification
         this.#download_notification_icon = createStatusPlate(undefined, Icons.FILE.DOWNLOAD_FOR_OFFLINE);
-        this.#download_notification.appendChild(this.#download_notification_icon)
-        this.#download_notification.appendChild(this.#download_notification_content)
+        this.#download_notification.appendChild(this.#download_notification_icon);
+        this.#download_notification.appendChild(this.#download_notification_content);
     }
     update(title = String(), text = String()) {
         this.#download_notification_title.innerText = title;
@@ -52,7 +54,9 @@ class DownloadNotification {
         const panel = requireLayoutNode(LAYOUT_ROLE.NOTIFICATION_PANEL, this.#download_notification);
         panel.appendChild(this.#download_notification);
         new Animation(this.#download_notification).slideRightIn();
-        this.#download_notification.addEventListener("click", () => this.#hideNotification(this.#download_notification));
+        this.#download_notification.addEventListener("click", () =>
+            this.#hideNotification(this.#download_notification)
+        );
     }
     done() {
         this.#renderTest("download_notification_success", "success");
@@ -64,6 +68,8 @@ class DownloadNotification {
     #renderTest(className, status) {
         const notification = this.#download_notification;
         notification.className = className;
+        // Ошибку объявляем сразу, успех — вежливо (как у `Toast`)
+        notification.setAttribute("role", status === "error" ? "alert" : "status");
         setStatusPlate(this.#download_notification_icon, status);
         setTimeout(() => this.#hideNotification(notification), 2000);
     }
@@ -73,20 +79,20 @@ class DownloadNotification {
             // Точечный сброс следов анимации вместо стирания всего атрибута `style`
             notification.style.removeProperty("animation-name");
             notification.style.removeProperty("transition");
-            notification.style.display = 'flex';
-            notification.style.width = '-webkit-fill-available';
-            notification.style.opacity = "0"
-            notification.style.transform = "translateX(100%)"
+            notification.style.display = "flex";
+            notification.style.width = "-webkit-fill-available";
+            notification.style.opacity = "0";
+            notification.style.transform = "translateX(100%)";
             let box = requireLayoutNode(LAYOUT_ROLE.NOTIFICATION_BOX_MAIN, notification);
             // В истории запись плоская и без курсора: класс снимает стекло, тень и отклик на наведение
             notification.classList.add("notification_in_box");
-            box.appendChild(notification)
+            box.appendChild(notification);
             setTimeout(() => {
-                notification.style.opacity = "1"
-                notification.style.transform = "translateX(0)"
-            }, 500)
-        })
+                notification.style.opacity = "1";
+                notification.style.transform = "translateX(0)";
+            }, 500);
+        });
     }
 }
 
-exports.DownloadNotification = DownloadNotification
+exports.DownloadNotification = DownloadNotification;

package/framework/components/chui_notification/notification_download_progress.css

@@ -108,7 +108,8 @@ download_progress_text_block {
     margin: 0 0 4px;
 }
 
-download_progress_text, download_progress_count {
+download_progress_text,
+download_progress_count {
     font-size: var(--font_notification_size);
 }
 
@@ -137,4 +138,4 @@ download_progress_count {
 .download_progress_bar::-webkit-progress-value {
     background: var(--blue_prime_background);
     border-radius: var(--radius_pill);
-}
+}

package/framework/components/chui_notification/notification_download_progress.js

@@ -1,10 +1,10 @@
-const {Animation} = require('../../modules/chui_animations/animations');
-const {setStyles, getTime, optionOr} = require('../../modules/chui_functions');
-const {LAYOUT_ROLE, requireLayoutNode} = require('../../modules/chui_layout/chui_layout');
-const {I18n} = require('../../modules/chui_i18n/chui_i18n');
-const {Icons} = require("../chui_icons/icons");
+const { Animation } = require("../../modules/chui_animations/animations");
+const { setStyles, getTime, optionOr } = require("../../modules/chui_functions");
+const { LAYOUT_ROLE, requireLayoutNode } = require("../../modules/chui_layout/chui_layout");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
+const { Icons } = require("../chui_icons/icons");
 // Плашка значка — общая на всё семейство карточек уведомлений
-const {createStatusPlate, setStatusPlate} = require("./status_plate");
+const { createStatusPlate, setStatusPlate } = require("./status_plate");
 
 class DownloadProgressNotification {
     #id = require("randomstring").generate();
@@ -20,56 +20,58 @@ class DownloadProgressNotification {
     #id_progress = require("randomstring").generate();
     #ProgressBar = document.createElement(`progress`);
     #main = document.createElement("download_progress_block");
-    #progress_text_block = document.createElement('download_progress_text_block');
+    #progress_text_block = document.createElement("download_progress_text_block");
     #id_progress_count = require("randomstring").generate();
-    #progress_count = document.createElement('download_progress_count');
+    #progress_count = document.createElement("download_progress_count");
     #id_progress_text = require("randomstring").generate();
-    #progress_text = document.createElement('download_progress_text');
+    #progress_text = document.createElement("download_progress_text");
     constructor(options = { title: String(), text: String(), type: String() }) {
-        setStyles(__dirname + "/notification_download_progress.css", 'chUiJS_downloadProgressNotification');
+        setStyles(__dirname + "/notification_download_progress.css", "chUiJS_downloadProgressNotification");
         this.#download_notification.id = this.#id;
-        this.#download_notification_title.id = this.#id_download_notification_title
+        // Ход загрузки объявляется вежливо; итог с ошибкой меняет роль в `#renderTest()`
+        this.#download_notification.setAttribute("role", "status");
+        this.#download_notification_title.id = this.#id_download_notification_title;
         // Пустая заготовка опции равносильна отсутствующей
         if (optionOr(options.title, undefined) !== undefined) {
             this.#download_notification_title.innerText = options.title;
         } else {
             throw new Error("Должна быть установлена опция title");
         }
-        this.#download_notification_body.style.width = "-webkit-fill-available"
+        this.#download_notification_body.style.width = "-webkit-fill-available";
         this.#download_notification_date.innerHTML = getTime();
-        this.#download_notification_header.appendChild(this.#download_notification_title)
-        this.#download_notification_header.appendChild(this.#download_notification_date)
-        this.#download_notification_content.appendChild(this.#download_notification_header)
-        this.#download_notification_content.appendChild(this.#download_notification_body)
+        this.#download_notification_header.appendChild(this.#download_notification_title);
+        this.#download_notification_header.appendChild(this.#download_notification_date);
+        this.#download_notification_content.appendChild(this.#download_notification_header);
+        this.#download_notification_content.appendChild(this.#download_notification_body);
         // Значок состояния — в плашке слева, как у Notification
         this.#download_notification_icon = createStatusPlate(undefined, Icons.FILE.DOWNLOADING);
-        this.#download_notification.appendChild(this.#download_notification_icon)
-        this.#download_notification.appendChild(this.#download_notification_content)
+        this.#download_notification.appendChild(this.#download_notification_icon);
+        this.#download_notification.appendChild(this.#download_notification_content);
 
         //
         if (options.max !== undefined) this.#ProgressBar.max = options.max;
         this.#ProgressBar.id = this.#id_progress;
-        this.#ProgressBar.className = "download_progress_bar"
-        this.#progress_count.id = this.#id_progress_count
-        this.#progress_count.setAttribute('for', this.#id_progress);
-        this.#progress_text.id = this.#id_progress_text
-        this.#progress_text.setAttribute('for', this.#id_progress);
-        this.#progress_text_block.appendChild(this.#progress_text)
-        this.#progress_text_block.appendChild(this.#progress_count)
+        this.#ProgressBar.className = "download_progress_bar";
+        this.#progress_count.id = this.#id_progress_count;
+        this.#progress_count.setAttribute("for", this.#id_progress);
+        this.#progress_text.id = this.#id_progress_text;
+        this.#progress_text.setAttribute("for", this.#id_progress);
+        this.#progress_text_block.appendChild(this.#progress_text);
+        this.#progress_text_block.appendChild(this.#progress_count);
 
-        this.#main.appendChild(this.#progress_text_block)
-        this.#main.appendChild(this.#ProgressBar)
+        this.#main.appendChild(this.#progress_text_block);
+        this.#main.appendChild(this.#ProgressBar);
         //
         this.#main.style.width = "-webkit-fill-available";
         this.#progress_text.innerText = "...";
-        this.#progress_count.innerText = I18n.t("feedback.progressCount", {value: 0, max: 0})
+        this.#progress_count.innerText = I18n.t("feedback.progressCount", { value: 0, max: 0 });
         this.#ProgressBar.value = 0;
-        this.#download_notification_body.appendChild(this.#main)
+        this.#download_notification_body.appendChild(this.#main);
     }
     update(title = String(), text = String(), value = Number(), max = Number()) {
         this.#download_notification_title.innerText = title;
         this.#progress_text.innerText = text;
-        this.#progress_count.innerText = I18n.t("feedback.progressCount", {value: value, max: max})
+        this.#progress_count.innerText = I18n.t("feedback.progressCount", { value: value, max: max });
         this.#ProgressBar.value = value;
         this.#ProgressBar.max = max;
     }
@@ -77,7 +79,9 @@ class DownloadProgressNotification {
         const panel = requireLayoutNode(LAYOUT_ROLE.NOTIFICATION_PANEL, this.#download_notification);
         panel.appendChild(this.#download_notification);
         new Animation(this.#download_notification).slideRightIn();
-        this.#download_notification.addEventListener("click", () => this.#hideNotification(this.#download_notification));
+        this.#download_notification.addEventListener("click", () =>
+            this.#hideNotification(this.#download_notification)
+        );
     }
     done() {
         this.#renderTest("download_notification_success", "success");
@@ -89,6 +93,8 @@ class DownloadProgressNotification {
     #renderTest(className, status) {
         const notification = this.#download_notification;
         notification.className = className;
+        // Ошибку объявляем сразу, успех — вежливо (как у `Toast`)
+        notification.setAttribute("role", status === "error" ? "alert" : "status");
         setStatusPlate(this.#download_notification_icon, status);
         setTimeout(() => this.#hideNotification(notification), 2000);
     }
@@ -98,20 +104,20 @@ class DownloadProgressNotification {
             // Точечный сброс следов анимации вместо стирания всего атрибута `style`
             notification.style.removeProperty("animation-name");
             notification.style.removeProperty("transition");
-            notification.style.display = 'flex';
-            notification.style.width = '-webkit-fill-available';
-            notification.style.opacity = "0"
-            notification.style.transform = "translateX(100%)"
+            notification.style.display = "flex";
+            notification.style.width = "-webkit-fill-available";
+            notification.style.opacity = "0";
+            notification.style.transform = "translateX(100%)";
             let box = requireLayoutNode(LAYOUT_ROLE.NOTIFICATION_BOX_MAIN, notification);
             // В истории запись плоская и без курсора: класс снимает стекло, тень и отклик на наведение
             notification.classList.add("notification_in_box");
-            box.appendChild(notification)
+            box.appendChild(notification);
             setTimeout(() => {
-                notification.style.opacity = "1"
-                notification.style.transform = "translateX(0)"
-            }, 500)
-        })
+                notification.style.opacity = "1";
+                notification.style.transform = "translateX(0)";
+            }, 500);
+        });
     }
 }
 
-exports.DownloadProgressNotification = DownloadProgressNotification
+exports.DownloadProgressNotification = DownloadProgressNotification;