access-settings 0.0.1 → 0.0.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/README.md +7 -2
- package/example/index.html +3 -0
- package/package.json +1 -1
- package/screenshot.png +0 -0
- package/src/globalStyles.js +7 -1
- package/src/index.js +3 -2
package/README.md
CHANGED
|
@@ -4,6 +4,8 @@ Web component for accessibility settings
|
|
|
4
4
|
## Demo
|
|
5
5
|
https://yannickbochatay.github.io/access-settings/example
|
|
6
6
|
|
|
7
|
+
|
|
8
|
+
|
|
7
9
|
## Installation
|
|
8
10
|
|
|
9
11
|
### From CDN
|
|
@@ -15,7 +17,7 @@ The fastest and simplest way to get started.
|
|
|
15
17
|
<head>
|
|
16
18
|
<meta charset="UTF-8">
|
|
17
19
|
<title>My accessible page</title>
|
|
18
|
-
<script src="https://cdn.jsdelivr.net/npm/access-settings@0.0.1/"></script>
|
|
20
|
+
<script src="https://cdn.jsdelivr.net/npm/access-settings@0.0.1/dist/index.js"></script>
|
|
19
21
|
</head>
|
|
20
22
|
<body>
|
|
21
23
|
<access-settings all></accessibility-settings>
|
|
@@ -33,7 +35,7 @@ npm install access-settings
|
|
|
33
35
|
|
|
34
36
|
### Direct download
|
|
35
37
|
|
|
36
|
-
You can download the [file directly from GitHub](
|
|
38
|
+
You can download the [file directly from GitHub](https://raw.githubusercontent.com/YannickBochatay/access-settings/refs/heads/main/dist/index.js).
|
|
37
39
|
|
|
38
40
|
|
|
39
41
|
## Usage
|
|
@@ -64,6 +66,9 @@ To display the icon in a circle, use `rounded` attribute.
|
|
|
64
66
|
</access-settings>
|
|
65
67
|
```
|
|
66
68
|
|
|
69
|
+
#### lang
|
|
70
|
+
Component labels are based on `lang` attribute in the html tag. Languages available are english (**en**) and french (**fr**). Customisation is coming.
|
|
71
|
+
|
|
67
72
|
## Customisation
|
|
68
73
|
|
|
69
74
|
### Position
|
package/example/index.html
CHANGED
|
@@ -10,6 +10,9 @@
|
|
|
10
10
|
</head>
|
|
11
11
|
|
|
12
12
|
<body>
|
|
13
|
+
<a href="javascript:(() => {import('https://cdn.jsdelivr.net/npm/access-settings@0.0.1/dist/index.js').then(() => { const node = document.createElement('access-settings');node.setAttribute('all','');document.body.appendChild(node)})})()">
|
|
14
|
+
Bookmark me !
|
|
15
|
+
</a>
|
|
13
16
|
<header>
|
|
14
17
|
<h1>Lorem Ipsum</h1>
|
|
15
18
|
|
package/package.json
CHANGED
package/screenshot.png
ADDED
|
Binary file
|
package/src/globalStyles.js
CHANGED
|
@@ -4,9 +4,15 @@ globalStyles.innerHTML = `
|
|
|
4
4
|
@font-face {
|
|
5
5
|
font-family: open-dyslexic;
|
|
6
6
|
src: url(https://fonts.cdnfonts.com/s/29616/open-dyslexic.woff);
|
|
7
|
+
}:
|
|
8
|
+
:root {
|
|
9
|
+
--access-font-family:open-dyslexic, sans-serif;
|
|
7
10
|
}
|
|
8
11
|
:root.dyslexic {
|
|
9
|
-
font-family:
|
|
12
|
+
font-family:var(--access-font-family);
|
|
13
|
+
body, main, article, section, aside, p {
|
|
14
|
+
font-family:var(--access-font-family);
|
|
15
|
+
}
|
|
10
16
|
}
|
|
11
17
|
:root.invertedColors {
|
|
12
18
|
filter:invert(1);
|
package/src/index.js
CHANGED
|
@@ -73,8 +73,9 @@ export class AccessSettings extends HTMLElement {
|
|
|
73
73
|
}
|
|
74
74
|
|
|
75
75
|
#handleLangChange() {
|
|
76
|
-
const lang = document.documentElement.lang
|
|
77
|
-
const
|
|
76
|
+
const lang = document.documentElement.lang || 'en'
|
|
77
|
+
const { languages } = this.constructor
|
|
78
|
+
const locale = languages[lang] ?? languages.en
|
|
78
79
|
const labels = this.shadowRoot.querySelectorAll("label")
|
|
79
80
|
|
|
80
81
|
for (let label of labels) {
|