From c5483ef269d262f65a69eb4c3f862202ff295137 Mon Sep 17 00:00:00 2001
From: Jairo Valderrama <jairovg@gmail.com>
Date: Fri, 8 Jul 2022 12:20:41 -0500
Subject: [PATCH 1/3] fix: allows to set a default element to run on the first
load
This element will be used as the default context sent to `axe.run`
Fix: #36
---
src/audit.js | 2 +-
src/index.js | 2 +-
src/utils.js | 1 +
3 files changed, 3 insertions(+), 2 deletions(-)
diff --git a/src/audit.js b/src/audit.js
index 8606913..367db3c 100644
--- a/src/audit.js
+++ b/src/audit.js
@@ -11,7 +11,7 @@ export function checkAndReport (options, node, label) {
const deferred = createDeferred()
style = { ...options.style }
- axeCore.run(node || document, options.runOptions, (error, results) => {
+ axeCore.run(node || options.element || document, options.runOptions, (error, results) => {
if (error) deferred.reject(error)
if (results && !results.violations.length) return
if (JSON.stringify(results.violations) === lastNotification) return
diff --git a/src/index.js b/src/index.js
index fb15724..da03f1f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -48,5 +48,5 @@ export default function install (Vue, options = {}) {
})
// First check
- setTimeout(() => draf(() => checkAndReport(options, document, 'App')), options.delay)
+ setTimeout(() => draf(() => checkAndReport(options, null, 'App')), options.delay)
}
diff --git a/src/utils.js b/src/utils.js
index b32774e..e45bb74 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -7,6 +7,7 @@ export const defaultOptions = {
allowConsoleClears: true,
clearConsoleOnUpdate: false,
delay: 500,
+ element: null,
config: {
branding: {
application: 'vue-axe'
From 3450f6556609f5732963eb34737f1729e0a0ef0b Mon Sep 17 00:00:00 2001
From: Jairo Valderrama <jairovg@gmail.com>
Date: Fri, 8 Jul 2022 12:26:52 -0500
Subject: [PATCH 2/3] docs: demo running the audit on the first load against
the mounting point
It runs the audit against `document` with the manual run to check against an injected bug in the page head
---
demo/public/index.html | 1 -
demo/src/main.js | 4 +++-
demo/src/views/Home.vue | 3 ++-
3 files changed, 5 insertions(+), 3 deletions(-)
diff --git a/demo/public/index.html b/demo/public/index.html
index 4123528..e1ffed6 100644
--- a/demo/public/index.html
+++ b/demo/public/index.html
@@ -5,7 +5,6 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
- <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
diff --git a/demo/src/main.js b/demo/src/main.js
index e4704db..807859d 100644
--- a/demo/src/main.js
+++ b/demo/src/main.js
@@ -4,7 +4,9 @@ import App from './App.vue'
import router from './router'
// Use this plugin only development => if (process.env.NODE_ENV === 'development')
-Vue.use(VueAxe)
+Vue.use(VueAxe, {
+ element: '#app'
+})
Vue.config.productionTip = false
new Vue({
diff --git a/demo/src/views/Home.vue b/demo/src/views/Home.vue
index 58830fe..53f7d7e 100644
--- a/demo/src/views/Home.vue
+++ b/demo/src/views/Home.vue
@@ -132,7 +132,8 @@ export default {
handleManualButton () {
this.$axe.run({
- clearConsole: true
+ clearConsole: true,
+ element: document
})
}
}
From d464e5344a74760ff7a28937225f26068d43a02c Mon Sep 17 00:00:00 2001
From: Jairo Valderrama <jairovg@gmail.com>
Date: Fri, 8 Jul 2022 12:35:25 -0500
Subject: [PATCH 3/3] docs: adds and relates new element option
---
docs/guide/api.md | 2 +-
docs/guide/options.md | 18 ++++++++++++++++++
2 files changed, 19 insertions(+), 1 deletion(-)
diff --git a/docs/guide/api.md b/docs/guide/api.md
index 4cdcc29..7ff0ded 100644
--- a/docs/guide/api.md
+++ b/docs/guide/api.md
@@ -11,7 +11,7 @@ To execute the `$axe.run` method to check manually your document or any desired
| Key | Type | Default
| ------------- | ------------------------ | ----------------------------------
| clearConsole | Boolean | The same as `clearConsoleOnUpdate`
-| element | Document or HTMLElement | `document`
+| element | Document or HTMLElement | `element` from [options](/guide/options.html#element) or `document`
| label | Strong | `Run manually`
```js
diff --git a/docs/guide/options.md b/docs/guide/options.md
index 673ed18..923e020 100644
--- a/docs/guide/options.md
+++ b/docs/guide/options.md
@@ -96,6 +96,24 @@ Learn more about [Axe-core runtime options](https://github.com/dequelabs/axe-cor
Used only to delay the first check.
+## element
+
+| Type | Default |
+| -------- | -------- |
+| String | `null` |
+
+A [CSS selector](https://github.com/dequelabs/axe-core/blob/develop/doc/developer-guide.md#supported-css-selectors) that selects the default portion of the document to be analyzed. Once it's set up, it's used with manually checks using [$axe.run](/guide/api.html#run).
+
+```js
+Vue.use(VueAxe, {
+ element: '#app'
+})
+```
+
+::: tip
+Even the CSS selector accepts `Document` or `HTMLElement` objects; if the `querySelector` is used before the page loads, an empty object may be registered, causing undesired behaviour
+:::
+
## style
| Type |