Accessibility and high contrast mode improvements

helenb commented 1 year ago

Link to Ticket On Monday

Description of Changes Made

Addresses all the high contrast mode issues in the ticket Also ensures all links in the header, footer and navigation have links clearly indicated, and hover and focus state Also applies the accessibility improvements to the header and navigation (tab ordering, aria-expanded etc) that have been applied to the main site.

How to Test

Link to changes made on preview site

To test in high contrast mode, ensure 'forced colours: active' has been selected in dev tools under 'rendering'. Then adjust the 'prefers-color-scheme' option to light or dark and test both modes.

Screenshots

Expand to show more

I haven't done screenshots as there would be quite a few, but shout if there are any in particular you would like to see.

MR Checklist

[x] Add a description of your pull request and instructions for the reviewer to verify your work.
[x] If your pull request is for a specific ticket, link to it in the description.
[x] Stay on point and keep it small so the merge request can be easily reviewed.
[ ] Consider adding unit tests, especially for bug fixes. If you don't, tell us why.
[x] Tests and linting passes.
[ ] Consider updating documentation. If you don't, tell us why.
[x] If relevant, list the environments / browsers in which you tested your changes. Chrome plus dev tools to mimic HCM

jhancock532 commented 1 year ago

These are some really helpful changes that improve the accessibility of the site!

A few extra button icons / hover effects we might want to consider as part of this MR:

In dark mode, add a style rule to show the arrows on the homepage:

Button outline for final call to action on job post page:

The richtext links in the job post page don't have a hover effect: maybe these could swap from yellow to cyan / neon light blue.

The dropdown icon doesn't show on desktop on the jobs page (this only affects dark HCM, light HCM renders fine):

An outline for the badge in the menu dropdown would be neat:

helenb commented 1 year ago

Thanks @jhancock532 I've applied all of your suggestions and will now get this over for internal testing.

torchbox / careers