chuijs 4.0.2 → 4.0.4

package/framework/modules/chui_a11y/chui_a11y.js

@@ -14,44 +14,50 @@
  * (popup_button_ok и подобным) tabindex выставляет вызывающий компонент.
  */
 const FOCUSABLE_SELECTOR = [
-    'a[href]',
-    'button:not([disabled])',
-    'input:not([disabled])',
-    'select:not([disabled])',
-    'textarea:not([disabled])',
+    "a[href]",
+    "button:not([disabled])",
+    "input:not([disabled])",
+    "select:not([disabled])",
+    "textarea:not([disabled])",
     '[contenteditable="true"]',
     '[tabindex]:not([tabindex="-1"])',
-].join(', ');
+].join(", ");
 
 class OverlayA11y {
     // Стек открытых слоёв: нужен, чтобы вложенный слой не снимал фон-инерт у родителя
     static #stack = [];
-    static #labelled_counter = 0;
+    static #labelledCounter = 0;
 
     #element = undefined;
     #role = "dialog";
     #label = undefined;
-    #label_node = undefined;
-    #described_by = undefined;
-    #on_escape = undefined;
-    #previous_focus = undefined;
-    #is_open = false;
-
-    constructor(element, options = {
-        role: String(), label: String(), labelNode: undefined, describedBy: undefined,
-        onEscape: undefined,
-    }) {
+    #labelNode = undefined;
+    #describedBy = undefined;
+    #onEscape = undefined;
+    #previousFocus = undefined;
+    #isOpen = false;
+
+    constructor(
+        element,
+        options = {
+            role: String(),
+            label: String(),
+            labelNode: undefined,
+            describedBy: undefined,
+            onEscape: undefined,
+        }
+    ) {
         this.#element = element;
         if (options.role !== undefined) this.#role = options.role;
         this.#label = options.label;
-        this.#label_node = options.labelNode;
-        this.#described_by = options.describedBy;
-        this.#on_escape = options.onEscape;
+        this.#labelNode = options.labelNode;
+        this.#describedBy = options.describedBy;
+        this.#onEscape = options.onEscape;
         this.#applyAria();
     }
 
     get isOpen() {
-        return this.#is_open;
+        return this.#isOpen;
     }
 
     setLabel(text = String()) {
@@ -60,18 +66,18 @@ class OverlayA11y {
     }
 
     open() {
-        if (this.#is_open) return;
-        this.#is_open = true;
+        if (this.#isOpen) return;
+        this.#isOpen = true;
         OverlayA11y.#stack.push(this);
-        this.#previous_focus = document.activeElement;
+        this.#previousFocus = document.activeElement;
         OverlayA11y.#applyInert();
         document.addEventListener("keydown", this.#keydownEvent, true);
         this.#focusFirst();
     }
 
     close() {
-        if (!this.#is_open) return;
-        this.#is_open = false;
+        if (!this.#isOpen) return;
+        this.#isOpen = false;
         const index = OverlayA11y.#stack.indexOf(this);
         if (index !== -1) OverlayA11y.#stack.splice(index, 1);
         document.removeEventListener("keydown", this.#keydownEvent, true);
@@ -83,21 +89,21 @@ class OverlayA11y {
         const element = this.#element;
         element.setAttribute("role", this.#role);
         element.setAttribute("aria-modal", "true");
-        if (this.#label_node !== undefined) {
-            element.setAttribute("aria-labelledby", OverlayA11y.#ensureId(this.#label_node));
+        if (this.#labelNode !== undefined) {
+            element.setAttribute("aria-labelledby", OverlayA11y.#ensureId(this.#labelNode));
             element.removeAttribute("aria-label");
         } else if (this.#label !== undefined) {
             element.setAttribute("aria-label", this.#label);
         }
-        if (this.#described_by !== undefined) {
-            element.setAttribute("aria-describedby", OverlayA11y.#ensureId(this.#described_by));
+        if (this.#describedBy !== undefined) {
+            element.setAttribute("aria-describedby", OverlayA11y.#ensureId(this.#describedBy));
         }
     }
 
     static #ensureId(element) {
         if (element.id === undefined || element.id === "") {
-            OverlayA11y.#labelled_counter += 1;
-            element.id = "chui_a11y_node_" + OverlayA11y.#labelled_counter;
+            OverlayA11y.#labelledCounter += 1;
+            element.id = "chui_a11y_node_" + OverlayA11y.#labelledCounter;
         }
         return element.id;
     }
@@ -125,8 +131,9 @@ class OverlayA11y {
     }
 
     #focusables() {
-        return [...this.#element.querySelectorAll(FOCUSABLE_SELECTOR)]
-            .filter(element => element.offsetWidth > 0 || element.offsetHeight > 0 || element === document.activeElement);
+        return [...this.#element.querySelectorAll(FOCUSABLE_SELECTOR)].filter(
+            (element) => element.offsetWidth > 0 || element.offsetHeight > 0 || element === document.activeElement
+        );
     }
 
     #focusFirst() {
@@ -139,8 +146,8 @@ class OverlayA11y {
     }
 
     #restoreFocus() {
-        const previous = this.#previous_focus;
-        this.#previous_focus = undefined;
+        const previous = this.#previousFocus;
+        this.#previousFocus = undefined;
         if (previous !== undefined && previous !== null && document.body.contains(previous)) previous.focus();
     }
 
@@ -170,12 +177,12 @@ class OverlayA11y {
         if (event.key === "Escape") {
             event.preventDefault();
             event.stopPropagation();
-            if (this.#on_escape !== undefined) this.#on_escape();
+            if (this.#onEscape !== undefined) this.#onEscape();
             else this.close();
             return;
         }
         if (event.key === "Tab") this.#trapFocus(event);
-    }
+    };
 }
 
 /**
@@ -194,16 +201,22 @@ function makeKeyboardButton(element, role = "button") {
     return element;
 }
 
-exports.OverlayA11y = OverlayA11y
-exports.makeKeyboardButton = makeKeyboardButton
-exports.A11Y_FOCUSABLE_SELECTOR = FOCUSABLE_SELECTOR
+exports.OverlayA11y = OverlayA11y;
+exports.makeKeyboardButton = makeKeyboardButton;
+exports.A11Y_FOCUSABLE_SELECTOR = FOCUSABLE_SELECTOR;
 
 // Подсветка активного пункта меню/опции, когда фокус остаётся на поле ввода
 const ACTIVE_CLASS = "chui_a11y_active";
 
-const isVisible = (element) => element.offsetWidth > 0 || element.offsetHeight > 0 || element === document.activeElement;
-const isDisabled = (element) => element.disabled === true || element.getAttribute("aria-disabled") === "true" ||
-    (element.className !== undefined && String(element.className).split(" ").some(name => name.endsWith("_disabled")));
+const isVisible = (element) =>
+    element.offsetWidth > 0 || element.offsetHeight > 0 || element === document.activeElement;
+const isDisabled = (element) =>
+    element.disabled === true ||
+    element.getAttribute("aria-disabled") === "true" ||
+    (element.className !== undefined &&
+        String(element.className)
+            .split(" ")
+            .some((name) => name.endsWith("_disabled")));
 
 /**
  * Клавиатура для всплывающих меню (ContextMenu, MenuBar, меню шапки).
@@ -213,30 +226,37 @@ const isDisabled = (element) => element.disabled === true || element.getAttribut
  */
 class MenuKeyboard {
     #container = undefined;
-    #item_selector = undefined;
+    #itemSelector = undefined;
     #role = "menu";
-    #item_role = "menuitem";
-    #submenu_selector = undefined;
-    #on_submenu_open = undefined;
-    #is_submenu = false;
-    #type_buffer = "";
-    #type_at = 0;
-    #on_escape = undefined;
+    #itemRole = "menuitem";
+    #submenuSelector = undefined;
+    #onSubmenuOpen = undefined;
+    #isSubmenu = false;
+    #typeBuffer = "";
+    #typeAt = 0;
+    #onEscape = undefined;
     #trigger = undefined;
-    #trigger_bound = false;
-
-    constructor(container, options = {
-        role: String(), itemRole: String(), itemSelector: String(),
-        submenuSelector: String(), onEscape: undefined, trigger: undefined
-    }) {
+    #triggerBound = false;
+
+    constructor(
+        container,
+        options = {
+            role: String(),
+            itemRole: String(),
+            itemSelector: String(),
+            submenuSelector: String(),
+            onEscape: undefined,
+            trigger: undefined,
+        }
+    ) {
         this.#container = container;
         if (options.role !== undefined) this.#role = options.role;
-        if (options.itemRole !== undefined) this.#item_role = options.itemRole;
-        this.#item_selector = options.itemSelector;
-        this.#submenu_selector = options.submenuSelector;
-        this.#on_escape = options.onEscape;
-        this.#on_submenu_open = options.onSubmenuOpen;
-        this.#is_submenu = options.submenu === true;
+        if (options.itemRole !== undefined) this.#itemRole = options.itemRole;
+        this.#itemSelector = options.itemSelector;
+        this.#submenuSelector = options.submenuSelector;
+        this.#onEscape = options.onEscape;
+        this.#onSubmenuOpen = options.onSubmenuOpen;
+        this.#isSubmenu = options.submenu === true;
         this.#trigger = options.trigger;
         container.setAttribute("role", this.#role);
         this.refresh();
@@ -245,17 +265,17 @@ class MenuKeyboard {
         // содержит контейнер (строка подменю — предок своей панели), то это тот же путь события:
         // второй обработчик на предке обработал бы одну клавишу дважды — пункт подменю срабатывал бы
         // от одного Enter дважды, а одна стрелка перескакивала бы через пункт.
-        this.#trigger_bound = options.trigger !== undefined && options.trigger.contains(container) === false;
-        if (this.#trigger_bound) options.trigger.addEventListener("keydown", this.#keydownEvent);
+        this.#triggerBound = options.trigger !== undefined && options.trigger.contains(container) === false;
+        if (this.#triggerBound) options.trigger.addEventListener("keydown", this.#keydownEvent);
     }
 
     /** Перечитать пункты: роли, tabindex, состояние триггера (в том числе в закрытом меню) */
     refresh() {
         for (const item of this.#allItems()) {
-            if (item.getAttribute("role") === null) item.setAttribute("role", this.#item_role);
+            if (item.getAttribute("role") === null) item.setAttribute("role", this.#itemRole);
             if (item.getAttribute("tabindex") === null) item.setAttribute("tabindex", "-1");
             if (isDisabled(item)) item.setAttribute("aria-disabled", "true");
-            if (this.#submenu_selector !== undefined && item.querySelector(this.#submenu_selector) !== null) {
+            if (this.#submenuSelector !== undefined && item.querySelector(this.#submenuSelector) !== null) {
                 item.setAttribute("aria-haspopup", "true");
             }
         }
@@ -276,8 +296,9 @@ class MenuKeyboard {
 
     // Все пункты своего уровня (и скрытые — им тоже нужны роли и tabindex)
     #allItems() {
-        return [...this.#container.querySelectorAll(this.#item_selector)]
-            .filter(item => item.closest('[role="menu"]') === this.#container);
+        return [...this.#container.querySelectorAll(this.#itemSelector)].filter(
+            (item) => item.closest('[role="menu"]') === this.#container
+        );
     }
 
     #focusItem(index) {
@@ -290,7 +311,7 @@ class MenuKeyboard {
     }
 
     #activeIndex(items) {
-        return items.findIndex(item => item === document.activeElement || item.classList.contains(ACTIVE_CLASS));
+        return items.findIndex((item) => item === document.activeElement || item.classList.contains(ACTIVE_CLASS));
     }
 
     // Для навигации — только видимые пункты своего уровня
@@ -309,7 +330,7 @@ class MenuKeyboard {
     }
 
     #openOrClick(item) {
-        if (this.#submenu_selector !== undefined && item.querySelector(this.#submenu_selector) !== null) {
+        if (this.#submenuSelector !== undefined && item.querySelector(this.#submenuSelector) !== null) {
             this.#openSubmenu(item);
             return;
         }
@@ -317,11 +338,11 @@ class MenuKeyboard {
     }
 
     #openSubmenu(row) {
-        if (this.#submenu_selector === undefined) return;
-        const submenu = row.querySelector(this.#submenu_selector);
+        if (this.#submenuSelector === undefined) return;
+        const submenu = row.querySelector(this.#submenuSelector);
         if (submenu === null) return;
-        if (this.#on_submenu_open !== undefined) this.#on_submenu_open(row);
-        const first = [...submenu.querySelectorAll(this.#item_selector)].filter(isVisible)[0];
+        if (this.#onSubmenuOpen !== undefined) this.#onSubmenuOpen(row);
+        const first = [...submenu.querySelectorAll(this.#itemSelector)].filter(isVisible)[0];
         if (first !== undefined) first.focus();
     }
 
@@ -360,20 +381,20 @@ class MenuKeyboard {
                 break;
             }
             case "ArrowLeft": {
-                if (!this.#is_submenu) break;
+                if (!this.#isSubmenu) break;
                 event.preventDefault();
-                if (this.#on_escape !== undefined) this.#on_escape();
+                if (this.#onEscape !== undefined) this.#onEscape();
                 if (this.#trigger !== undefined && document.body.contains(this.#trigger)) this.#trigger.focus();
                 break;
             }
             case "Escape":
                 event.preventDefault();
                 event.stopPropagation();
-                if (this.#on_escape !== undefined) this.#on_escape();
+                if (this.#onEscape !== undefined) this.#onEscape();
                 if (this.#trigger !== undefined && document.body.contains(this.#trigger)) this.#trigger.focus();
                 break;
             case "Tab":
-                if (this.#on_escape !== undefined) this.#on_escape();
+                if (this.#onEscape !== undefined) this.#onEscape();
                 break;
             default:
                 // Type-ahead: набор букв переводит фокус на пункт с таким началом
@@ -382,19 +403,19 @@ class MenuKeyboard {
                 }
                 break;
         }
-    }
+    };
 
     #typeahead(char) {
         const now = Date.now();
         // Буфер сбрасывается, если с прошлой буквы прошло больше 700 мс
-        this.#type_buffer = (now - this.#type_at > 700 ? "" : this.#type_buffer) + char.toLowerCase();
-        this.#type_at = now;
+        this.#typeBuffer = (now - this.#typeAt > 700 ? "" : this.#typeBuffer) + char.toLowerCase();
+        this.#typeAt = now;
         const items = this.#items();
         if (items.length === 0) return;
         const current = this.#activeIndex(items);
         // Ищем по кругу, начиная со следующего пункта
         const ordered = current === -1 ? items : [...items.slice(current + 1), ...items.slice(0, current + 1)];
-        const match = ordered.find(item => this.#label(item).startsWith(this.#type_buffer));
+        const match = ordered.find((item) => this.#label(item).startsWith(this.#typeBuffer));
         if (match !== undefined) this.#focusItem(items.indexOf(match));
     }
 
@@ -412,7 +433,8 @@ class MenuKeyboard {
 
     destroy() {
         this.#container.removeEventListener("keydown", this.#keydownEvent);
-        if (this.#trigger !== undefined && this.#trigger_bound) this.#trigger.removeEventListener("keydown", this.#keydownEvent);
+        if (this.#trigger !== undefined && this.#triggerBound)
+            this.#trigger.removeEventListener("keydown", this.#keydownEvent);
     }
 }
 
@@ -424,21 +446,28 @@ class MenuKeyboard {
 class ComboboxKeyboard {
     #input = undefined;
     #dropdown = undefined;
-    #option_selector = undefined;
-    #on_escape = undefined;
-    #on_open = undefined;
+    #optionSelector = undefined;
+    #onEscape = undefined;
+    #onOpen = undefined;
     #active = undefined;
-    #selection_state = undefined;
-
-    constructor(input, options = {
-        dropdown: undefined, optionSelector: String(), onEscape: undefined, onOpen: undefined, selectionState: undefined
-    }) {
+    #selectionState = undefined;
+
+    constructor(
+        input,
+        options = {
+            dropdown: undefined,
+            optionSelector: String(),
+            onEscape: undefined,
+            onOpen: undefined,
+            selectionState: undefined,
+        }
+    ) {
         this.#input = input;
         this.#dropdown = options.dropdown;
-        this.#option_selector = options.optionSelector;
-        this.#on_escape = options.onEscape;
-        this.#on_open = options.onOpen;
-        this.#selection_state = options.selectionState;
+        this.#optionSelector = options.optionSelector;
+        this.#onEscape = options.onEscape;
+        this.#onOpen = options.onOpen;
+        this.#selectionState = options.selectionState;
         input.setAttribute("role", "combobox");
         input.setAttribute("aria-haspopup", "listbox");
         input.setAttribute("aria-expanded", "false");
@@ -455,7 +484,8 @@ class ComboboxKeyboard {
         // Роли и id нужны всем опциям, даже когда дропдаун ещё закрыт
         for (const option of this.#allOptions()) {
             if (option.getAttribute("role") === null) option.setAttribute("role", "option");
-            if (option.id === undefined || option.id === "") option.id = "chui_a11y_option_" + Math.random().toString(36).slice(2, 9);
+            if (option.id === undefined || option.id === "")
+                option.id = "chui_a11y_option_" + Math.random().toString(36).slice(2, 9);
         }
         this.#applyActive();
     }
@@ -473,21 +503,21 @@ class ComboboxKeyboard {
 
     #allOptions() {
         if (this.#dropdown === undefined) return [];
-        return [...this.#dropdown.querySelectorAll(this.#option_selector)];
+        return [...this.#dropdown.querySelectorAll(this.#optionSelector)];
     }
 
     #options() {
-        return this.#allOptions().filter(option => isVisible(option) && !isDisabled(option));
+        return this.#allOptions().filter((option) => isVisible(option) && !isDisabled(option));
     }
 
     #applyActive() {
         // Множественный выбор: `aria-selected` показывает выбор, а не наведение (его несёт
         // `aria-activedescendant`) — иначе пометка «под курсором» выглядела бы как отметка.
-        const has_selection = typeof this.#selection_state === "function";
+        const hasSelection = typeof this.#selectionState === "function";
         for (const option of this.#allOptions()) {
             const active = option === this.#active;
             option.classList.toggle(ACTIVE_CLASS, active);
-            const selected = has_selection ? this.#selection_state(option) === true : active;
+            const selected = hasSelection ? this.#selectionState(option) === true : active;
             option.setAttribute("aria-selected", selected ? "true" : "false");
         }
         if (this.#active === undefined) this.#input.removeAttribute("aria-activedescendant");
@@ -511,7 +541,7 @@ class ComboboxKeyboard {
             case "ArrowDown":
             case "ArrowUp": {
                 event.preventDefault();
-                if (this.#input.getAttribute("aria-expanded") !== "true" && this.#on_open !== undefined) this.#on_open();
+                if (this.#input.getAttribute("aria-expanded") !== "true" && this.#onOpen !== undefined) this.#onOpen();
                 this.#move(event.key === "ArrowDown" ? 1 : -1);
                 break;
             }
@@ -541,13 +571,13 @@ class ComboboxKeyboard {
                     this.#applyActive();
                     break;
                 }
-                if (this.#on_escape !== undefined) this.#on_escape();
+                if (this.#onEscape !== undefined) this.#onEscape();
                 break;
             }
             default:
                 break;
         }
-    }
+    };
 
     destroy() {
         this.#input.removeEventListener("keydown", this.#keydownEvent);
@@ -563,26 +593,26 @@ class ComboboxKeyboard {
  */
 class RovingKeyboard {
     #container = undefined;
-    #item_selector = undefined;
-    #on_click = undefined;
+    #itemSelector = undefined;
+    #onClick = undefined;
 
     constructor(container, options = { itemSelector: String() }) {
         this.#container = container;
-        this.#item_selector = options.itemSelector;
+        this.#itemSelector = options.itemSelector;
         this.refresh();
-        this.#on_click = (event) => {
-            const item = event.target instanceof Element ? event.target.closest(this.#item_selector) : null;
+        this.#onClick = (event) => {
+            const item = event.target instanceof Element ? event.target.closest(this.#itemSelector) : null;
             if (item === null || !this.#container.contains(item)) return;
             this.#applyStop(item);
         };
         container.addEventListener("keydown", this.#keydownEvent);
-        container.addEventListener("click", this.#on_click);
+        container.addEventListener("click", this.#onClick);
     }
 
     /** Перечитать пункты: остановка остаётся на прежнем, если он ещё доступен */
     refresh() {
         const visible = this.#items();
-        const current = visible.find(item => item.getAttribute("tabindex") === "0");
+        const current = visible.find((item) => item.getAttribute("tabindex") === "0");
         // Панель может быть ещё не в документе (размеры нулевые) — тогда остановку получает
         // первый пункт: без неё группа целиком выпала бы из обхода Tab
         const fallback = visible[0] === undefined ? this.#allItems()[0] : visible[0];
@@ -593,18 +623,18 @@ class RovingKeyboard {
 
     // Все пункты группы, включая скрытые: tabindex проставляется и до появления панели на экране
     #allItems() {
-        return [...this.#container.querySelectorAll(this.#item_selector)];
+        return [...this.#container.querySelectorAll(this.#itemSelector)];
     }
 
     // Пункты, по которым ходит клавиатура: видимые и не запрещённые
     #items() {
-        return this.#allItems().filter(item => !isDisabled(item) && isVisible(item));
+        return this.#allItems().filter((item) => !isDisabled(item) && isVisible(item));
     }
 
     #activeIndex(items) {
-        const focused = items.findIndex(item => item === document.activeElement);
+        const focused = items.findIndex((item) => item === document.activeElement);
         if (focused !== -1) return focused;
-        return items.findIndex(item => item.getAttribute("tabindex") === "0");
+        return items.findIndex((item) => item.getAttribute("tabindex") === "0");
     }
 
     #applyStop(item) {
@@ -655,14 +685,14 @@ class RovingKeyboard {
 
     destroy() {
         this.#container.removeEventListener("keydown", this.#keydownEvent);
-        this.#container.removeEventListener("click", this.#on_click);
+        this.#container.removeEventListener("click", this.#onClick);
     }
 }
 
-exports.MenuKeyboard = MenuKeyboard
-exports.ComboboxKeyboard = ComboboxKeyboard
-exports.RovingKeyboard = RovingKeyboard
-exports.A11Y_ACTIVE_CLASS = ACTIVE_CLASS
+exports.MenuKeyboard = MenuKeyboard;
+exports.ComboboxKeyboard = ComboboxKeyboard;
+exports.RovingKeyboard = RovingKeyboard;
+exports.A11Y_ACTIVE_CLASS = ACTIVE_CLASS;
 
 /**
  * Перенести фокус на следующий (или предыдущий) видимый фокусируемый элемент страницы.
@@ -670,7 +700,7 @@ exports.A11Y_ACTIVE_CLASS = ACTIVE_CLASS
  * браузер уведёт фокус в `body`, а не к следующему полю. `skip` — узел или поддерево,
  * которое в обходе не участвует (например, сам список).
  */
-function moveFocusAway(from, options = {backwards: false, skip: undefined}) {
+function moveFocusAway(from, options = { backwards: false, skip: undefined }) {
     const nodes = [...document.querySelectorAll(FOCUSABLE_SELECTOR)]
         .filter((node) => node.disabled !== true)
         .filter((node) => isVisible(node))
@@ -684,4 +714,4 @@ function moveFocusAway(from, options = {backwards: false, skip: undefined}) {
     return true;
 }
 
-exports.moveFocusAway = moveFocusAway
+exports.moveFocusAway = moveFocusAway;