From fd9b3fea7bd43d5f44f74fb7d6aed60229e6cc5d Mon Sep 17 00:00:00 2001 From: Vitalii Perehonchuk Date: Tue, 16 May 2023 13:07:29 +0300 Subject: [PATCH 01/15] translation(HTML): web/html/element/dialog --- files/uk/web/html/element/dialog/index.md | 206 ++++++++++++++++++++++ uk_spelling_additions.txt | 1 + 2 files changed, 207 insertions(+) create mode 100644 files/uk/web/html/element/dialog/index.md diff --git a/files/uk/web/html/element/dialog/index.md b/files/uk/web/html/element/dialog/index.md new file mode 100644 index 0000000000..6cecbd47c9 --- /dev/null +++ b/files/uk/web/html/element/dialog/index.md @@ -0,0 +1,206 @@ +--- +title: ": Діалоговий елемент" +slug: Web/HTML/Element/dialog +page-type: html-element +browser-compat: html.elements.dialog +--- + +{{HTMLSidebar}} + +Елемент [HTML](/uk/docs/Web/HTML) **``** представляє діалогове віконце або інший інтерактивний компонент, такий як віконце попередження, інспектор або підвікно. + +## Атрибути + +Цей елемент приймає [глобальні атрибути](/uk/docs/Web/HTML/Global_attributes). + +> **Застереження:** Атрибут `tabindex` не повинен використовуватися на елементі ``. + +- `open` + - : Позначає те, що діалог активний і з ним можна взаємодіяти. Коли атрибут `open` не задано, діалог _не повинен_ бути показаний користувачу. + Рекомендовано використовувати для візуалізації діалогів методи `.show()` або `.showModal()`, а не атрибут `open`. Якщо `` відкрито за допомогою атрибуту `open`, він буде немодальним. + +## Міркування щодо доступності + +Нативний елемент HTML `` повинен використовуватися при створенні модальних діалогів, адже він надає користь та доступність, котрі довелось би відтворити самотужки, якщо використовувати для подібних потреб інші елементи. Для візуалізації діалогів слід використовувати відповідні методи `.showModal()` і `.show()`. Якщо створюється власна реалізація діалогу, слід переконатися, що підтримується вся очікувана типова поведінка, а також дотримуватися рекомендацій щодо правильних підписів. + +При реалізації діалогу важливо подумати про найдоцільніше місце для передачі користувацького фокуса. Якщо явно позначити початкову позицію фокуса, за допомогою атрибута [autofocus](/uk/docs/Web/HTML/Global_attributes/autofocus), то це допоможе пересвідчитись, що початковий фокус заданий на елементі, що вважається найкращим місцем початкового фокуса для певного діалогу. Якщо виникають сумніви, оскільки не завжди відомо, де можна задати початковий фокус всередині діалогу, особливо для випадків, коли вміст діалогу динамічно візуалізується при його закликанні, то, якщо потрібно, розробники можуть вирішити, що сам елемент `` – найкраще місце для початкового фокуса. При використанні {{domxref("HTMLDialogElement.showModal()")}} для відкриття ``, фокус задається на першому вкладеному фокусовному елементі. + +Слід пересвідчитись, що користувачам надано механізм для закриття діалогу. Найнадійніший спосіб забезпечити можливість закриття діалогу для всіх користувачів – це додати для цього явну кнопку. Наприклад, кнопку підтвердження, скасування або закриття, якщо це відповідає ситуації. Крім того, для тих, хто використовує пристрій з клавіатурою, очікується, що модальні діалоги можна закрити за допомогою клавіші Escape. Усталено ``, викликаний методом `.showModal()`, дозволяє закриття за допомогою клавіші Escape. Немодальний діалог усталено не закривається за допомогою клавіші Escape, і, залежно від того, що він представляє, це може бути небажаним. Якщо відкрито кілька модальних діалогів, клавіша Escape повинна закривати лише діалог, показаний останнім. При використанні `` така поведінка надається браузером. + +Браузери видають елемент `` подібно до саморобних діалогів, що використовують атрибут ARIA [role="dialog"](/uk/docs/Web/Accessibility/ARIA/Roles/dialog_role). Елементи ``, закликані методом `showModal()`, неявно мають [aria-modal="true"](/uk/docs/Web/Accessibility/ARIA/Attributes/aria-modal), а елементи ``, закликані методом `show()`, як і візуалізовані з атрибутом `open` або шляхом зміни усталеного `display` елемента ``, будуть видані як `[aria-modal="false"]`. При реалізації модальних діалогів усе, крім елемента `` та його вмісту, повинно бути візуалізовано як неактивне, за допомогою атрибута [`inert`](/uk/docs/Web/HTML/Global_attributes/inert). При використанні `` вкупі з методом `HTMLDialogElement.showModal()` така поведінка надається браузером. + +## Примітки щодо застосування + +- Елементи {{HTMLElement("form")}} можуть закривати ``, якщо мають атрибут `method="dialog"`, або якщо кнопка, що використовується для подання форми, має `formmethod="dialog"`. У такому випадку стан контрольних елементів форми зберігається та не подається, `` закривається, а властивість {{domxref("HTMLDialogElement.returnValue", "returnValue")}} отримує значення `value` кнопки, що використовувалася для збереження стану форми. +- Псевдоелемент CSS {{cssxref('::backdrop')}} можна використовувати для оформлення задника, що виводиться за елементом ``, коли діалог виводиться за допомогою {{domxref("HTMLDialogElement.showModal()")}}. Наприклад, щоб затінити недоступний вміст за модальним діалогом. + +## Приклади + +### Простий приклад + +Наступний приклад візуалізує немодальний, або безмодальний, діалог. Кнопка «OK» дає змогу закрити діалог при її активації. + +```html + +

Вітання кожному та всім!

+
+ +
+ +``` + +#### Результат + +{{EmbedLiveSample("prostyi-pryklad", "100%", 200)}} + +У зв'язку з тим, що цей діалог був відкритий за допомогою атрибута `open`, він є немодальним. У цьому прикладі, коли діалог закривається, не надається жодний метод, щоб знову його відкрити. Краще відкривати діалоги за допомогою {{domxref("HTMLDialogElement.show()")}}, ніж перемикати булів атрибут `open`. + +### Поглиблений приклад + +Цей приклад відкриває модальний діалог, коли активована кнопка "Показати діалог". Цей діалог містить форму з елементом {{HTMLElement("select")}} та двома елементами {{HTMLElement("button")}}, які усталено мають `type="submit"`. Оновлення значення ` + + + + + + +

+
+ + +
+ + +

+ +

+ +``` + +#### JavaScript + +```js +const showButton = document.getElementById("showDialog"); +const favDialog = document.getElementById("favDialog"); +const outputBox = document.querySelector("output"); +const selectEl = favDialog.querySelector("select"); +const confirmBtn = favDialog.querySelector("#confirmBtn"); + +// Кнопка "Показати діалог" модально відкриває +showButton.addEventListener("click", () => { + favDialog.showModal(); +}); + +// Поле вводу "Улюблена тварина" задає значення кнопки подання +selectEl.addEventListener("change", (e) => { + confirmBtn.value = selectEl.value; +}); + +// Кнопка "Підтвердити" викликає подію "close" на діалозі – у зв'язку з [formmethod="dialog"] +favDialog.addEventListener("close", (e) => { + outputBox.value = + favDialog.returnValue === "default" + ? "Немає значення повернення." + : `Значення повернення: ${favDialog.returnValue}.`; // Необхідно перевіряти на "default", а не на порожній рядок +}); +confirmBtn.addEventListener("click", (event) => { + event.preventDefault(); // Ми не хочемо подавати цю несправжню форму + favDialog.close(selectEl.value); // Тут необхідно надіслати значення віконця вибору. +}); +``` + +### Результат + +{{EmbedLiveSample("pohlyblenyi-pryklad", "100%", 300)}} + +Цей модальний діалог може бути закритий трьома способами. Для користувачів клавіатури, модальні діалоги можуть бути закриті за допомогою клавіші Esc. У цьому прикладі, кнопка "Скасувати" закриває діалог за допомогою методу форми `dialog`, а "Надіслати" закриває діалог за допомогою методу {{domxref("HTMLDialogElement.close()")}}. +Кнопка "Скасувати" має атрибут [`formmethod="dialog"`](/uk/docs/Web/HTML/Element/input/submit#formmethod), який відкидає типове значення {{HTTPMethod("GET")}} атрибута [`method`](/uk/docs/Web/HTML/Element/form#method) елемента {{HTMLElement("form")}}. Коли метод форми – [`dialog`](#prymytky-shchodo-zastosuvannia), стан форми зберігається, а не подається, і діалог закривається. +Коли `action` немає, подання форми з усталеним методом {{HTTPMethod("GET")}} призводить до перезавантаження сторінки. Тут використовується JavaScript, щоб запобігти поданню та закрити діалог за допомогою методів {{domxref("event.preventDefault()")}} і {{domxref("HTMLDialogElement.close()")}} відповідно. + +Важливо надавати механізм закриття в кожному елементі `dialog`. Клавіша Esc усталено не закриває немодальні діалоги, і не можна виходити з того, що користувач взагалі має доступ до фізичної клавіатури (наприклад, це може бути користувач пристрою з сенсорним екраном, без доступу до клавіатури). + +## Технічний підсумок + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Категорії вмісту + + Потоковий вміст, + розділовий корінь +
Дозволений вміст + Потоковий вміст +
Пропуск тега{{no_tag_omission}}
Дозволені батьківські елементи + Всі елементи, що приймають + потоковий вміст +
Неявна роль ARIA + dialog +
Дозволені ролі ARIAalertdialog
Інтерфейс DOM{{domxref("HTMLDialogElement")}}
+ +## Специфікації + +{{Specifications}} + +## Сумісність із браузерами + +{{Compat}} + +## Дивіться також + +- Подія {{domxref("HTMLDialogElement/close_event", "close")}} +- Подія {{domxref("HTMLDialogElement/cancel_event", "cancel")}} +- [Посібник з форм HTML](/uk/docs/Learn/Forms). +- Псевдоелемент {{cssxref("::backdrop")}} +- [dialog-polyfill](https://github.com/GoogleChrome/dialog-polyfill) diff --git a/uk_spelling_additions.txt b/uk_spelling_additions.txt index 5c040fc114..6c9ff6c947 100644 --- a/uk_spelling_additions.txt +++ b/uk_spelling_additions.txt @@ -15,6 +15,7 @@ Байненс Байненса Байненса +безмодальний безрозривний безсерверні Браян From e6ff405e0fa07d2c110bb187f6d415f7de7a52bc Mon Sep 17 00:00:00 2001 From: Vitalii Perehonchuk Date: Thu, 6 Jul 2023 13:38:49 +0300 Subject: [PATCH 02/15] update(HTML): web/html/element/dialog --- files/uk/web/html/element/dialog/index.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/files/uk/web/html/element/dialog/index.md b/files/uk/web/html/element/dialog/index.md index 6cecbd47c9..1605c208f1 100644 --- a/files/uk/web/html/element/dialog/index.md +++ b/files/uk/web/html/element/dialog/index.md @@ -78,7 +78,7 @@ browser-compat: html.elements.dialog

- +
@@ -107,13 +107,14 @@ selectEl.addEventListener("change", (e) => { confirmBtn.value = selectEl.value; }); -// Кнопка "Підтвердити" викликає подію "close" на діалозі – у зв'язку з [formmethod="dialog"] +// Кнопка "Скасувати" закриває діалог без подання, у зв'язку з [formmethod="dialog"], запускаючи подію закриття. favDialog.addEventListener("close", (e) => { outputBox.value = favDialog.returnValue === "default" ? "Немає значення повернення." : `Значення повернення: ${favDialog.returnValue}.`; // Необхідно перевіряти на "default", а не на порожній рядок }); +// Не дати кнопці "підтвердження" запустити усталену поведінку подання форми, а також закрити діалог методом `close()`, що запускає подію "close". confirmBtn.addEventListener("click", (event) => { event.preventDefault(); // Ми не хочемо подавати цю несправжню форму favDialog.close(selectEl.value); // Тут необхідно надіслати значення віконця вибору. @@ -124,7 +125,7 @@ confirmBtn.addEventListener("click", (event) => { {{EmbedLiveSample("pohlyblenyi-pryklad", "100%", 300)}} -Цей модальний діалог може бути закритий трьома способами. Для користувачів клавіатури, модальні діалоги можуть бути закриті за допомогою клавіші Esc. У цьому прикладі, кнопка "Скасувати" закриває діалог за допомогою методу форми `dialog`, а "Надіслати" закриває діалог за допомогою методу {{domxref("HTMLDialogElement.close()")}}. +Цей модальний діалог може бути закритий трьома способами. Для користувачів клавіатури, модальні діалоги можуть бути закриті за допомогою клавіші Esc. У цьому прикладі, кнопка "Скасувати" закриває діалог за допомогою методу форми `dialog`, а "Підтвердити" закриває діалог за допомогою методу {{domxref("HTMLDialogElement.close()")}}. Кнопка "Скасувати" має атрибут [`formmethod="dialog"`](/uk/docs/Web/HTML/Element/input/submit#formmethod), який відкидає типове значення {{HTTPMethod("GET")}} атрибута [`method`](/uk/docs/Web/HTML/Element/form#method) елемента {{HTMLElement("form")}}. Коли метод форми – [`dialog`](#prymytky-shchodo-zastosuvannia), стан форми зберігається, а не подається, і діалог закривається. Коли `action` немає, подання форми з усталеним методом {{HTTPMethod("GET")}} призводить до перезавантаження сторінки. Тут використовується JavaScript, щоб запобігти поданню та закрити діалог за допомогою методів {{domxref("event.preventDefault()")}} і {{domxref("HTMLDialogElement.close()")}} відповідно. From 5bbe08ae419f627074391a77e1f8177b3edd3805 Mon Sep 17 00:00:00 2001 From: Vitalii Perehonchuk Date: Wed, 22 Nov 2023 18:33:36 +0200 Subject: [PATCH 03/15] update(HTML): web/html/element/dialog --- files/uk/web/html/element/dialog/index.md | 380 ++++++++++++++++++++-- 1 file changed, 352 insertions(+), 28 deletions(-) diff --git a/files/uk/web/html/element/dialog/index.md b/files/uk/web/html/element/dialog/index.md index 1605c208f1..a037411e8b 100644 --- a/files/uk/web/html/element/dialog/index.md +++ b/files/uk/web/html/element/dialog/index.md @@ -1,5 +1,5 @@ --- -title: ": Діалоговий елемент" +title: " – діалоговий елемент" slug: Web/HTML/Element/dialog page-type: html-element browser-compat: html.elements.dialog @@ -7,7 +7,11 @@ browser-compat: html.elements.dialog {{HTMLSidebar}} -Елемент [HTML](/uk/docs/Web/HTML) **``** представляє діалогове віконце або інший інтерактивний компонент, такий як віконце попередження, інспектор або підвікно. +Елемент [HTML](/uk/docs/Web/HTML) **``** представляє модальне або немодальне діалогове віконце або інший інтерактивний компонент, такий як віконце попередження, інспектор або підвікно. + +Елемент HTML `` використовується для створення як модальних, так і немодальних діалогових віконець. Модальні діалогові віконця переривають взаємодію з іншою частиною сторінки, яка стає нерухомою, тоді як немодальні діалогові віконця дозволяють взаємодію з рештою сторінки. + +Для виведення елемента `` повинен використовуватися JavaScript. Використовуйте метод {{domxref("HTMLDialogElement.showModal()", ".showModal()")}}, щоб показати модальне вікно, та метод {{domxref("HTMLDialogElement.show()", ".show()")}}, щоб показати немодальне вікно. Вікно можна закрити за допомогою методу {{domxref("HTMLDialogElement.close()", ".close()")}} або методу [`dialog`](/uk/docs/Web/HTML/Element/form#method), коли подається елемент `
`, вкладений в елемент ``. Модальні діалогові вікна також можна закрити, натиснувши клавішу Esc. ## Атрибути @@ -16,29 +20,23 @@ browser-compat: html.elements.dialog > **Застереження:** Атрибут `tabindex` не повинен використовуватися на елементі ``. - `open` - - : Позначає те, що діалог активний і з ним можна взаємодіяти. Коли атрибут `open` не задано, діалог _не повинен_ бути показаний користувачу. - Рекомендовано використовувати для візуалізації діалогів методи `.show()` або `.showModal()`, а не атрибут `open`. Якщо `` відкрито за допомогою атрибуту `open`, він буде немодальним. - -## Міркування щодо доступності -Нативний елемент HTML `` повинен використовуватися при створенні модальних діалогів, адже він надає користь та доступність, котрі довелось би відтворити самотужки, якщо використовувати для подібних потреб інші елементи. Для візуалізації діалогів слід використовувати відповідні методи `.showModal()` і `.show()`. Якщо створюється власна реалізація діалогу, слід переконатися, що підтримується вся очікувана типова поведінка, а також дотримуватися рекомендацій щодо правильних підписів. + - : Вказує на те, що діалогове віконце – активне та доступне для взаємодії. Якщо атрибут `open` не задано, то це діалогове віконце не буде видимим для користувача. + Рекомендовано використовувати для візуалізації діалогів методи `.show()` або `.showModal()`, а не атрибут `open`. Якщо `` відкрито за допомогою атрибуту `open`, то він буде немодальним. -При реалізації діалогу важливо подумати про найдоцільніше місце для передачі користувацького фокуса. Якщо явно позначити початкову позицію фокуса, за допомогою атрибута [autofocus](/uk/docs/Web/HTML/Global_attributes/autofocus), то це допоможе пересвідчитись, що початковий фокус заданий на елементі, що вважається найкращим місцем початкового фокуса для певного діалогу. Якщо виникають сумніви, оскільки не завжди відомо, де можна задати початковий фокус всередині діалогу, особливо для випадків, коли вміст діалогу динамічно візуалізується при його закликанні, то, якщо потрібно, розробники можуть вирішити, що сам елемент `` – найкраще місце для початкового фокуса. При використанні {{domxref("HTMLDialogElement.showModal()")}} для відкриття ``, фокус задається на першому вкладеному фокусовному елементі. - -Слід пересвідчитись, що користувачам надано механізм для закриття діалогу. Найнадійніший спосіб забезпечити можливість закриття діалогу для всіх користувачів – це додати для цього явну кнопку. Наприклад, кнопку підтвердження, скасування або закриття, якщо це відповідає ситуації. Крім того, для тих, хто використовує пристрій з клавіатурою, очікується, що модальні діалоги можна закрити за допомогою клавіші Escape. Усталено ``, викликаний методом `.showModal()`, дозволяє закриття за допомогою клавіші Escape. Немодальний діалог усталено не закривається за допомогою клавіші Escape, і, залежно від того, що він представляє, це може бути небажаним. Якщо відкрито кілька модальних діалогів, клавіша Escape повинна закривати лише діалог, показаний останнім. При використанні `` така поведінка надається браузером. - -Браузери видають елемент `` подібно до саморобних діалогів, що використовують атрибут ARIA [role="dialog"](/uk/docs/Web/Accessibility/ARIA/Roles/dialog_role). Елементи ``, закликані методом `showModal()`, неявно мають [aria-modal="true"](/uk/docs/Web/Accessibility/ARIA/Attributes/aria-modal), а елементи ``, закликані методом `show()`, як і візуалізовані з атрибутом `open` або шляхом зміни усталеного `display` елемента ``, будуть видані як `[aria-modal="false"]`. При реалізації модальних діалогів усе, крім елемента `` та його вмісту, повинно бути візуалізовано як неактивне, за допомогою атрибута [`inert`](/uk/docs/Web/HTML/Global_attributes/inert). При використанні `` вкупі з методом `HTMLDialogElement.showModal()` така поведінка надається браузером. + > **Примітка:** Попри те, що можна перемикатися між відкритим і закритим станами немодальних діалогових віконець шляхом перемикання наявності атрибута `open`, цей підхід не рекомендується. ## Примітки щодо застосування -- Елементи {{HTMLElement("form")}} можуть закривати ``, якщо мають атрибут `method="dialog"`, або якщо кнопка, що використовується для подання форми, має `formmethod="dialog"`. У такому випадку стан контрольних елементів форми зберігається та не подається, `` закривається, а властивість {{domxref("HTMLDialogElement.returnValue", "returnValue")}} отримує значення `value` кнопки, що використовувалася для збереження стану форми. -- Псевдоелемент CSS {{cssxref('::backdrop')}} можна використовувати для оформлення задника, що виводиться за елементом ``, коли діалог виводиться за допомогою {{domxref("HTMLDialogElement.showModal()")}}. Наприклад, щоб затінити недоступний вміст за модальним діалогом. +- Елементи {{HTMLElement("form")}} можуть використовуватися для закривання діалогового віконця, якщо мають атрибут `method="dialog"` або якщо кнопка, що використовується для подання такої форми, має [`formmethod="dialog"`](/uk/docs/Web/HTML/Element/input#formmethod). Коли `` усередині `` подається за допомогою методу `dialog`, діалогове віконце закривається, стани елементів керування форми зберігаються, але не подаються, а властивість {{domxref("HTMLDialogElement.returnValue", "returnValue")}} отримує значення кнопки, що була активована. +- Псевдоелемент CSS {{cssxref('::backdrop')}} може використовуватися для оформлення задника модального діалогу, який виводиться під елементом ``, коли цей діалог виводиться за допомогою метода {{domxref("HTMLDialogElement.showModal()")}}. Наприклад, цей елемент можна використовувати для затемнення нерухомого вмісту за модальним діалогом. +- Атрибут [`autofocus`](/uk/docs/Web/HTML/Global_attributes/autofocus) повинен бути доданий до елемента, щодо якого очікується, що користувач буде взаємодіяти з ним негайно після відкриття модального діалогу. Якщо немає елемента, що вимагає негайної взаємодії, то атрибут `autofocus` можна додати до самого елемента ``. ## Приклади -### Простий приклад +### Діалог лише з HTML -Наступний приклад візуалізує немодальний, або безмодальний, діалог. Кнопка «OK» дає змогу закрити діалог при її активації. +Цей приклад демонструє створення немодального діалогу за допомогою лише HTML. У зв'язку з присутністю на елементі `` булевого атрибута `open`, діалог відкривається при завантаженні сторінки. Його можна закрити, натиснувши кнопку "OK", оскільки атрибут `method` на елементі `` має значення `"dialog"`. У цьому випадку для закриття форми не потрібний JavaScript. ```html @@ -51,13 +49,78 @@ browser-compat: html.elements.dialog #### Результат -{{EmbedLiveSample("prostyi-pryklad", "100%", 200)}} +{{EmbedLiveSample("dialoh-lyshe-z-html", "100%", 200)}} + +> **Примітка:** Перезавантажте сторінку, щоб скинути вивід. -У зв'язку з тим, що цей діалог був відкритий за допомогою атрибута `open`, він є немодальним. У цьому прикладі, коли діалог закривається, не надається жодний метод, щоб знову його відкрити. Краще відкривати діалоги за допомогою {{domxref("HTMLDialogElement.show()")}}, ніж перемикати булів атрибут `open`. +Цей діалог зразу відкривається, завдяки присутності атрибута `open`. Діалоги, виведені за допомогою атрибута `open`, є немодальними. Коли клацнути "OK", цей діалог закривається, залишаючи фрейм Результату порожнім. Коли він закритий, вже немає методу його відкрити знову. З цієї причини, найкращим методом виведення немодальних діалогових віконець є використання методу {{domxref("HTMLDialogElement.show()")}}. Можна перемикати відображення діалогу, додаючи або видаляючи булевий атрибут `open`, але це не рекомендований підхід. -### Поглиблений приклад +### Створення модального діалогу -Цей приклад відкриває модальний діалог, коли активована кнопка "Показати діалог". Цей діалог містить форму з елементом {{HTMLElement("select")}} та двома елементами {{HTMLElement("button")}}, які усталено мають `type="submit"`. Оновлення значення ` + +

+
+ + + +
+ + +

+ +

+ +``` + +```css hidden +[type="submit"] { + margin-right: 1rem; +} +``` + +#### JavaScript + +```js +const showBtn = document.getElementById("show-dialog"); +const dialog = document.getElementById("dialog"); +const jsCloseBtn = dialog.querySelector("#js-close"); + +showBtn.addEventListener("click", () => { + dialog.showModal(); +}); + +jsCloseBtn.addEventListener("click", (e) => { + e.preventDefault(); + dialog.close(); +}); +``` + +#### Результат + +{{EmbedLiveSample("zakryttia-dialohu-z-oboviazkovym-polem-formy", "100%", 300)}} + +Судячи з результату, неможливо закрити діалог за допомогою кнопки _Закрити – нормально_. Проте його можна закрити, якщо обійти валідацію форми за допомогою атрибута `formnovalidate` на кнопці _Скасувати_. Програмно – `dialog.close()` також закриває такий діалог. + ### Анімування діалогів Елементи `` отримують `display: none;`, коли приховані, і `display: block;`, коли показані, а також вилучаються чи додаються до {{glossary("top layer", "вищого шару")}} та [дерева доступності](/uk/docs/Web/Performance/How_browsers_work#vybudovuvannia-dereva-dostupnosti). Тому для анімування елементів `` властивість {{cssxref("display")}} повинна бути придатною для анімування. [Браузери, що це підтримують](/uk/docs/Web/CSS/display#sumisnist-iz-brauzeramy), анімують `display` з варіацією на [дискретному типі анімації](/uk/docs/Web/CSS/CSS_animated_properties#dyskretni). А саме, браузер перемикається між `none` та іншим значенням `display` так, щоб анімований вміст був видимим протягом усієї тривалості анімації. From df9361f3b3435b34cfb721bab8d6c7b455c99ffd Mon Sep 17 00:00:00 2001 From: Vitalii Perehonchuk Date: Sun, 14 Jan 2024 10:52:19 +0200 Subject: [PATCH 07/15] Apply suggestions from code review Co-authored-by: Mykola Myslovskyi --- files/uk/web/html/element/dialog/index.md | 7 +++---- uk_spelling_additions.txt | 1 - 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/files/uk/web/html/element/dialog/index.md b/files/uk/web/html/element/dialog/index.md index c03631bc00..138e9e2aaf 100644 --- a/files/uk/web/html/element/dialog/index.md +++ b/files/uk/web/html/element/dialog/index.md @@ -29,7 +29,7 @@ browser-compat: html.elements.dialog ## Примітки щодо застосування - Елементи {{HTMLElement("form")}} можуть використовуватися для закривання діалогового віконця, якщо мають атрибут `method="dialog"` або якщо кнопка, що використовується для подання такої форми, має [`formmethod="dialog"`](/uk/docs/Web/HTML/Element/input#formmethod). Коли `
` усередині `` подається за допомогою методу `dialog`, діалогове віконце закривається, стани елементів керування форми зберігаються, але не подаються, а властивість {{domxref("HTMLDialogElement.returnValue", "returnValue")}} отримує значення кнопки, що була активована. -- Псевдоелемент CSS {{cssxref('::backdrop')}} може використовуватися для оформлення задника модального діалогу, який виводиться під елементом ``, коли цей діалог виводиться за допомогою метода {{domxref("HTMLDialogElement.showModal()")}}. Наприклад, цей елемент можна використовувати для затемнення нерухомого вмісту за модальним діалогом. +- Псевдоелемент CSS {{cssxref('::backdrop')}} може використовуватися для оформлення задника модального діалогу, який виводиться під елементом ``, коли цей діалог виводиться за допомогою метода {{domxref("HTMLDialogElement.showModal()")}}. Наприклад, цей елемент можна використовувати для затемнення інертного вмісту за модальним діалогом. - Атрибут [`autofocus`](/uk/docs/Web/HTML/Global_attributes/autofocus) повинен бути доданий до елемента, щодо якого очікується, що користувач буде взаємодіяти з ним негайно після відкриття модального діалогу. Якщо немає елемента, що вимагає негайної взаємодії, то атрибут `autofocus` можна додати до самого елемента ``. ## Приклади @@ -112,7 +112,7 @@ closeButton.addEventListener("click", () => { {{EmbedLiveSample("stvorennia-modalnoho-dialohu", "100%", 200)}} -Коли виводиться модальний діалог, він з'являється поверх усіх інших діалогів, що вже виведені. Все, що знаходиться поза цим модальним діалогом, стає нерухомим, а взаємодія поза діалогом блокується. Зверніть увагу, що коли діалог відкритий, то, за винятком самого діалогу, взаємодія з документом неможлива; кнопка "Показати діалог" здебільшого прихована майже непрозорим задником діалогу і є нерухомою. +Коли виводиться модальний діалог, він з'являється поверх усіх інших діалогів, що вже виведені. Все, що знаходиться поза цим модальним діалогом, стає інертним, а взаємодія поза діалогом блокується. Зверніть увагу, що коли діалог відкритий, то, за винятком самого діалогу, взаємодія з документом неможлива; кнопка "Показати діалог" здебільшого прихована майже непрозорим задником діалогу і є нерухомою. ### Обробка поверненого значення з діалогу @@ -192,7 +192,6 @@ confirmBtn.addEventListener("click", (event) => { - Шляхом подавання форми всередині діалогу за допомогою методу `dialog` (як у прикладі [діалогу лише з HTML](#dialoh-lyshe-z-html)). - Шляхом натискання клавіші Esc. -- By calling the {{domxref("HTMLDialogElement.close()")}} method (as seen in the [modal example](#creating_a_modal_dialog)). - Шляхом виклику методу {{domxref("HTMLDialogElement.close()")}} (як у прикладі [модального діалогу](#stvorennia-modalnoho-dialohu)). У цьому прикладі кнопка "Скасувати" закриває діалог за допомогою методу форми `dialog`, а кнопка "Підтвердити" закриває діалог за допомогою методу {{domxref("HTMLDialogElement.close()")}}. @@ -270,7 +269,7 @@ jsCloseBtn.addEventListener("click", (e) => { - Коли `display` анімується від `none` до `block` (чи іншого видимого значення `display`), значення перемикається на `block` на `0%` тривалості анімації, щоб воно було видимим протягом усієї анімації. - Коли `display` анімується від `block` (чи іншого видимого значення `display`) до `none`, значення перемикається на `none` на `100%` тривалості анімації, щоб воно було видимим протягом усієї анімації. -> **Примітка:** При анімуванні за допомогою [Переходів CSS](/uk/docs/Web/CSS/CSS_transitions), для ввімкнення логіки, описаної вище, необхідно задати [`transition-behavior: allow-discrete`](/uk/docs/Web/CSS/transition-behavior). Ця поведінка усталено доступна при анімуванні за допомогою [Анімацій CSS](/uk/docs/Web/CSS/CSS_animations); еквівалентний крок не потрібний. +> **Примітка:** При анімуванні за допомогою [Переходів CSS](/uk/docs/Web/CSS/CSS_transitions), для ввімкнення логіки, описаної вище, необхідно задати [`transition-behavior: allow-discrete`](/uk/docs/Web/CSS/transition-behavior). Ця поведінка усталено доступна при анімуванні за допомогою [Анімацій CSS](/uk/docs/Web/CSS/CSS_animations); іншого еквівалентного кроку не потрібно. #### Переходи елементів діалогу diff --git a/uk_spelling_additions.txt b/uk_spelling_additions.txt index 76e03cdf40..5172443b7b 100644 --- a/uk_spelling_additions.txt +++ b/uk_spelling_additions.txt @@ -19,7 +19,6 @@ багатопарадигмовий багатопарадигмовою Байненса -Байненса безмодальний безпрототипному безрозривний From 0da3a7b3f8f6204db23fba32c5183e1d3cd613be Mon Sep 17 00:00:00 2001 From: Vitalii Perehonchuk Date: Thu, 15 Feb 2024 15:26:00 +0200 Subject: [PATCH 08/15] update(HTML): web/html/element/dialog --- files/uk/web/html/element/dialog/index.md | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/files/uk/web/html/element/dialog/index.md b/files/uk/web/html/element/dialog/index.md index 138e9e2aaf..f4676e4f18 100644 --- a/files/uk/web/html/element/dialog/index.md +++ b/files/uk/web/html/element/dialog/index.md @@ -17,7 +17,7 @@ browser-compat: html.elements.dialog Цей елемент приймає [глобальні атрибути](/uk/docs/Web/HTML/Global_attributes). -> **Застереження:** Атрибут `tabindex` не повинен використовуватися на елементі ``. +> **Застереження:** Атрибут `tabindex` не повинен використовуватися на елементі ``. Дивіться [Примітки щодо застосування](#prymitky-shchodo-zastosuvannia). - `open` @@ -29,8 +29,9 @@ browser-compat: html.elements.dialog ## Примітки щодо застосування - Елементи {{HTMLElement("form")}} можуть використовуватися для закривання діалогового віконця, якщо мають атрибут `method="dialog"` або якщо кнопка, що використовується для подання такої форми, має [`formmethod="dialog"`](/uk/docs/Web/HTML/Element/input#formmethod). Коли `` усередині `` подається за допомогою методу `dialog`, діалогове віконце закривається, стани елементів керування форми зберігаються, але не подаються, а властивість {{domxref("HTMLDialogElement.returnValue", "returnValue")}} отримує значення кнопки, що була активована. -- Псевдоелемент CSS {{cssxref('::backdrop')}} може використовуватися для оформлення задника модального діалогу, який виводиться під елементом ``, коли цей діалог виводиться за допомогою метода {{domxref("HTMLDialogElement.showModal()")}}. Наприклад, цей елемент можна використовувати для затемнення інертного вмісту за модальним діалогом. -- Атрибут [`autofocus`](/uk/docs/Web/HTML/Global_attributes/autofocus) повинен бути доданий до елемента, щодо якого очікується, що користувач буде взаємодіяти з ним негайно після відкриття модального діалогу. Якщо немає елемента, що вимагає негайної взаємодії, то атрибут `autofocus` можна додати до самого елемента ``. +- Псевдоелемент CSS {{cssxref('::backdrop')}} може використовуватися для оформлення задника модального діалогу, який виводиться під елементом ``, коли цей діалог виводиться за допомогою метода {{domxref("HTMLDialogElement.showModal()")}}. Наприклад, цей псевдоелемент можна використовувати для створення розмиття, затемнення чи ще якогось варіанту затуляння інертного вмісту під модальним діалогом. +- Атрибут [`autofocus`](/uk/docs/Web/HTML/Global_attributes/autofocus) повинен бути доданий до елемента, щодо якого очікується, що користувач буде взаємодіяти з ним негайно після відкриття модального діалогу. Якщо жодний інший елемент не вимагає негайної взаємодії, то рекомендовано додати `autofocus` до кнопки закриття всередині діалогу, або самого діалогу, якщо очікується, що користувач клацне або натисне його, щоб закрити. +- Не слід додавати до елемента `` властивість `tabindex`, адже не очікується, що цей елемент може отримати фокус. Вміст діалогу, включно зі вміщеною в ньому кнопкою закриття, може отримати фокус та бути інтерактивним. ## Приклади @@ -262,7 +263,7 @@ jsCloseBtn.addEventListener("click", (e) => { ### Анімування діалогів -Елементи `` отримують `display: none;`, коли приховані, і `display: block;`, коли показані, а також вилучаються чи додаються до {{glossary("top layer", "вищого шару")}} та [дерева доступності](/uk/docs/Web/Performance/How_browsers_work#vybudovuvannia-dereva-dostupnosti). Тому для анімування елементів `` властивість {{cssxref("display")}} повинна бути придатною для анімування. [Браузери, що це підтримують](/uk/docs/Web/CSS/display#sumisnist-iz-brauzeramy), анімують `display` з варіацією на [дискретному типі анімації](/uk/docs/Web/CSS/CSS_animated_properties#dyskretni). А саме, браузер перемикається між `none` та іншим значенням `display` так, щоб анімований вміст був видимим протягом усієї тривалості анімації. +Елементи `` отримують [`display: none;`](/uk/docs/Web/CSS/display), коли приховані, і `display: block;`, коли показані, а також вилучаються чи додаються до {{glossary("top layer", "вищого шару")}} та [дерева доступності](/uk/docs/Web/Performance/How_browsers_work#vybudovuvannia-dereva-dostupnosti). Тому для анімування елементів `` властивість {{cssxref("display")}} повинна бути придатною для анімування. [Браузери, що це підтримують](/uk/docs/Web/CSS/display#sumisnist-iz-brauzeramy), анімують `display` з варіацією на [дискретному типі анімації](/uk/docs/Web/CSS/CSS_animated_properties#dyskretni). А саме, браузер перемикається між `none` та іншим значенням `display` так, щоб анімований вміст був видимим протягом усієї тривалості анімації. Отже, наприклад: @@ -337,7 +338,7 @@ dialog { /* Перехід для :backdrop, коли діалогове модальне віконце виноситься на вищий шар */ dialog::backdrop { - background-color: rgb(0 0 0 / 0); + background-color: rgb(0 0 0 / 0%); transition: display 0.7s allow-discrete, overlay 0.7s allow-discrete, @@ -347,7 +348,7 @@ dialog::backdrop { } dialog[open]::backdrop { - background-color: rgb(0 0 0 / 0.25); + background-color: rgb(0 0 0 / 25%); } /* Це правило starting-style не може бути вкладено в селектор вище, @@ -355,7 +356,7 @@ dialog[open]::backdrop { @starting-style { dialog[open]::backdrop { - background-color: rgb(0 0 0 / 0); + background-color: rgb(0 0 0 / 0%); } } ``` @@ -461,11 +462,11 @@ dialog[open]::backdrop { @keyframes backdrop-fade-in { 0% { - background-color: rgb(0 0 0 / 0); + background-color: rgb(0 0 0 / 0%); } 100% { - background-color: rgb(0 0 0 / 0.25); + background-color: rgb(0 0 0 / 25%); } } @@ -558,7 +559,7 @@ closeBtn.addEventListener("click", () => { -## Міркування щодо доступності +## Занепокоєння щодо доступності При реалізації діалогу важливо поміркувати про найкраще місце для перенесення фокуса користувача. Коли для відкриття `` використовується {{domxref("HTMLDialogElement.showModal()")}}, то фокус передається до першого вкладеного елемента, що приймає фокус. Явне задання розміщення початкового фокуса за допомогою атрибута [`autofocus`](/uk/docs/Web/HTML/Global_attributes/autofocus) допомагає забезпечити те, що початковий фокус передається до елемента, що вважається найкращим положенням початкового фокуса в кожному конкретному діалозі. Коли є сумніви, оскільки не завжди відомо, де в діалозі можна розмістити початковий фокус, особливо в тих випадках, коли вміст діалогу візуалізується динамічно при його заклику, елемент `` сам може запропонувати найкраще положення початкового фокуса. From 71ba5c39db4fa8f27299db6b3c3105b52e4b90a3 Mon Sep 17 00:00:00 2001 From: Vitalii Perehonchuk Date: Fri, 19 Jul 2024 16:47:24 +0300 Subject: [PATCH 09/15] update(HTML): web/html/element/dialog --- files/uk/web/html/element/dialog/index.md | 33 ++++++++++------------- 1 file changed, 14 insertions(+), 19 deletions(-) diff --git a/files/uk/web/html/element/dialog/index.md b/files/uk/web/html/element/dialog/index.md index f4676e4f18..3109f8e249 100644 --- a/files/uk/web/html/element/dialog/index.md +++ b/files/uk/web/html/element/dialog/index.md @@ -1,5 +1,5 @@ --- -title: " – діалоговий елемент" +title: – діалоговий елемент slug: Web/HTML/Element/dialog page-type: html-element browser-compat: html.elements.dialog @@ -33,6 +33,18 @@ browser-compat: html.elements.dialog - Атрибут [`autofocus`](/uk/docs/Web/HTML/Global_attributes/autofocus) повинен бути доданий до елемента, щодо якого очікується, що користувач буде взаємодіяти з ним негайно після відкриття модального діалогу. Якщо жодний інший елемент не вимагає негайної взаємодії, то рекомендовано додати `autofocus` до кнопки закриття всередині діалогу, або самого діалогу, якщо очікується, що користувач клацне або натисне його, щоб закрити. - Не слід додавати до елемента `` властивість `tabindex`, адже не очікується, що цей елемент може отримати фокус. Вміст діалогу, включно зі вміщеною в ньому кнопкою закриття, може отримати фокус та бути інтерактивним. +## Доступність + +При реалізації діалогу важливо поміркувати про найкраще місце для перенесення фокуса користувача. Коли для відкриття `` використовується {{domxref("HTMLDialogElement.showModal()")}}, то фокус передається до першого вкладеного елемента, що приймає фокус. Явне задання розміщення початкового фокуса за допомогою атрибута [`autofocus`](/uk/docs/Web/HTML/Global_attributes/autofocus) допомагає забезпечити те, що початковий фокус передається до елемента, що вважається найкращим положенням початкового фокуса в кожному конкретному діалозі. Коли є сумніви, оскільки не завжди відомо, де в діалозі можна розмістити початковий фокус, особливо в тих випадках, коли вміст діалогу візуалізується динамічно при його заклику, елемент `` сам може запропонувати найкраще положення початкового фокуса. + +Слід забезпечити користувачів механізмом для закриття діалогу. Найнадійніший спосіб пересвідчитись, що всі користувачі можуть закрити діалог, – це додати явну кнопку для цього, наприклад, кнопку підтвердження, скасування чи закриття. + +Усталено діалог, закликаний методом `showModal()`, може бути закритий шляхом натискання клавіші Esc. Немодальний діалог усталено не закривається клавішею Esc, і залежно від того, що він представляє, це може бути небажаним. Клавіатурні користувачі розраховують на те, що клавіша Esc закриває модальні діалоги; переконайтеся, що ця поведінка реалізована та підтримується. Якщо відкрито кілька модальних діалогів, то натискання клавіші Esc має закривати лише останній показаний діалог. Коли використовується ``, ця логіка надається браузером. + +Попри те, що діалоги можна створювати за допомогою інших елементів, нативний елемент `` надає зручність і можливості доступності, які необхідно відтворювати, якщо для подібних потреб використовуються інші елементи. Якщо створюється власна реалізація діалогу, слід пересвідчитися, що всі очікувані усталені поведінки підтримуються, а також слід дотримуватися рекомендацій щодо правильних підписів. + +Елемент `` видається браузерами у спосіб, подібний до саморобних діалогів, що використовують атрибут ARIA [role="dialog"](/uk/docs/Web/Accessibility/ARIA/Roles/dialog_role). Елементи ``, закликані методом `showModal()`, неявно мають [aria-modal="true"](/uk/docs/Web/Accessibility/ARIA/Attributes/aria-modal), а елементи ``, закликані методом `show()` або виведені за допомогою атрибута `open` або шляхом зміни усталеного `display` ``, видається як `[aria-modal="false"]`. При реалізації модальних діалогів усе, крім `` та його вмісту, повинно бути зроблено нерухомим за допомогою атрибута [`inert`](/uk/docs/Web/HTML/Global_attributes/inert). Коли використовується `` разом із методом `HTMLDialogElement.showModal()`, ця поведінка надається браузером. + ## Приклади ### Діалог лише з HTML @@ -166,11 +178,6 @@ showButton.addEventListener("click", () => { favDialog.showModal(); }); -// Поле вводу "Улюблена тварина" задає значення кнопки подання -selectEl.addEventListener("change", (e) => { - confirmBtn.value = selectEl.value; -}); - // Кнопка "Скасувати" закриває діалог без подання, у зв'язку з [formmethod="dialog"], запускаючи подію закриття. favDialog.addEventListener("close", (e) => { outputBox.value = @@ -529,7 +536,7 @@ closeBtn.addEventListener("click", () => { Пропуск тега - {{no_tag_omission}} + Жодного; як початковий, так і кінцевий теги – обов'язкові. Дозволені батьківські елементи @@ -559,18 +566,6 @@ closeBtn.addEventListener("click", () => { -## Занепокоєння щодо доступності - -При реалізації діалогу важливо поміркувати про найкраще місце для перенесення фокуса користувача. Коли для відкриття `` використовується {{domxref("HTMLDialogElement.showModal()")}}, то фокус передається до першого вкладеного елемента, що приймає фокус. Явне задання розміщення початкового фокуса за допомогою атрибута [`autofocus`](/uk/docs/Web/HTML/Global_attributes/autofocus) допомагає забезпечити те, що початковий фокус передається до елемента, що вважається найкращим положенням початкового фокуса в кожному конкретному діалозі. Коли є сумніви, оскільки не завжди відомо, де в діалозі можна розмістити початковий фокус, особливо в тих випадках, коли вміст діалогу візуалізується динамічно при його заклику, елемент `` сам може запропонувати найкраще положення початкового фокуса. - -Слід забезпечити користувачів механізмом для закриття діалогу. Найнадійніший спосіб пересвідчитись, що всі користувачі можуть закрити діалог, – це додати явну кнопку для цього, наприклад, кнопку підтвердження, скасування чи закриття. - -Усталено діалог, закликаний методом `showModal()`, може бути закритий шляхом натискання клавіші Esc. Немодальний діалог усталено не закривається клавішею Esc, і залежно від того, що він представляє, це може бути небажаним. Клавіатурні користувачі розраховують на те, що клавіша Esc закриває модальні діалоги; переконайтеся, що ця поведінка реалізована та підтримується. Якщо відкрито кілька модальних діалогів, то натискання клавіші Esc має закривати лише останній показаний діалог. Коли використовується ``, ця логіка надається браузером. - -Попри те, що діалоги можна створювати за допомогою інших елементів, нативний елемент `` надає зручність і можливості доступності, які необхідно відтворювати, якщо для подібних потреб використовуються інші елементи. Якщо створюється власна реалізація діалогу, слід пересвідчитися, що всі очікувані усталені поведінки підтримуються, а також слід дотримуватися рекомендацій щодо правильних підписів. - -Елемент `` видається браузерами у спосіб, подібний до саморобних діалогів, що використовують атрибут ARIA [role="dialog"](/uk/docs/Web/Accessibility/ARIA/Roles/dialog_role). Елементи ``, закликані методом `showModal()`, неявно мають [aria-modal="true"](/uk/docs/Web/Accessibility/ARIA/Attributes/aria-modal), а елементи ``, закликані методом `show()` або виведені за допомогою атрибута `open` або шляхом зміни усталеного `display` ``, видається як `[aria-modal="false"]`. При реалізації модальних діалогів усе, крім `` та його вмісту, повинно бути зроблено нерухомим за допомогою атрибута [`inert`](/uk/docs/Web/HTML/Global_attributes/inert). Коли використовується `` разом із методом `HTMLDialogElement.showModal()`, ця поведінка надається браузером. - ## Специфікації {{Specifications}} From 591c21ad2560cdd921d384e82a1200c235653b32 Mon Sep 17 00:00:00 2001 From: Vitalii Perehonchuk Date: Sat, 10 Aug 2024 18:48:28 +0300 Subject: [PATCH 10/15] Update files/uk/web/javascript/reference/global_objects/array/index.md --- files/uk/web/javascript/reference/global_objects/array/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/uk/web/javascript/reference/global_objects/array/index.md b/files/uk/web/javascript/reference/global_objects/array/index.md index ecfb6f5f75..12256abf92 100644 --- a/files/uk/web/javascript/reference/global_objects/array/index.md +++ b/files/uk/web/javascript/reference/global_objects/array/index.md @@ -484,7 +484,7 @@ console.log(removedItem); // Апельсин ``` -> [!NOTE] +> [!NOTE] > Метод `pop()` може застосовуватись лише для усунення з масиву останнього елемента. Як прибрати з кінця масиву кілька елементів – дивіться наступний приклад. ### Усунення з кінця масиву кількох елементів From 3058b0bb82c0624e3224881f71115a865d670af6 Mon Sep 17 00:00:00 2001 From: Vitalii Perehonchuk Date: Sun, 11 Aug 2024 10:22:37 +0300 Subject: [PATCH 11/15] update(HTML): web/html/element/dialog --- files/uk/web/html/element/dialog/index.md | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/files/uk/web/html/element/dialog/index.md b/files/uk/web/html/element/dialog/index.md index 3109f8e249..c4cb91a36c 100644 --- a/files/uk/web/html/element/dialog/index.md +++ b/files/uk/web/html/element/dialog/index.md @@ -17,14 +17,16 @@ browser-compat: html.elements.dialog Цей елемент приймає [глобальні атрибути](/uk/docs/Web/HTML/Global_attributes). -> **Застереження:** Атрибут `tabindex` не повинен використовуватися на елементі ``. Дивіться [Примітки щодо застосування](#prymitky-shchodo-zastosuvannia). +> [!WARNING] +> Атрибут `tabindex` не повинен використовуватися на елементі ``. Дивіться [Примітки щодо застосування](#prymitky-shchodo-zastosuvannia). - `open` - : Вказує на те, що діалогове віконце – активне та доступне для взаємодії. Якщо атрибут `open` не задано, то це діалогове віконце не буде видимим для користувача. Рекомендовано використовувати для візуалізації діалогів методи `.show()` або `.showModal()`, а не атрибут `open`. Якщо `` відкрито за допомогою атрибуту `open`, то він буде немодальним. - > **Примітка:** Попри те, що можна перемикатися між відкритим і закритим станами немодальних діалогових віконець шляхом перемикання наявності атрибута `open`, цей підхід не рекомендується. + > [!NOTE] + > Попри те, що можна перемикатися між відкритим і закритим станами немодальних діалогових віконець шляхом перемикання наявності атрибута `open`, цей підхід не рекомендується. ## Примітки щодо застосування @@ -64,7 +66,8 @@ browser-compat: html.elements.dialog {{EmbedLiveSample("dialoh-lyshe-z-html", "100%", 200)}} -> **Примітка:** Перезавантажте сторінку, щоб скинути вивід. +> [!NOTE] +> Перезавантажте сторінку, щоб скинути вивід. Цей діалог зразу відкривається, завдяки присутності атрибута `open`. Діалоги, виведені за допомогою атрибута `open`, є немодальними. Коли клацнути "OK", цей діалог закривається, залишаючи фрейм Результату порожнім. Коли він закритий, вже немає методу його відкрити знову. З цієї причини, найкращим методом виведення немодальних діалогових віконець є використання методу {{domxref("HTMLDialogElement.show()")}}. Можна перемикати відображення діалогу, додаючи або видаляючи булевий атрибут `open`, але це не рекомендований підхід. @@ -277,7 +280,8 @@ jsCloseBtn.addEventListener("click", (e) => { - Коли `display` анімується від `none` до `block` (чи іншого видимого значення `display`), значення перемикається на `block` на `0%` тривалості анімації, щоб воно було видимим протягом усієї анімації. - Коли `display` анімується від `block` (чи іншого видимого значення `display`) до `none`, значення перемикається на `none` на `100%` тривалості анімації, щоб воно було видимим протягом усієї анімації. -> **Примітка:** При анімуванні за допомогою [Переходів CSS](/uk/docs/Web/CSS/CSS_transitions), для ввімкнення логіки, описаної вище, необхідно задати [`transition-behavior: allow-discrete`](/uk/docs/Web/CSS/transition-behavior). Ця поведінка усталено доступна при анімуванні за допомогою [Анімацій CSS](/uk/docs/Web/CSS/CSS_animations); іншого еквівалентного кроку не потрібно. +> [!NOTE] +> При анімуванні за допомогою [Переходів CSS](/uk/docs/Web/CSS/CSS_transitions), для ввімкнення логіки, описаної вище, необхідно задати [`transition-behavior: allow-discrete`](/uk/docs/Web/CSS/transition-behavior). Ця поведінка усталено доступна при анімуванні за допомогою [Анімацій CSS](/uk/docs/Web/CSS/CSS_animations); іншого еквівалентного кроку не потрібно. #### Переходи елементів діалогу @@ -392,7 +396,8 @@ closeBtn.addEventListener("click", () => { {{EmbedLiveSample("perekhody-elementiv-dialohu", "100%", "200")}} -> **Примітка:** Оскільки елементи `` змінюють `display: none` на `display: block` щоразу, коли показуються, то `` переходять від їхніх стилів `@starting-style` до їхніх стилів `dialog[open]` щоразу, коли відбувається перехід появи. Коли `` закривається, він переходить від свого стану `dialog[open]` до усталеного стану `dialog`. +> [!NOTE] +> Оскільки елементи `` змінюють `display: none` на `display: block` щоразу, коли показуються, то `` переходять від їхніх стилів `@starting-style` до їхніх стилів `dialog[open]` щоразу, коли відбувається перехід появи. Коли `` закривається, він переходить від свого стану `dialog[open]` до усталеного стану `dialog`. > > У таких випадках переходи стилю при появі та зникненні можуть бути різними. Дивіться доказ цього в нашому прикладі [Демонстрації того, коли вживаються стартові стилі](/uk/docs/Web/CSS/@starting-style#demonstratsiia-toho-koly-vzhyvaiutsia-startovi-styli). From 76b941fce841d4c125d5c86d4560970c08adfdf3 Mon Sep 17 00:00:00 2001 From: Vitalii Perehonchuk Date: Sun, 11 Aug 2024 10:24:08 +0300 Subject: [PATCH 12/15] Update files/uk/web/javascript/reference/global_objects/array/index.md --- files/uk/web/javascript/reference/global_objects/array/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/uk/web/javascript/reference/global_objects/array/index.md b/files/uk/web/javascript/reference/global_objects/array/index.md index 5450098661..4ad363115f 100644 --- a/files/uk/web/javascript/reference/global_objects/array/index.md +++ b/files/uk/web/javascript/reference/global_objects/array/index.md @@ -484,7 +484,7 @@ console.log(removedItem); // Апельсин ``` -> [!NOTE] +> [!NOTE] > Метод `pop()` може застосовуватись лише для усунення з масиву останнього елемента. Як прибрати з кінця масиву кілька елементів – дивіться наступний приклад. ### Усунення з кінця масиву кількох елементів From 175f1a70a3955f70f20360579de4c6099a9f8e98 Mon Sep 17 00:00:00 2001 From: Vitalii Perehonchuk Date: Fri, 16 Aug 2024 16:11:38 +0300 Subject: [PATCH 13/15] Apply suggestions from code review Co-authored-by: Andrii Kurdiumov --- files/uk/web/html/element/dialog/index.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/files/uk/web/html/element/dialog/index.md b/files/uk/web/html/element/dialog/index.md index c4cb91a36c..ef99edb885 100644 --- a/files/uk/web/html/element/dialog/index.md +++ b/files/uk/web/html/element/dialog/index.md @@ -9,7 +9,7 @@ browser-compat: html.elements.dialog Елемент [HTML](/uk/docs/Web/HTML) **``** представляє модальне або немодальне діалогове віконце або інший інтерактивний компонент, такий як віконце попередження, інспектор або підвікно. -Елемент HTML `` використовується для створення як модальних, так і немодальних діалогових віконець. Модальні діалогові віконця переривають взаємодію з іншою частиною сторінки, яка стає нерухомою, тоді як немодальні діалогові віконця дозволяють взаємодію з рештою сторінки. +Елемент HTML `` використовується для створення як модальних, так і немодальних діалогових віконець. Модальні діалогові віконця переривають взаємодію з іншою частиною сторінки, яка стає інертною, тоді як немодальні діалогові віконця дозволяють взаємодію з рештою сторінки. Для виведення елемента `` повинен використовуватися JavaScript. Використовуйте метод {{domxref("HTMLDialogElement.showModal()", ".showModal()")}}, щоб показати модальне вікно, та метод {{domxref("HTMLDialogElement.show()", ".show()")}}, щоб показати немодальне вікно. Вікно можна закрити за допомогою методу {{domxref("HTMLDialogElement.close()", ".close()")}} або методу [`dialog`](/uk/docs/Web/HTML/Element/form#method), коли подається елемент ``, вкладений в елемент ``. Модальні діалогові вікна також можна закрити, натиснувши клавішу Esc. @@ -45,11 +45,11 @@ browser-compat: html.elements.dialog Попри те, що діалоги можна створювати за допомогою інших елементів, нативний елемент `` надає зручність і можливості доступності, які необхідно відтворювати, якщо для подібних потреб використовуються інші елементи. Якщо створюється власна реалізація діалогу, слід пересвідчитися, що всі очікувані усталені поведінки підтримуються, а також слід дотримуватися рекомендацій щодо правильних підписів. -Елемент `` видається браузерами у спосіб, подібний до саморобних діалогів, що використовують атрибут ARIA [role="dialog"](/uk/docs/Web/Accessibility/ARIA/Roles/dialog_role). Елементи ``, закликані методом `showModal()`, неявно мають [aria-modal="true"](/uk/docs/Web/Accessibility/ARIA/Attributes/aria-modal), а елементи ``, закликані методом `show()` або виведені за допомогою атрибута `open` або шляхом зміни усталеного `display` ``, видається як `[aria-modal="false"]`. При реалізації модальних діалогів усе, крім `` та його вмісту, повинно бути зроблено нерухомим за допомогою атрибута [`inert`](/uk/docs/Web/HTML/Global_attributes/inert). Коли використовується `` разом із методом `HTMLDialogElement.showModal()`, ця поведінка надається браузером. +Елемент `` видається браузерами у спосіб, подібний до саморобних діалогів, що використовують атрибут ARIA [role="dialog"](/uk/docs/Web/Accessibility/ARIA/Roles/dialog_role). Елементи ``, закликані методом `showModal()`, неявно мають [aria-modal="true"](/uk/docs/Web/Accessibility/ARIA/Attributes/aria-modal), а елементи ``, закликані методом `show()` або виведені за допомогою атрибута `open` або шляхом зміни усталеного `display` ``, видається як `[aria-modal="false"]`. При реалізації модальних діалогів усе, крім `` та його вмісту, повинно бути зроблено інертним за допомогою атрибута [`inert`](/uk/docs/Web/HTML/Global_attributes/inert). Коли використовується `` разом із методом `HTMLDialogElement.showModal()`, ця поведінка надається браузером. ## Приклади -### Діалог лише з HTML +### Діалог з використанням лише HTML Цей приклад демонструє створення немодального діалогу за допомогою лише HTML. У зв'язку з присутністю на елементі `` булевого атрибута `open`, діалог відкривається при завантаженні сторінки. Його можна закрити, натиснувши кнопку "OK", оскільки атрибут `method` на елементі `` має значення `"dialog"`. У цьому випадку для закриття форми не потрібний JavaScript. @@ -128,13 +128,13 @@ closeButton.addEventListener("click", () => { {{EmbedLiveSample("stvorennia-modalnoho-dialohu", "100%", 200)}} -Коли виводиться модальний діалог, він з'являється поверх усіх інших діалогів, що вже виведені. Все, що знаходиться поза цим модальним діалогом, стає інертним, а взаємодія поза діалогом блокується. Зверніть увагу, що коли діалог відкритий, то, за винятком самого діалогу, взаємодія з документом неможлива; кнопка "Показати діалог" здебільшого прихована майже непрозорим задником діалогу і є нерухомою. +Коли виводиться модальний діалог, він з'являється поверх усіх інших діалогів, що вже виведені. Все, що знаходиться поза цим модальним діалогом, стає інертним, а взаємодія поза діалогом блокується. Зверніть увагу, що коли діалог відкритий, то, за винятком самого діалогу, взаємодія з документом неможлива; кнопка "Показати діалог" здебільшого прихована майже непрозорим задником діалогу і є інертною. ### Обробка поверненого значення з діалогу -Цей приклад демонструє [`returnValue`](/uk/docs/Web/API/HTMLDialogElement/returnValue) елемента `` і те, як закрити модальний діалог за допомогою форми. Усталено `returnValue` – це порожній рядок або значення кнопки, що подала форму в елементі ``, якщо така є. +Цей приклад демонструє [`returnValue`](/uk/docs/Web/API/HTMLDialogElement/returnValue) елемента `` і те, як закрити модальний діалог за допомогою форми. Усталено, `returnValue` – це порожній рядок або значення кнопки, що подала форму в елементі ``, якщо така є. -Цей приклад відкриває модальний діалог, коли активована кнопка "Показати діалог". Цей діалог містить форму з елементом {{HTMLElement("select")}} та двома елементами {{HTMLElement("button")}}, які усталено мають `type="submit"`. Слухач подій оновлює значення кнопки "Підтвердити", коли змінюється варіант вибору. Якщо кнопка "Підтвердити" активована для закриття діалогу, то поточне значення кнопки є значенням повернення. Якщо цей діалог закривається шляхом натискання кнопки "Скасувати", то `returnValue` – це `cancel`. +Цей приклад відкриває модальний діалог, коли активується кнопка "Показати діалог". Цей діалог містить форму з елементом {{HTMLElement("select")}} та двома елементами {{HTMLElement("button")}}, які усталено мають `type="submit"`. Слухач подій оновлює значення кнопки "Підтвердити", коли змінюється варіант вибору. Якщо кнопка "Підтвердити" активована для закриття діалогу, то поточне значення кнопки є значенням повернення. Якщо цей діалог закривається шляхом натискання кнопки "Скасувати", то `returnValue` – це `cancel`. Коли діалог закривається, то повернене значення виводиться під кнопкою "Показати діалог". Якщо діалог закривається шляхом натискання клавіші Esc, то `returnValue` не оновлюється, а подія `close` не відбувається, тому текст в елементі {{HTMLElement("output")}} не оновлюється. @@ -188,7 +188,7 @@ favDialog.addEventListener("close", (e) => { ? "Немає значення повернення." : `Значення повернення: ${favDialog.returnValue}.`; // Необхідно перевіряти на "default", а не на порожній рядок }); -// Не дати кнопці "підтвердження" запустити усталену поведінку подання форми, а також закрити діалог методом `close()`, що запускає подію "close". +// Не дає кнопці "підтвердження" запустити усталену поведінку подання форми, а також закрити діалог методом `close()`, що запускає подію "close". confirmBtn.addEventListener("click", (event) => { event.preventDefault(); // Ми не хочемо подавати цю несправжню форму favDialog.close(selectEl.value); // Тут необхідно надіслати значення віконця вибору. @@ -201,12 +201,12 @@ confirmBtn.addEventListener("click", (event) => { Приклади вище демонструють наступні три методи закриття модальних діалогових віконець: -- Шляхом подавання форми всередині діалогу за допомогою методу `dialog` (як у прикладі [діалогу лише з HTML](#dialoh-lyshe-z-html)). +- Шляхом подавання форми всередині діалогу за допомогою методу `dialog` (як у прикладі [діалогу з використанням лише HTML](#dialoh-z-vykorystanniam-lyshe-html)). - Шляхом натискання клавіші Esc. - Шляхом виклику методу {{domxref("HTMLDialogElement.close()")}} (як у прикладі [модального діалогу](#stvorennia-modalnoho-dialohu)). У цьому прикладі кнопка "Скасувати" закриває діалог за допомогою методу форми `dialog`, а кнопка "Підтвердити" закриває діалог за допомогою методу {{domxref("HTMLDialogElement.close()")}}. -Кнопка "Скасувати" має атрибут [`formmethod="dialog"`](/uk/docs/Web/HTML/Element/input/submit#formmethod), який відкидає усталений метод {{HTMLElement("form")}} {{HTTPMethod("GET")}}. Коли метод форми – [`dialog`](#prymitky-shchodo-zastosuvannia), стан форми зберігається, але не подається, а діалог закривається. +Кнопка "Скасувати" має атрибут [`formmethod="dialog"`](/uk/docs/Web/HTML/Element/input/submit#formmethod), який перевизначає усталений метод {{HTTPMethod("GET")}} для тега {{HTMLElement("form")}}. Коли метод форми – [`dialog`](#prymitky-shchodo-zastosuvannia), стан форми зберігається, але не подається, а діалог закривається. Коли `action` немає, подання форми з усталеним методом {{HTTPMethod("GET")}} призводить до перезавантаження сторінки. Тут використовується JavaScript, щоб запобігти поданню та закрити діалог за допомогою методів {{domxref("event.preventDefault()")}} і {{domxref("HTMLDialogElement.close()")}} відповідно. @@ -300,7 +300,7 @@ jsCloseBtn.addEventListener("click", (e) => { ##### HTML -HTML вміщає елемент ``, плюс кнопку для показу діалогу. Крім того, елемент `` містить іншу кнопку для закриття себе. +HTML містить елемент ``, плюс кнопку для показу діалогу. Крім того, елемент `` містить іншу кнопку для закриття себе. ```html From f4c809687a4189a45c5c066e0a0064f820a47af1 Mon Sep 17 00:00:00 2001 From: Vitalii Perehonchuk Date: Wed, 25 Dec 2024 23:24:11 +0200 Subject: [PATCH 14/15] update(HTML): web/html/element/dialog --- files/uk/web/html/element/dialog/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/files/uk/web/html/element/dialog/index.md b/files/uk/web/html/element/dialog/index.md index ef99edb885..129dc5dc3e 100644 --- a/files/uk/web/html/element/dialog/index.md +++ b/files/uk/web/html/element/dialog/index.md @@ -582,9 +582,9 @@ closeBtn.addEventListener("click", () => { ## Дивіться також - Інтерфейс {{domxref("HTMLDialogElement")}} interface -- Подія {{domxref("HTMLDialogElement/close_event", "close")}} -- Подія {{domxref("HTMLElement/cancel_event", "cancel")}} +- Подія {{domxref("HTMLDialogElement/close_event", "close")}} інтерфейсу `HTMLDialogElement` +- Подія {{domxref("HTMLDialogElement/cancel_event", "cancel")}} інтерфейсу `HTMLDialogElement` - Властивість {{domxref("HTMLDialogElement/open", "open")}} інтерфейсу `HTMLDialogElement` - Глобальний атрибут елементів HTML [`inert`](/uk/docs/Web/HTML/Global_attributes/inert) - Псевдоелемент CSS {{CSSXref("::backdrop")}} -- [Вебформи](/uk/docs/Learn/Forms) в Області навчання +- [Вебформи](/uk/docs/Learn_web_development/Extensions/Forms) в області Навчання From 80549c7bd06246722863c99fd91bc74ca8f5d114 Mon Sep 17 00:00:00 2001 From: Vitalii Perehonchuk Date: Thu, 26 Dec 2024 09:42:06 +0200 Subject: [PATCH 15/15] Apply suggestions from code review --- files/uk/web/html/element/dialog/index.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/files/uk/web/html/element/dialog/index.md b/files/uk/web/html/element/dialog/index.md index 129dc5dc3e..92430acf16 100644 --- a/files/uk/web/html/element/dialog/index.md +++ b/files/uk/web/html/element/dialog/index.md @@ -33,7 +33,7 @@ browser-compat: html.elements.dialog - Елементи {{HTMLElement("form")}} можуть використовуватися для закривання діалогового віконця, якщо мають атрибут `method="dialog"` або якщо кнопка, що використовується для подання такої форми, має [`formmethod="dialog"`](/uk/docs/Web/HTML/Element/input#formmethod). Коли `` усередині `` подається за допомогою методу `dialog`, діалогове віконце закривається, стани елементів керування форми зберігаються, але не подаються, а властивість {{domxref("HTMLDialogElement.returnValue", "returnValue")}} отримує значення кнопки, що була активована. - Псевдоелемент CSS {{cssxref('::backdrop')}} може використовуватися для оформлення задника модального діалогу, який виводиться під елементом ``, коли цей діалог виводиться за допомогою метода {{domxref("HTMLDialogElement.showModal()")}}. Наприклад, цей псевдоелемент можна використовувати для створення розмиття, затемнення чи ще якогось варіанту затуляння інертного вмісту під модальним діалогом. - Атрибут [`autofocus`](/uk/docs/Web/HTML/Global_attributes/autofocus) повинен бути доданий до елемента, щодо якого очікується, що користувач буде взаємодіяти з ним негайно після відкриття модального діалогу. Якщо жодний інший елемент не вимагає негайної взаємодії, то рекомендовано додати `autofocus` до кнопки закриття всередині діалогу, або самого діалогу, якщо очікується, що користувач клацне або натисне його, щоб закрити. -- Не слід додавати до елемента `` властивість `tabindex`, адже не очікується, що цей елемент може отримати фокус. Вміст діалогу, включно зі вміщеною в ньому кнопкою закриття, може отримати фокус та бути інтерактивним. +- Не слід додавати до елемента `` властивість `tabindex`, адже не очікується, що цей елемент може отримати фокус. Вміст діалогу, включно із кнопкою закриття, яка знаходиться всередині діалогу, може отримати фокус та бути інтерактивним. ## Доступність @@ -41,7 +41,7 @@ browser-compat: html.elements.dialog Слід забезпечити користувачів механізмом для закриття діалогу. Найнадійніший спосіб пересвідчитись, що всі користувачі можуть закрити діалог, – це додати явну кнопку для цього, наприклад, кнопку підтвердження, скасування чи закриття. -Усталено діалог, закликаний методом `showModal()`, може бути закритий шляхом натискання клавіші Esc. Немодальний діалог усталено не закривається клавішею Esc, і залежно від того, що він представляє, це може бути небажаним. Клавіатурні користувачі розраховують на те, що клавіша Esc закриває модальні діалоги; переконайтеся, що ця поведінка реалізована та підтримується. Якщо відкрито кілька модальних діалогів, то натискання клавіші Esc має закривати лише останній показаний діалог. Коли використовується ``, ця логіка надається браузером. +Усталено, діалог, закликаний методом `showModal()`, може бути закритий шляхом натискання клавіші Esc. Немодальний діалог усталено не закривається клавішею Esc, і залежно від того, чим він фактично є, це може бути небажаним. Клавіатурні користувачі розраховують на те, що клавіша Esc закриває модальні діалоги; переконайтеся, що ця поведінка реалізована та підтримується. Якщо відкрито кілька модальних діалогів, то натискання клавіші Esc має закривати лише останній показаний діалог. Коли використовується ``, ця логіка надається браузером. Попри те, що діалоги можна створювати за допомогою інших елементів, нативний елемент `` надає зручність і можливості доступності, які необхідно відтворювати, якщо для подібних потреб використовуються інші елементи. Якщо створюється власна реалізація діалогу, слід пересвідчитися, що всі очікувані усталені поведінки підтримуються, а також слід дотримуватися рекомендацій щодо правильних підписів. @@ -181,12 +181,12 @@ showButton.addEventListener("click", () => { favDialog.showModal(); }); -// Кнопка "Скасувати" закриває діалог без подання, у зв'язку з [formmethod="dialog"], запускаючи подію закриття. +// Кнопка "Скасувати", оскільки є [formmethod="dialog"], закриває діалог без подання, запускаючи подію закриття. favDialog.addEventListener("close", (e) => { outputBox.value = favDialog.returnValue === "default" - ? "Немає значення повернення." - : `Значення повернення: ${favDialog.returnValue}.`; // Необхідно перевіряти на "default", а не на порожній рядок + ? "Немає поверненого значення." + : `Повернене значення: ${favDialog.returnValue}.`; // Необхідно перевіряти на "default", а не на порожній рядок }); // Не дає кнопці "підтвердження" запустити усталену поведінку подання форми, а також закрити діалог методом `close()`, що запускає подію "close". confirmBtn.addEventListener("click", (event) => { @@ -269,7 +269,7 @@ jsCloseBtn.addEventListener("click", (e) => { {{EmbedLiveSample("zakryttia-dialohu-z-oboviazkovym-polem-formy", "100%", 300)}} -Судячи з результату, неможливо закрити діалог за допомогою кнопки _Закрити – нормально_. Проте його можна закрити, якщо обійти валідацію форми за допомогою атрибута `formnovalidate` на кнопці _Скасувати_. Програмно – `dialog.close()` також закриває такий діалог. +Судячи з прикладу, неможливо закрити діалог за допомогою кнопки _Закрити – нормально_. Проте його можна закрити, якщо обійти валідацію форми за допомогою атрибута `formnovalidate` на кнопці _Скасувати_. Програмно – `dialog.close()` також закриває такий діалог. ### Анімування діалогів @@ -374,7 +374,7 @@ dialog[open]::backdrop { ##### JavaScript -JavaScript додає до кнопок показу та закриття слухачі подій, змушуючи їх показувати та закривати ``, коли по них клацають: +JavaScript додає до кнопок показу та закриття слухачі подій, змушуючи ці кнопки показувати та закривати ``, коли по них клацають: ```js const dialogElem = document.getElementById("dialog");