"Semantic Markup with HTML and ARIA" workshop - Main heading refactor idea with context

[aguscha333]

Hi, I am currently doing the "Semantic Markup with HTML and ARIA" workshop. In that workshop there is some talk about the implementation of the h1 in the page.

It's an interesting issue. I hadn't run into this problem myself in other projects because the nav bars they have are not as complex so I didn't feel the need to add headings in the nav.

One of the things that @marcysutton mentions in the workshop is that the portal solution for the h1 is not perfect because it is a best practice for the h1 to be inside of a landmark and how in this case it would be good to have it inside the header landmark.

This got me thinking about this other possible approach that ditches the portal and uses React context instead. It looses a bit of flexibility because the portal allows you to pass children but not sure if that is really needed. If the h1 is just some text that is visually hidden and we don't want to add any other dynamic props or siblings this context approach should be more than enough.

So here is the proposed solution with context api:

We have a context at the root of the App component that holds the value of the mainHeading which is just simple text.

Then we expose a hook to all the pages that is useMainHeading Where they can set the heading for that page in particular.
That hook is made so when the page unmounts it goes back to the default heading. So if someone forgets to set the mainHeading in a page, it won't still hold the value of the previous page, it will just have the default heading text.

Then the h1 can be put inside the Header component that contains the header landmark and it gets its value from the context.

NOTE:
I'm creating this PR as a draft just to show this as an idea

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
workshop-semantics-html-aria	✅ Ready (Inspect)	Visit Preview	Sep 25, 2022 at 2:39PM (UTC)