Integrate Pa11y Automated Accessibility Testing

[kivuvarosekivuvan]

Description

• To improve the accessibility of our platform and ensure that all contributors' code meets the required standards, this pull request integrates the Pa11y automated accessibility testing tool into our development workflow.

NOTE: This is something that I am still trying to figure out, things like testing for a modal/components we have because at the moment this can test the page individually with the different commands provided to test each page, however I'm open to receive any comment

Key Changes

• Install Pa11y: Pa11y is installed as a development dependency in the project using the command npm install pa11y --save-dev.
• Creating Pa11y Configuration File: A new file pa11y.config.js is added in the root of the project, which contains the configuration options for the Pa11y tests. This includes settings such as the timeout, headers, logging, and the WCAG standard to be used.
• Integrate Pa11y into the Build Process: Scripts are added ( "test:map": "pa11y --config pa11y.config.js 'http://localhost:4200/map'",
  "test:feed": "pa11y --config pa11y.config.js 'http://localhost:4200/feed'",
  "test:activity": "pa11y --config pa11y.config.js 'http://localhost:4200/activity'",
  "test:general": "pa11y --config pa11y.config.js 'http://localhost:4200/settings/general'",)
• Document on the Integration Steps: Getting started

Screenshot

[Ifycode]

@kivuvarosekivuvan nice work on integrating pally.

I have left some comments for here on this PR, and some in slack.

[Ifycode]

@kivuvarosekivuvan for the package-lock.json file, let's approach it like this to resolve conflicts. And also because the package-lock.json shouldn't even be showing up here since it's generated (maintainers will do that work of generating it for contributors).

Restore the package-lock.json to original, the add and commit only the package-lock file, then push.

If your package-lock file changes again, just ensure not to add, commit and push it along with the other the files you have worked on.

[Angamanga]

@kivuvarosekivuvan This is really, really useful! Do you think there is other useful commands we could use? Maybe a custom-command where one can paste in the url to test. Like npm run test:custom http://localhost:4200/feed/108356/view?page=1&mode=POST Not sure if that would work but I think it could be an interesting thing.

[kivuvarosekivuvan]

@Angamanga Sure, I can definitively try this