Fixed: Ensure Header component uses proper semantic header HTML tag

[amarmanhala]

Changed div tag to HTML semantic element for Header component

Issue #2870

Merge checklist

• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

[changeset-bot]

🦋 Changeset detected

Latest commit: 63b936a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[amarmanhala]

Hi @joshblack, This is my PR. Please can you guide me if there is anything that I missed or any advice? Thanks

[joshblack]

Looks great! Thanks for doing this 🥳

[joshblack]

For the test failure, I think all that's left to do is update the snapshots for the header tests! You can do this by running the following command:

npm test -- -u

And then including the snapshots in a commit and pushing them up to this Pull Request. Hope that makes sense, let me know if you have any questions!

[amarmanhala]

Thank you @joshblack for your guidance 🤗. I have committed test snapshots now. Hopefully, it works now.

[joshblack]

@amarmanhala seems like just one final change, in the test file for Header (src/__tests__/Header.test.tsx) there is a test that asserts on the tagName that needs to be updated:

  it('renders a <div> and <a>', () => {
-    expect(render(<Header />).type).toEqual('div')
+    expect(render(<Header />).type).toEqual('header')
    expect(render(<Header.Link />).type).toEqual('a')
  })

After that you should be good to go! 🥳

[amarmanhala]

Thank you @joshblack for your guidance.

[joshblack]

Thanks so much for your contribution @amarmanhala! 🙌 🥳