From 34d4f0e9f5647611d3f199e947103baf0d491878 Mon Sep 17 00:00:00 2001 From: ThaiMing3 Date: Thu, 11 Jan 2024 14:39:21 +0800 Subject: [PATCH] Added accessibility test (run by using pa11y-ci) in the partial-frontend.yml --- .github/workflows/partial-frontend.yaml | 25 ++ frontend/.pa11yci.js | 52 +++ frontend/components/App/Toast.vue | 2 +- frontend/components/Form/DatePicker.vue | 4 +- frontend/components/Form/Password.vue | 1 + frontend/components/Form/TextField.vue | 4 +- frontend/package.json | 5 +- frontend/pages/index.vue | 12 +- frontend/pages/items.vue | 1 + frontend/pages/locations.vue | 3 +- frontend/pages/profile.vue | 1 + frontend/pages/reports/label-generator.vue | 1 + frontend/pages/tools.vue | 3 +- frontend/pnpm-lock.yaml | 412 +++++++++++++++++++-- 14 files changed, 492 insertions(+), 34 deletions(-) create mode 100644 frontend/.pa11yci.js diff --git a/.github/workflows/partial-frontend.yaml b/.github/workflows/partial-frontend.yaml index c26c5f4..e24673c 100644 --- a/.github/workflows/partial-frontend.yaml +++ b/.github/workflows/partial-frontend.yaml @@ -62,3 +62,28 @@ jobs: - name: Run Integration Tests run: task test:ci + + accessibility-tests: + name: Accessibility Tests + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v3 + with: + fetch-depth: 0 + + - uses: actions/setup-node@v3 + with: + node-version: 18 + + - uses: pnpm/action-setup@v2.2.4 + with: + version: 6.0.2 + + - name: Install dependencies + run: pnpm install --save-dev pa11y-ci + working-directory: frontend + + - name: Run Accessibility Tests + run: pnpm run test:accessibility + working-directory: frontend diff --git a/frontend/.pa11yci.js b/frontend/.pa11yci.js new file mode 100644 index 0000000..02857d5 --- /dev/null +++ b/frontend/.pa11yci.js @@ -0,0 +1,52 @@ +require('dotenv').config(); + +const loginActions = [ + `set field [placeholder=''] to ${process.env.EMAIL}`, + `set field [placeholder='Password'] to ${process.env.PASSWORD}`, + "click element button[type='submit']", +]; + +module.exports = { + urls: [ + { + url: "http://localhost:3000", + }, + { + url: "http://localhost:3000/home", + actions: [ + ...loginActions, + "wait for path to be /home", + ] + }, + // { + // url: "http://localhost:3000/locations", + // actions: [ + // ...loginActions, + // "navigate to http://localhost:3000/locations", + // "wait for path to be /locations", + // "wait for element html[lang='en'] to be added", + // "wait for element head > title to be added" + // ] + // }, + // { + // url: "http://localhost:3000/profile", + // actions: [ + // ...loginActions, + // "navigate to http://localhost:3000/profile", + // "wait for path to be /profile", + // "wait for element html[lang='en'] to be added", + // "wait for element head > title to be added" + // ] + // }, + // { + // url: "http://localhost:3000/tools", + // actions: [ + // ...loginActions, + // "navigate to http://localhost:3000/tools", + // "wait for path to be /tools", + // "wait for element html[lang='en'] to be added", + // "wait for element head > title to be added" + // ] + // } + ] +}; \ No newline at end of file diff --git a/frontend/components/App/Toast.vue b/frontend/components/App/Toast.vue index 06c3944..44f94cb 100644 --- a/frontend/components/App/Toast.vue +++ b/frontend/components/App/Toast.vue @@ -12,7 +12,7 @@ }" @click="dropNotification(index)" > -
+
diff --git a/frontend/components/Form/DatePicker.vue b/frontend/components/Form/DatePicker.vue index 98b34f3..7a205bd 100644 --- a/frontend/components/Form/DatePicker.vue +++ b/frontend/components/Form/DatePicker.vue @@ -3,13 +3,13 @@ - +
- +
diff --git a/frontend/components/Form/Password.vue b/frontend/components/Form/Password.vue index 6ea5313..c24e86c 100644 --- a/frontend/components/Form/Password.vue +++ b/frontend/components/Form/Password.vue @@ -6,6 +6,7 @@ class="inline-flex p-1 ml-1 justify-center mt-auto mb-3 tooltip absolute top-11 right-3" data-tip="Toggle Password Show" @click="toggle()" + aria-label="Toggle Password Show" > diff --git a/frontend/components/Form/TextField.vue b/frontend/components/Form/TextField.vue index 16c077e..cc76cc1 100644 --- a/frontend/components/Form/TextField.vue +++ b/frontend/components/Form/TextField.vue @@ -3,13 +3,13 @@ - +
- +
diff --git a/frontend/package.json b/frontend/package.json index e63b826..aa03545 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -11,7 +11,8 @@ "typecheck": "nuxi typecheck", "test:ci": "TEST_SHUTDOWN_API_SERVER=true vitest --run --config ./test/vitest.config.ts", "test:local": "TEST_SHUTDOWN_API_SERVER=false && vitest --run --config ./test/vitest.config.ts", - "test:watch": " TEST_SHUTDOWN_API_SERVER=false vitest --config ./test/vitest.config.ts" + "test:watch": " TEST_SHUTDOWN_API_SERVER=false vitest --config ./test/vitest.config.ts", + "test:accessibility": "pa11y-ci" }, "devDependencies": { "@faker-js/faker": "^8.0.0", @@ -28,6 +29,7 @@ "h3": "^1.7.1", "isomorphic-fetch": "^3.0.0", "nuxt": "3.6.5", + "pa11y-ci": "^3.1.0", "prettier": "^2.7.1", "typescript": "^5.0.0", "vite-plugin-eslint": "^1.8.1", @@ -46,6 +48,7 @@ "autoprefixer": "^10.4.8", "daisyui": "^2.24.0", "dompurify": "^3.0.0", + "dotenv": "^16.3.1", "h3": "^1.7.1", "http-proxy": "^1.18.1", "markdown-it": "^14.0.0", diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue index 81266b5..e216894 100644 --- a/frontend/pages/index.vue +++ b/frontend/pages/index.vue @@ -132,7 +132,7 @@
-

+

HomeB x @@ -140,16 +140,16 @@

Track, Organize, and Manage your Things.

@@ -210,6 +210,7 @@ class="btn btn-primary btn-block" :class="loading ? 'loading' : ''" :disabled="loading" + style="background-color: #000100;" > Login @@ -223,6 +224,7 @@ v-if="status && status.allowRegistration" class="btn-primary btn-wide" @click="() => toggleLogin()" + style="background-color: #000100;" >