A11y: Add Dashboard Settings to Pa11y CI and Refactor local a11y report (#54476)

.pa11yci-pr.conf.js

@@ -1,3 +1,48 @@
+var dashboardSettings = [
+  {
+    url: '${HOST}/d/O6f11TZWk/panel-tests-bar-gauge?orgId=1&editview=settings',
+    wait: 500,
+    rootElement: '.main-view',
+    threshold: 0,
+  },
+  {
+    url: '${HOST}/d/O6f11TZWk/panel-tests-bar-gauge?orgId=1&editview=annotations',
+    wait: 500,
+    rootElement: '.main-view',
+    threshold: 0,
+  },
+  {
+    url: '${HOST}/d/O6f11TZWk/panel-tests-bar-gauge?orgId=1&editview=templating',
+    wait: 500,
+    rootElement: '.main-view',
+    threshold: 0,
+  },
+  {
+    url: '${HOST}/d/O6f11TZWk/panel-tests-bar-gauge?orgId=1&editview=links',
+    wait: 500,
+    rootElement: '.main-view',
+    threshold: 0,
+  },
+  {
+    url: '${HOST}/d/O6f11TZWk/panel-tests-bar-gauge?orgId=1&editview=versions',
+    wait: 500,
+    rootElement: '.main-view',
+    threshold: 0,
+  },
+  {
+    url: '${HOST}/d/O6f11TZWk/panel-tests-bar-gauge?orgId=1&editview=permissions',
+    wait: 500,
+    rootElement: '.main-view',
+    threshold: 9,
+  },
+  {
+    url: '${HOST}/d/O6f11TZWk/panel-tests-bar-gauge?orgId=1&editview=dashboard_json',
+    wait: 500,
+    rootElement: '.main-view',
+    threshold: 2,
+  },
+];
+
 var config = {
   defaults: {
     concurrency: 1,
@@ -43,12 +88,7 @@ var config = {
       rootElement: '.main-view',
       threshold: 0,
     },
-    {
-      url: '${HOST}/d/O6f11TZWk/panel-tests-bar-gauge?orgId=1&editview=settings',
-      wait: 500,
-      rootElement: '.main-view',
-      threshold: 0,
-    },
+    ...dashboardSettings,
     {
       url: '${HOST}/?orgId=1&search=open',
       wait: 500,

.pa11yci.conf.js

@@ -1,3 +1,40 @@
+var dashboardSettings = [
+  {
+    url: '${HOST}/d/O6f11TZWk/panel-tests-bar-gauge?orgId=1&editview=settings',
+    wait: 500,
+    rootElement: '.main-view',
+  },
+  {
+    url: '${HOST}/d/O6f11TZWk/panel-tests-bar-gauge?orgId=1&editview=annotations',
+    wait: 500,
+    rootElement: '.main-view',
+  },
+  {
+    url: '${HOST}/d/O6f11TZWk/panel-tests-bar-gauge?orgId=1&editview=templating',
+    wait: 500,
+    rootElement: '.main-view',
+  },
+  {
+    url: '${HOST}/d/O6f11TZWk/panel-tests-bar-gauge?orgId=1&editview=links',
+    wait: 500,
+    rootElement: '.main-view',
+  },
+  {
+    url: '${HOST}/d/O6f11TZWk/panel-tests-bar-gauge?orgId=1&editview=versions',
+    wait: 500,
+    rootElement: '.main-view',
+  },
+  {
+    url: '${HOST}/d/O6f11TZWk/panel-tests-bar-gauge?orgId=1&editview=permissions',
+    wait: 500,
+    rootElement: '.main-view',
+  },
+  {
+    url: '${HOST}/d/O6f11TZWk/panel-tests-bar-gauge?orgId=1&editview=dashboard_json',
+    wait: 500,
+    rootElement: '.main-view',
+  },
+];
 var config = {
   defaults: {
     concurrency: 1,
@@ -39,11 +76,7 @@ var config = {
       wait: 500,
       rootElement: '.main-view',
     },
-    {
-      url: '${HOST}/d/O6f11TZWk/panel-tests-bar-gauge?orgId=1&editview=settings',
-      wait: 500,
-      rootElement: '.main-view',
-    },
+    ...dashboardSettings,
     {
       url: '${HOST}/?orgId=1&search=open',
       wait: 500,

scripts/generate-a11y-report.sh

@@ -26,8 +26,11 @@ else
   ./scripts/grafana-server/wait-for-grafana
 fi
 
-# Run accessibility command
-yarn dlx --quiet pa11y-ci@3.0.1 --config .pa11yci.conf.js --json > pa11y-ci-results.json
+
+# Use docker grafana docker-puppetter image
+# run pa11y ci command
+# output wil be used to generate html report
+HOST=host.docker.internal docker run --add-host host.docker.internal:host-gateway -e HOST -v ${PWD}:/grafana grafana/docker-puppeteer:1.1.0 pa11y-ci --config /grafana/.pa11yci.conf.js --json > pa11y-ci-results.json
 
 # Generate HTML report
 yarn dlx pa11y-ci-reporter-html@3.0.1 pa11y-ci-reporter-html