From f28c7ace87b509ccc0e0b9430f656b251012a7dc Mon Sep 17 00:00:00 2001 From: 0x1eef <0x1eef@protonmail.com> Date: Fri, 12 Jul 2024 03:26:32 -0300 Subject: [PATCH] Try to follow accessibility best practices ref https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress --- README.md | 39 +++++++++++++------ .../postman/examples/progressbar/delivery.js | 12 +++--- share/postman/examples/progressbar/index.html | 29 +++++++++++--- 3 files changed, 57 insertions(+), 23 deletions(-) diff --git a/README.md b/README.md index c1feee1..0674aea 100644 --- a/README.md +++ b/README.md @@ -20,13 +20,30 @@ progress bar is removed once the delivery is complete: Postman + -
- - -
- +
+ +
``` @@ -36,8 +53,9 @@ progress bar is removed once the delivery is complete: ```typescript import postman, { item } from "postman"; document.addEventListener("DOMContentLoaded", () => { - const bar = document.querySelector("progress"); - const span = document.querySelector(".percentage"); + const postman = document.querySelector("main.postman"); + const bar = postman.querySelector("progress"); + const span = postman.querySelector(".percent"); const delivery = postman( item.font("Kanit Regular", "url(/fonts/kanit-regular.ttf)"), item.script("/js/app.js"), @@ -45,7 +63,7 @@ document.addEventListener("DOMContentLoaded", () => { item.css("/css/app.css"), item.progress((percent) => { bar.value = percent; - span.innerText = `${percent}%`; + bar.innerText = span.innerText = `${percent}%`; }) ).deliver(); @@ -54,9 +72,8 @@ document.addEventListener("DOMContentLoaded", () => { package.fonts.forEach((font) => documents.fonts.add(font)); package.scripts.forEach((script) => document.body.appendChild(script)); package.css.forEach((css) => document.head.appendChild(css)); - /* Replace progress bar */ - bar.remove(); - span.remove(); + /* Replace loading screen */ + postman.remove(); }); }); ``` diff --git a/share/postman/examples/progressbar/delivery.js b/share/postman/examples/progressbar/delivery.js index 2d8b8a2..eeb449c 100644 --- a/share/postman/examples/progressbar/delivery.js +++ b/share/postman/examples/progressbar/delivery.js @@ -1,7 +1,8 @@ import postman, { item } from "postman"; document.addEventListener("DOMContentLoaded", () => { - const bar = document.querySelector("progress"); - const span = document.querySelector(".percentage"); + const postman = document.querySelector("main.postman"); + const bar = postman.querySelector("progress"); + const span = postman.querySelector(".percent"); const delivery = postman( item.font("Kanit Regular", "url(/fonts/kanit-regular.ttf)"), item.script("/js/app.js"), @@ -9,7 +10,7 @@ document.addEventListener("DOMContentLoaded", () => { item.css("/css/app.css"), item.progress((percent) => { bar.value = percent; - span.innerText = `${percent}%`; + bar.innerText = span.innerText = `${percent}%`; }) ).deliver(); @@ -18,8 +19,7 @@ document.addEventListener("DOMContentLoaded", () => { package.fonts.forEach((font) => documents.fonts.add(font)); package.scripts.forEach((script) => document.body.appendChild(script)); package.css.forEach((css) => document.head.appendChild(css)); - /* Replace progress bar */ - bar.remove(); - span.remove(); + /* Replace loading screen */ + postman.remove(); }); }); diff --git a/share/postman/examples/progressbar/index.html b/share/postman/examples/progressbar/index.html index c874fbf..de23900 100644 --- a/share/postman/examples/progressbar/index.html +++ b/share/postman/examples/progressbar/index.html @@ -2,13 +2,30 @@ Postman - + + -
- - -
- +
+ +