Fix: HTML headings on job cards

[thienautran]

Description of the issue

For a given job card, the job Title and company name are the first major heading in a given card. Currently, these are not using semantic html heading tags such as h1, h2 etc. The current implementation shows text inside span tags.
Heading tags here enable users to navigate by heading when using assistive technologies. See WCAG22 2.4.6

suggested fix

To maintain semantic html as per WCAG spec, I would suggest making a h1 at the top of the main list component, then each card being a h2 or h3, depending on the level of nesting.

In the page file that renders the job list
/frontend/src/app/jobs/page.tsx

• Put a h1 above the JobList

In the JobCard component
/frontend/src/components/jobs/job-card.tsx

• wrap the span tags with a h2 or h3 depending on the level of nesting elsewhere

            <div
              className={
                "flex justify-center flex-col flex-1 min-w-0 space-y-0.5"
              }
            >

            <h2>
              
              <span className="text-sm lg:text-md font-bold line-clamp-2 leading-tight pr-2">
                {job.title}
              </span>
              <span className="text-xs line-clamp-1 leading-tight">
                {job.company.name}
              </span>

            </h2>

            </div>