@a11y-hud/vue 0.2.0 → 0.2.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/LICENSE +0 -5
- package/README.md +77 -0
- package/dist/index.cjs +16 -9
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +5 -5
- package/dist/index.d.ts +5 -5
- package/dist/index.js +17 -10
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/LICENSE
CHANGED
|
@@ -19,8 +19,3 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
|
19
19
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
20
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
21
|
SOFTWARE.
|
|
22
|
-
|
|
23
|
-
---
|
|
24
|
-
|
|
25
|
-
This software includes icons from Lucide (https://lucide.dev/).
|
|
26
|
-
See LICENSE-ICONS.md for details.
|
package/README.md
ADDED
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
# @a11y-hud/vue
|
|
2
|
+
|
|
3
|
+
Vue 3 adapter for [a11y-hud](https://www.npmjs.com/package/a11y-hud) — run axe-core accessibility audits in your Vue app with no browser extension required.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```sh
|
|
8
|
+
npm install a11y-hud @a11y-hud/vue
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
Peer dependencies: `vue@>=3.4`.
|
|
12
|
+
|
|
13
|
+
## Usage
|
|
14
|
+
|
|
15
|
+
### Component
|
|
16
|
+
|
|
17
|
+
Drop `<A11yHud />` anywhere in your Vue tree. It renders nothing into the Vue DOM — the HUD panel is appended to `document.body` as a Custom Element.
|
|
18
|
+
|
|
19
|
+
```vue
|
|
20
|
+
<script setup>
|
|
21
|
+
import { A11yHud } from "@a11y-hud/vue";
|
|
22
|
+
</script>
|
|
23
|
+
|
|
24
|
+
<template>
|
|
25
|
+
<A11yHud theme="auto" />
|
|
26
|
+
<!-- rest of your app -->
|
|
27
|
+
</template>
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
### Composable
|
|
31
|
+
|
|
32
|
+
Use `useA11yHud` when you need programmatic access to `runScan` or `setTheme`.
|
|
33
|
+
|
|
34
|
+
```vue
|
|
35
|
+
<script setup>
|
|
36
|
+
import { useA11yHud } from "@a11y-hud/vue";
|
|
37
|
+
|
|
38
|
+
const { runScan, setTheme } = useA11yHud({ theme: "auto" });
|
|
39
|
+
</script>
|
|
40
|
+
|
|
41
|
+
<template>
|
|
42
|
+
<button @click="runScan()">Scan now</button>
|
|
43
|
+
</template>
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
### Subtree scoping
|
|
47
|
+
|
|
48
|
+
Restrict the scan to a specific subtree by passing a template ref.
|
|
49
|
+
|
|
50
|
+
```vue
|
|
51
|
+
<script setup>
|
|
52
|
+
import { ref } from "vue";
|
|
53
|
+
import { A11yHud } from "@a11y-hud/vue";
|
|
54
|
+
|
|
55
|
+
const scopeRef = ref(null);
|
|
56
|
+
</script>
|
|
57
|
+
|
|
58
|
+
<template>
|
|
59
|
+
<A11yHud :scope="scopeRef" />
|
|
60
|
+
<div ref="scopeRef">
|
|
61
|
+
<!-- only this subtree is scanned -->
|
|
62
|
+
</div>
|
|
63
|
+
</template>
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
### Props / options
|
|
67
|
+
|
|
68
|
+
| Prop | Type | Default | Description |
|
|
69
|
+
|------|------|---------|-------------|
|
|
70
|
+
| `theme` | `"auto" \| "default" \| "light" \| "high-contrast"` | `"auto"` | Panel theme |
|
|
71
|
+
| `scope` | `Element \| null` | — | Restrict scan to a subtree |
|
|
72
|
+
| `autoScan` | `boolean` | `true` | Auto-rescan on DOM mutations |
|
|
73
|
+
| `debounce` | `number` | `500` | Debounce delay in ms |
|
|
74
|
+
|
|
75
|
+
## License
|
|
76
|
+
|
|
77
|
+
MIT © Arthur Vasconcelos
|
package/dist/index.cjs
CHANGED
|
@@ -16,12 +16,28 @@ function useA11yHud(options = {}) {
|
|
|
16
16
|
});
|
|
17
17
|
instanceRef.value = instance;
|
|
18
18
|
elementRef.value = document.querySelector("a11y-hud");
|
|
19
|
+
const el = elementRef.value;
|
|
20
|
+
if (el) {
|
|
21
|
+
el.scopeElement = options.scope ?? void 0;
|
|
22
|
+
}
|
|
23
|
+
void instance.runScan();
|
|
19
24
|
});
|
|
20
25
|
vue.onUnmounted(() => {
|
|
21
26
|
instanceRef.value?.unmount();
|
|
22
27
|
instanceRef.value = null;
|
|
23
28
|
elementRef.value = null;
|
|
24
29
|
});
|
|
30
|
+
vue.watch(
|
|
31
|
+
() => options.scope,
|
|
32
|
+
() => {
|
|
33
|
+
const instance = instanceRef.value;
|
|
34
|
+
const el = elementRef.value;
|
|
35
|
+
if (!instance || !el) return;
|
|
36
|
+
el.scopeElement = options.scope ?? void 0;
|
|
37
|
+
void instance.runScan();
|
|
38
|
+
},
|
|
39
|
+
{ flush: "post" }
|
|
40
|
+
);
|
|
25
41
|
vue.watch(
|
|
26
42
|
() => options.theme,
|
|
27
43
|
(newTheme) => {
|
|
@@ -51,15 +67,6 @@ function useA11yHud(options = {}) {
|
|
|
51
67
|
},
|
|
52
68
|
{ flush: "post" }
|
|
53
69
|
);
|
|
54
|
-
vue.watchPostEffect(() => {
|
|
55
|
-
const instance = instanceRef.value;
|
|
56
|
-
if (!instance) return;
|
|
57
|
-
const el = elementRef.value;
|
|
58
|
-
if (el) {
|
|
59
|
-
el.scopeElement = options.scope?.value ?? void 0;
|
|
60
|
-
}
|
|
61
|
-
void instance.runScan();
|
|
62
|
-
});
|
|
63
70
|
function runScan() {
|
|
64
71
|
return instanceRef.value?.runScan() ?? Promise.resolve(null);
|
|
65
72
|
}
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/composable.ts","../src/component.ts"],"names":["shallowRef","onMounted","mount","onUnmounted","watch","
|
|
1
|
+
{"version":3,"sources":["../src/composable.ts","../src/component.ts"],"names":["shallowRef","onMounted","mount","onUnmounted","watch","defineComponent"],"mappings":"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","file":"index.cjs","sourcesContent":["import type { A11yHudElement, A11yHudInstance, AxeResults, Theme } from \"a11y-hud\";\nimport { mount } from \"a11y-hud\";\nimport { onMounted, onUnmounted, shallowRef, watch } from \"vue\";\nimport type { UseA11yHudOptions, UseA11yHudReturn } from \"./types.js\";\n\nexport function useA11yHud(options: UseA11yHudOptions = {}): UseA11yHudReturn {\n const instanceRef = shallowRef<A11yHudInstance | null>(null);\n const elementRef = shallowRef<A11yHudElement | null>(null);\n\n onMounted(() => {\n const { theme, autoScan, debounce } = options;\n const instance = mount({\n ...(theme !== undefined && { theme }),\n ...(autoScan !== undefined && { autoScan }),\n ...(debounce !== undefined && { debounce }),\n });\n instanceRef.value = instance;\n elementRef.value = document.querySelector<A11yHudElement>(\"a11y-hud\");\n const el = elementRef.value;\n if (el) {\n el.scopeElement = options.scope ?? undefined;\n }\n void instance.runScan();\n });\n\n onUnmounted(() => {\n instanceRef.value?.unmount();\n instanceRef.value = null;\n elementRef.value = null;\n });\n\n // Render-settled signal: fires after the scope prop changes, syncing the CE's\n // scopeElement and triggering a rescan. Route changes and general DOM mutations\n // are handled by the core's MutationObserver; this watch covers the prop-change\n // path (e.g. enabling/disabling scope, passing a different ref).\n watch(\n () => options.scope,\n () => {\n const instance = instanceRef.value;\n const el = elementRef.value;\n if (!instance || !el) return;\n el.scopeElement = options.scope ?? undefined;\n void instance.runScan();\n },\n { flush: \"post\" }\n );\n\n watch(\n () => options.theme,\n (newTheme) => {\n if (newTheme !== undefined) instanceRef.value?.setTheme(newTheme);\n },\n { flush: \"post\" }\n );\n\n watch(\n () => options.autoScan,\n (newAutoScan) => {\n const el = elementRef.value;\n if (!el) return;\n if (newAutoScan === false) {\n el.removeAttribute(\"auto-scan\");\n } else {\n el.setAttribute(\"auto-scan\", \"\");\n }\n },\n { flush: \"post\" }\n );\n\n watch(\n () => options.debounce,\n (newDebounce) => {\n const el = elementRef.value;\n if (!el || newDebounce === undefined) return;\n el.setAttribute(\"debounce\", String(newDebounce));\n },\n { flush: \"post\" }\n );\n\n function runScan(): Promise<AxeResults> {\n return instanceRef.value?.runScan() ?? Promise.resolve(null as unknown as AxeResults);\n }\n\n function setTheme(theme: Theme): void {\n instanceRef.value?.setTheme(theme);\n }\n\n return { runScan, setTheme };\n}\n","import type { Theme } from \"a11y-hud\";\nimport type { PropType } from \"vue\";\nimport { defineComponent } from \"vue\";\nimport { useA11yHud } from \"./composable.js\";\nimport type { A11yHudProps } from \"./types.js\";\n\nexport const A11yHud = defineComponent({\n name: \"A11yHud\",\n props: {\n theme: {\n type: String as PropType<Theme>,\n default: undefined,\n },\n scope: {\n type: Object as PropType<Element | null>,\n default: undefined,\n },\n autoScan: {\n type: Boolean as PropType<boolean>,\n default: undefined,\n },\n debounce: {\n type: Number as PropType<number>,\n default: undefined,\n },\n },\n setup(props) {\n useA11yHud(props as A11yHudProps);\n return () => null;\n },\n});\n"]}
|
package/dist/index.d.cts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as vue from 'vue';
|
|
2
|
-
import { PropType
|
|
2
|
+
import { PropType } from 'vue';
|
|
3
3
|
import { Theme, AxeResults } from 'a11y-hud';
|
|
4
4
|
|
|
5
5
|
declare const A11yHud: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
@@ -8,7 +8,7 @@ declare const A11yHud: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
8
8
|
default: undefined;
|
|
9
9
|
};
|
|
10
10
|
scope: {
|
|
11
|
-
type: PropType<
|
|
11
|
+
type: PropType<Element | null>;
|
|
12
12
|
default: undefined;
|
|
13
13
|
};
|
|
14
14
|
autoScan: {
|
|
@@ -25,7 +25,7 @@ declare const A11yHud: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
25
25
|
default: undefined;
|
|
26
26
|
};
|
|
27
27
|
scope: {
|
|
28
|
-
type: PropType<
|
|
28
|
+
type: PropType<Element | null>;
|
|
29
29
|
default: undefined;
|
|
30
30
|
};
|
|
31
31
|
autoScan: {
|
|
@@ -40,12 +40,12 @@ declare const A11yHud: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
40
40
|
theme: Theme;
|
|
41
41
|
autoScan: boolean;
|
|
42
42
|
debounce: number;
|
|
43
|
-
scope:
|
|
43
|
+
scope: Element | null;
|
|
44
44
|
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
45
45
|
|
|
46
46
|
interface UseA11yHudOptions {
|
|
47
47
|
theme?: Theme;
|
|
48
|
-
scope?:
|
|
48
|
+
scope?: Element | null;
|
|
49
49
|
autoScan?: boolean;
|
|
50
50
|
debounce?: number;
|
|
51
51
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as vue from 'vue';
|
|
2
|
-
import { PropType
|
|
2
|
+
import { PropType } from 'vue';
|
|
3
3
|
import { Theme, AxeResults } from 'a11y-hud';
|
|
4
4
|
|
|
5
5
|
declare const A11yHud: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
@@ -8,7 +8,7 @@ declare const A11yHud: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
8
8
|
default: undefined;
|
|
9
9
|
};
|
|
10
10
|
scope: {
|
|
11
|
-
type: PropType<
|
|
11
|
+
type: PropType<Element | null>;
|
|
12
12
|
default: undefined;
|
|
13
13
|
};
|
|
14
14
|
autoScan: {
|
|
@@ -25,7 +25,7 @@ declare const A11yHud: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
25
25
|
default: undefined;
|
|
26
26
|
};
|
|
27
27
|
scope: {
|
|
28
|
-
type: PropType<
|
|
28
|
+
type: PropType<Element | null>;
|
|
29
29
|
default: undefined;
|
|
30
30
|
};
|
|
31
31
|
autoScan: {
|
|
@@ -40,12 +40,12 @@ declare const A11yHud: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
40
40
|
theme: Theme;
|
|
41
41
|
autoScan: boolean;
|
|
42
42
|
debounce: number;
|
|
43
|
-
scope:
|
|
43
|
+
scope: Element | null;
|
|
44
44
|
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
45
45
|
|
|
46
46
|
interface UseA11yHudOptions {
|
|
47
47
|
theme?: Theme;
|
|
48
|
-
scope?:
|
|
48
|
+
scope?: Element | null;
|
|
49
49
|
autoScan?: boolean;
|
|
50
50
|
debounce?: number;
|
|
51
51
|
}
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent, shallowRef, onMounted, onUnmounted, watch
|
|
1
|
+
import { defineComponent, shallowRef, onMounted, onUnmounted, watch } from 'vue';
|
|
2
2
|
import { mount } from 'a11y-hud';
|
|
3
3
|
|
|
4
4
|
// src/component.ts
|
|
@@ -14,12 +14,28 @@ function useA11yHud(options = {}) {
|
|
|
14
14
|
});
|
|
15
15
|
instanceRef.value = instance;
|
|
16
16
|
elementRef.value = document.querySelector("a11y-hud");
|
|
17
|
+
const el = elementRef.value;
|
|
18
|
+
if (el) {
|
|
19
|
+
el.scopeElement = options.scope ?? void 0;
|
|
20
|
+
}
|
|
21
|
+
void instance.runScan();
|
|
17
22
|
});
|
|
18
23
|
onUnmounted(() => {
|
|
19
24
|
instanceRef.value?.unmount();
|
|
20
25
|
instanceRef.value = null;
|
|
21
26
|
elementRef.value = null;
|
|
22
27
|
});
|
|
28
|
+
watch(
|
|
29
|
+
() => options.scope,
|
|
30
|
+
() => {
|
|
31
|
+
const instance = instanceRef.value;
|
|
32
|
+
const el = elementRef.value;
|
|
33
|
+
if (!instance || !el) return;
|
|
34
|
+
el.scopeElement = options.scope ?? void 0;
|
|
35
|
+
void instance.runScan();
|
|
36
|
+
},
|
|
37
|
+
{ flush: "post" }
|
|
38
|
+
);
|
|
23
39
|
watch(
|
|
24
40
|
() => options.theme,
|
|
25
41
|
(newTheme) => {
|
|
@@ -49,15 +65,6 @@ function useA11yHud(options = {}) {
|
|
|
49
65
|
},
|
|
50
66
|
{ flush: "post" }
|
|
51
67
|
);
|
|
52
|
-
watchPostEffect(() => {
|
|
53
|
-
const instance = instanceRef.value;
|
|
54
|
-
if (!instance) return;
|
|
55
|
-
const el = elementRef.value;
|
|
56
|
-
if (el) {
|
|
57
|
-
el.scopeElement = options.scope?.value ?? void 0;
|
|
58
|
-
}
|
|
59
|
-
void instance.runScan();
|
|
60
|
-
});
|
|
61
68
|
function runScan() {
|
|
62
69
|
return instanceRef.value?.runScan() ?? Promise.resolve(null);
|
|
63
70
|
}
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/composable.ts","../src/component.ts"],"names":[],"mappings":";;;;AAKO,SAAS,UAAA,CAAW,OAAA,GAA6B,EAAC,EAAqB;AAC5E,EAAA,MAAM,WAAA,GAAc,WAAmC,IAAI,CAAA;AAC3D,EAAA,MAAM,UAAA,GAAa,WAAkC,IAAI,CAAA;AAEzD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,EAAE,KAAA,EAAO,QAAA,EAAU,QAAA,EAAS,GAAI,OAAA;AACtC,IAAA,MAAM,WAAW,KAAA,CAAM;AAAA,MACrB,GAAI,KAAA,KAAU,MAAA,IAAa,EAAE,KAAA,EAAM;AAAA,MACnC,GAAI,QAAA,KAAa,MAAA,IAAa,EAAE,QAAA,EAAS;AAAA,MACzC,GAAI,QAAA,KAAa,MAAA,IAAa,EAAE,QAAA;AAAS,KAC1C,CAAA;AACD,IAAA,WAAA,CAAY,KAAA,GAAQ,QAAA;AACpB,IAAA,UAAA,CAAW,KAAA,GAAQ,QAAA,CAAS,aAAA,CAA8B,UAAU,CAAA;AAAA,
|
|
1
|
+
{"version":3,"sources":["../src/composable.ts","../src/component.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import type { A11yHudElement, A11yHudInstance, AxeResults, Theme } from \"a11y-hud\";\nimport { mount } from \"a11y-hud\";\nimport { onMounted, onUnmounted, shallowRef, watch } from \"vue\";\nimport type { UseA11yHudOptions, UseA11yHudReturn } from \"./types.js\";\n\nexport function useA11yHud(options: UseA11yHudOptions = {}): UseA11yHudReturn {\n const instanceRef = shallowRef<A11yHudInstance | null>(null);\n const elementRef = shallowRef<A11yHudElement | null>(null);\n\n onMounted(() => {\n const { theme, autoScan, debounce } = options;\n const instance = mount({\n ...(theme !== undefined && { theme }),\n ...(autoScan !== undefined && { autoScan }),\n ...(debounce !== undefined && { debounce }),\n });\n instanceRef.value = instance;\n elementRef.value = document.querySelector<A11yHudElement>(\"a11y-hud\");\n const el = elementRef.value;\n if (el) {\n el.scopeElement = options.scope ?? undefined;\n }\n void instance.runScan();\n });\n\n onUnmounted(() => {\n instanceRef.value?.unmount();\n instanceRef.value = null;\n elementRef.value = null;\n });\n\n // Render-settled signal: fires after the scope prop changes, syncing the CE's\n // scopeElement and triggering a rescan. Route changes and general DOM mutations\n // are handled by the core's MutationObserver; this watch covers the prop-change\n // path (e.g. enabling/disabling scope, passing a different ref).\n watch(\n () => options.scope,\n () => {\n const instance = instanceRef.value;\n const el = elementRef.value;\n if (!instance || !el) return;\n el.scopeElement = options.scope ?? undefined;\n void instance.runScan();\n },\n { flush: \"post\" }\n );\n\n watch(\n () => options.theme,\n (newTheme) => {\n if (newTheme !== undefined) instanceRef.value?.setTheme(newTheme);\n },\n { flush: \"post\" }\n );\n\n watch(\n () => options.autoScan,\n (newAutoScan) => {\n const el = elementRef.value;\n if (!el) return;\n if (newAutoScan === false) {\n el.removeAttribute(\"auto-scan\");\n } else {\n el.setAttribute(\"auto-scan\", \"\");\n }\n },\n { flush: \"post\" }\n );\n\n watch(\n () => options.debounce,\n (newDebounce) => {\n const el = elementRef.value;\n if (!el || newDebounce === undefined) return;\n el.setAttribute(\"debounce\", String(newDebounce));\n },\n { flush: \"post\" }\n );\n\n function runScan(): Promise<AxeResults> {\n return instanceRef.value?.runScan() ?? Promise.resolve(null as unknown as AxeResults);\n }\n\n function setTheme(theme: Theme): void {\n instanceRef.value?.setTheme(theme);\n }\n\n return { runScan, setTheme };\n}\n","import type { Theme } from \"a11y-hud\";\nimport type { PropType } from \"vue\";\nimport { defineComponent } from \"vue\";\nimport { useA11yHud } from \"./composable.js\";\nimport type { A11yHudProps } from \"./types.js\";\n\nexport const A11yHud = defineComponent({\n name: \"A11yHud\",\n props: {\n theme: {\n type: String as PropType<Theme>,\n default: undefined,\n },\n scope: {\n type: Object as PropType<Element | null>,\n default: undefined,\n },\n autoScan: {\n type: Boolean as PropType<boolean>,\n default: undefined,\n },\n debounce: {\n type: Number as PropType<number>,\n default: undefined,\n },\n },\n setup(props) {\n useA11yHud(props as A11yHudProps);\n return () => null;\n },\n});\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@a11y-hud/vue",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.2",
|
|
4
4
|
"description": "Vue adapter for a11y-hud — run axe-core accessibility audits in your Vue app with no DevTools required.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"exports": {
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"README.md"
|
|
20
20
|
],
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"a11y-hud": "0.1.
|
|
22
|
+
"a11y-hud": "0.1.2"
|
|
23
23
|
},
|
|
24
24
|
"peerDependencies": {
|
|
25
25
|
"vue": ">=3.4"
|