fix: accessibility - color contrast and keyboard navigation

[kewitham]

Summary

Our team at ada.gov uses Netlify CMS. Recently Terri Youngblood, the accessibility consultant for the DOJ Civil Rights Section, did an audit of Netlify to verify its accessibility and identified some issues. This PR addresses those concerns - specifically color contrast, and keyboard navigation updates.

Test plan

1. Verify that the color contrast for the elements now fulfill the contrast ratio requirements:

i.e.
Before

After

Note: I used this tool to darken the colors in question until they met the minimum contrast requirements.

2. Verify that you are able to navigate out of the editor panel by using the esc key.
3. Verify that you are able to tab through the media asset modal.

Checklist

Please add a x inside each checkbox:

• I have read the contribution guidelines.

A picture of a cute animal (not mandatory but encouraged)

[netlify]

✅ Deploy Preview for decap-www ready!

Name	Link
🔨 Latest commit	88f8e24
🔍 Latest deploy log	https://app.netlify.com/sites/decap-www/deploys/645569e6d3e54e00089a7545
😎 Deploy Preview	https://deploy-preview-6757--decap-www.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[martinjagodic]

Hi @kewitham thanks for this contribution.

This product supports many languages, so aria labels should be translated also. I also don't understand why the Russian translation was modified, perhaps it's just a merge issue?

[kewitham]

Hi @kewitham thanks for this contribution.

This product supports many languages, so aria labels should be translated also. I also don't understand why the Russian translation was modified, perhaps it's just a merge issue?

@martinjagodic The Russian translation updates are just formatting updates. Do you have an internal resource for translating the aria labels? What are the next steps there?

[samo4]

It would be nice if this is split into multiple PRs which encompass logical areas of the changes. I don't have a firm opinion on how to structure this, but first I would recommend moving the formatting of russian translations to separate PR. Also separate PR: aria labels should be split from minor accessibility improvements. That's because currently they need to be translated.

[kewitham]

It would be nice if this is split into multiple PRs which encompass logical areas of the changes. I don't have a firm opinion on how to structure this, but first I would recommend moving the formatting of russian translations to separate PR. Also separate PR: aria labels should be split from minor accessibility improvements. That's because currently they need to be translated.

@samo4 @martinjagodic I have removed the aria label updates and formatting updates from this PR. I will submit another one with just the aria updates

[kewitham]

@samo4 @martinjagodic checking back in on this PR - is it good to merge now?

[martinjagodic]

@demshy since you're working on updating the markdown editor, is this PR conflicting with your efforts?

[demshy]

Some of it for sure, because we had to basically rewrite all keyboard events. I don't mind if this is merged though.

I will make sure the escape key is handled properly in the new handlers.