Bug fixes: Post a Job, a11y issues

[kldickenson]

#151

A11y Issues (per AxeV4.6.1 Chrome extension):

• Page must contain a level-one heading (x1)
  Solved: added an H1 at the top of the page, "Post a Job", to src/pages/PostAJob.js
  Also changed "Inexperience..." status alert from H1 to H2 to avoid hierarchy confusion when the alert is shown.

• Buttons must have descriptive text (x17)
  x1 = Solved: added aria-label='navigation' to .nav-button in src/globel/Nav.js
  x16 = All related to the Job Description editor created with react-quill which has it's own accessibility issues (see quilljs/quill, Suggestions for toolbar accessibility #2038

• svg elements with an img role have an alternative text (x4)

  • x1 = Solved: added title='mobile menu icon' to src/assets/images/svg/menu-icon.js
  • x3 = Solved: added title to SVG in src/assets/images/svg/check-solid.js

• Elements must have sufficient color contrast (x6)

  • All on PostAJob.js
  • x1 = Solved: "disclaimer" .text-xs.opacity-75, upped text wight to text-blue-900
  • x1 = Solved: "Select Your Tier", upped text weight to text-teal-900, would work with text-blue-900 as well
  • x2 = Solved: "How to Apply" radio buttons, added .text-blue-800 on label tags
  • x2 = Ignored: Warnings for h2s with black text and textured backgrounds. They look fine.

Files edited:

• src/pages/PostAJob.js (H1 and color contrast issues)
• src/components/form/PostAJobForm.js (color contrast)
• src/components/global/Nav.js (button text issue)
• assets/images/svg/menu-icon.js (svg issue)
• assets/images/svg/check-solid.js (svg issue)

Remaining Issues

• Buttons must have descriptive text (x16) - All related to the Job Description editor created with react-quill, see quilljs/quill, Suggestions for toolbar accessibility #2038

With these changes, Lighthouse score has improved to 94 (from 92).

[netlify]

‼️ Deploy request for affectionate-goldberg-7cf473 rejected.
Learn more about Netlify's sensitive variable policy

🔨 Explore the source changes: 311b401

[drewclem]

Looks great to me!