@inglorious/web 6.10.0 → 6.10.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@inglorious/web",
|
|
3
|
-
"version": "6.10.
|
|
3
|
+
"version": "6.10.2",
|
|
4
4
|
"description": "A new web framework that leverages the power of the Inglorious Store combined with the performance and simplicity of lit-html.",
|
|
5
5
|
"author": "Matteo Antony Mistretta <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
|
|
6
6
|
"contributors": [
|
|
@@ -109,12 +109,12 @@
|
|
|
109
109
|
},
|
|
110
110
|
"sideEffects": false,
|
|
111
111
|
"dependencies": {
|
|
112
|
-
"@inglorious/utils": "5.1.0",
|
|
112
|
+
"@inglorious/utils": "^5.1.0",
|
|
113
113
|
"@lit-labs/ssr-client": "^1.1.8",
|
|
114
114
|
"lit-html": "^3.3.3"
|
|
115
115
|
},
|
|
116
116
|
"peerDependencies": {
|
|
117
|
-
"@inglorious/store": "12.1.
|
|
117
|
+
"@inglorious/store": "^12.1.1"
|
|
118
118
|
},
|
|
119
119
|
"devDependencies": {
|
|
120
120
|
"@inglorious/eslint-config": "1.2.0",
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
const ANNOUNCER_ID = "iw-route-announcer"
|
|
2
|
+
// Long enough for screen readers to notice the live region emptied first.
|
|
3
|
+
const ANNOUNCE_DELAY_MS = 100
|
|
2
4
|
const VISUALLY_HIDDEN =
|
|
3
5
|
"position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0"
|
|
4
6
|
|
|
@@ -26,6 +28,17 @@ export function createAccessibleNavigation({
|
|
|
26
28
|
const announcer = getAnnouncer()
|
|
27
29
|
let currentPath = window.location.pathname
|
|
28
30
|
let hasPendingAnnouncement = false
|
|
31
|
+
let announceTimeout = null
|
|
32
|
+
|
|
33
|
+
// Screen readers speak only when the live region changes, so it is emptied first and
|
|
34
|
+
// filled on a later task: two pages with the same name are each announced.
|
|
35
|
+
function announce(message) {
|
|
36
|
+
announcer.textContent = ""
|
|
37
|
+
clearTimeout(announceTimeout)
|
|
38
|
+
announceTimeout = setTimeout(() => {
|
|
39
|
+
announcer.textContent = message
|
|
40
|
+
}, ANNOUNCE_DELAY_MS)
|
|
41
|
+
}
|
|
29
42
|
|
|
30
43
|
return function afterRender() {
|
|
31
44
|
const path = window.location.pathname
|
|
@@ -44,8 +57,7 @@ export function createAccessibleNavigation({
|
|
|
44
57
|
if (name == null) return
|
|
45
58
|
|
|
46
59
|
hasPendingAnnouncement = false
|
|
47
|
-
|
|
48
|
-
name || document.querySelector("h1")?.textContent || path
|
|
60
|
+
announce(name || document.querySelector("h1")?.textContent || path)
|
|
49
61
|
}
|
|
50
62
|
}
|
|
51
63
|
|