Bug: Post a Job, a11y issues

bug fixes for accessibility issues found with Axe
ProjectProtege · Nov 30, 2020 · 311b401 · 311b401
1 parent 4de6c1a
commit 311b401
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 8 deletions.
diff --git a/src/assets/images/svg/check-solid.js b/src/assets/images/svg/check-solid.js
@@ -3,6 +3,7 @@ import React from 'react'
 const Check = () => {
   return (
     <svg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>
+      <title>Check mark</title>
       <path
         fill='currentColor'
         d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'

diff --git a/src/assets/images/svg/menu-icon.js b/src/assets/images/svg/menu-icon.js
@@ -4,6 +4,7 @@ const MenuIcon = () => (
   <svg
     className='fill-current'
     role='img'
+    title='mobile menu icon'
     xmlns='http://www.w3.org/2000/svg'
     viewBox='0 0 448 512'
   >

diff --git a/src/components/form/PostAJobForm.js b/src/components/form/PostAJobForm.js
@@ -226,7 +226,7 @@ const PostAJobForm = ({ receivingJobData, recievingLogo2, jobData }) => {
                   </span>
 
                   <div className='text-sm mb-3 text-blue-600'>
-                    <label className='mr-6'>
+                    <label className='mr-6 text-blue-800'>
                       <input
                         type='radio'
                         name='link-type'
@@ -237,7 +237,7 @@ const PostAJobForm = ({ receivingJobData, recievingLogo2, jobData }) => {
                       />
                       URL
                     </label>
-                    <label>
+                    <label className=' text-blue-800'>
                       <input
                         type='radio'
                         name='link-type'

diff --git a/src/components/global/Nav.js b/src/components/global/Nav.js
@@ -19,6 +19,7 @@ const Nav = () => {
       >
         <button
           className='nav-toggle relative md:hidden h-6 w-6 mr-2'
+          aria-label='navigation'
           onClick={() => setActive((oldActive) => !oldActive)}
           type='button'
         >

diff --git a/src/pages/PostAJob.js b/src/pages/PostAJob.js
@@ -136,9 +136,12 @@ const PostAJob = ({ location }) => {
       {status === 1 && (
         <>
           <div className='container mx-auto lg:w-4/5 xl:w-7/12 mb-12 flex flex-col items-center'>
-            <h3 className='text-xl font-bold text-blue-900 mb-3'>
+            <h1 class='mb-3 text-2xl font-semibold text-blue-900'>
+              Post a Job
+            </h1>
+            <h2 className='text-xl font-bold text-blue-900 mb-3'>
               What qualifies as a junior remote job opportunity on Protegé?
-            </h3>
+            </h2>
 
             <p className='text-blue-700 text-sm lg:text-base lg:leading-relaxed mb-4 lg:text-center'>
               Our mission is to help those early in their tech career find their
@@ -172,7 +175,7 @@ const PostAJob = ({ location }) => {
               </li>
             </ul>
 
-            <p className='text-xs text-blue-600 lg:text-center lg:w-3/4 xl:w-full opacity-75'>
+            <p className='text-xs text-blue-900 lg:text-center lg:w-3/4 xl:w-full opacity-75'>
               Protegé.dev is a curated job board tailored towards junior
               developers. Each listing is reviewed, and approved or denied
               before going live. If your listing is denied, we&apos;ll contact
@@ -182,18 +185,18 @@ const PostAJob = ({ location }) => {
 
           <TierSelect receivingTierClick={receivingTierClick} tier={tier} />
 
-          <p className='text-center mb-2 text-blue-400 tracking-wide'>
+          <p className='text-center mb-2 text-teal-900 tracking-wide'>
             Select Your Tier
           </p>
         </>
       )}
 
       {status !== 1 && (
-        <h1 className='text-lg md:text-2xl text-blue-500 font-bold text-center leading-snug'>
+        <h2 className='text-lg md:text-2xl text-blue-500 font-bold text-center leading-snug'>
           Inexperienced doesn’t mean incapable.
           <br />
           Fill your role with ambition.
-        </h1>
+        </h2>
       )}
 
       <StatusBar props={status} />