Add Accessibility Tests

[dan-mba]

Fixes Issue

Closes #2200

Changes proposed

Add accessibility tests using axe-core plugin for Playwright

Check List (Check all the applicable boxes)

• [x] My code follows the code style of this project.
• [ ] My change requires changes to the documentation.
• [ ] I have updated the documentation accordingly.
• [ ] All new and existing tests passed.
• [x] This PR does not contain plagiarized content.
• [x] The title of my pull request is a short description of the requested changes.

[dan-mba]

Accessibility issues on Home Page:

1. Add lang attribute to html tag
2. GitHub icon link needs aria-label attribute
3. Increase contrast ratio for "Users" purple box (current 2.98, required 4.5)
4. Increase contrast ratio for "Eddie Jaoude's" link (current 3.68, required 4.5)
5. Increase contrast ratio for "instructions" link (current 3.68, required 4.5)

[dan-mba]

Issues on profile page (eddiejaoude):

1. Increase contrast ratio for twitter icon links (current 2.58, required 4.5)
2. Increase contrast ratio for youtube icon links (current 3.99, required 4.5)
3. Increase contrast ratio for codeforces icon links (current 3.77, required 4.5)
4. Increase contrast ratio for dollar icon links (current 3.94, required 4.5)
5. Increase contrast ratio for "Powered by EddieHub" (current 2.53, required 4.5)
6. Increase contrast ratio for "Donate with gitHub Sponsors" (current 2.53, required 4.5)
7. Social icons links need an aria-label

[dan-mba]

I created a node script to test all the profile link icon colors for compatibility with AA contrast. I found 17 of 35 icons fail.

The results & my test code are on GitHub in this repo I will look into creating a better testing profile to use for accessibility tests that uses all of the icons.

[eddiejaoude]

@dan-mba I worry conflicts might occur, could we merge this in sooner as I think this can add value as we go along, let me know what you think?

[dan-mba]

@dan-mba I worry conflicts might occur, could we merge this in sooner as I think this can add value as we go along, let me know what you think?

@eddiejaoude I was hoping to wait until the tests pass before adding them. I could put together a PR to fix all the remaining issues in a day.

[eddiejaoude]

@eddiejaoude I was hoping to wait until the tests pass before adding them. I could put together a PR to fix all the remaining issues in a day

ok no worries, no rush/stress please, I really appreciate what you are doing - let me know if I can do anything to help

[dan-mba]

ok no worries, no rush/stress please, I really appreciate what you are doing - let me know if I can do anything to help

I had considered handling all the issues myself to begin with, but wanted to offer people the chance for green squares. All of the changes are 1 line, so I thought people might be interested. I got some interest, but little follow through. As is typical of web dev in general, shiny features draw more interest over accessibility.

[eddiejaoude]

wanted to offer people the chance for green squares

love that @dan-mba 👍

All of the changes are 1 line, so I thought people might be interested

Do you want me to do some shoutouts on Discord and Twitter to get more people involved?

[dan-mba]

Do you want me to do some shoutouts on Discord and Twitter to get more people involved?

I think for this issue, it is best for me to finish it up so we can get this PR merged.

I will remember to get you involved if progress is lacking the next time I open an issue looking for contributors.

[dan-mba]

As soon as #2545 gets merged, this PR should be ready for review.