Address Lack of Landmarks about scrollodex

[heretoshleigh]

@jenndiaz Hey! I think I accidentally addressed this in PR #138. I meant for that PR to be limited to card styling, but I was playing around with some accessibility stuff on the same branch after I submitted the PR and didn't realize the subsequent commits would get pulled in (which there were several of because I also made and reverted a mistake). Ack, sorry for the confusion!

All I did was wrap the CardsDisplay component in a main tag in App.js. If I understand the issue correctly from my research, this is all we need, since we already have header and footer elements, which wrap all the other text and serve as banner and contentinfo landmarks. But if additional work is needed, happy to continue researching this. Thank you for the opportunity to learn about it!

[jenndiaz]

@heretoshleigh can confirm adding the <main> addresses this!!

but I think we could we get rid of the extra div now. This would clean up the code some and avoid using a non semantic tag.

<main>
    <div>
      <CardsDisplay />
    </div>
</main>

I'll leave the issue open for now, if you take a look at it and can confirm it can be removed feel free to put up another PR removing it and link this issue.

[heretoshleigh]

@jenndiaz Thanks, Jenn! I took a look and see no problem with removing the extra div. Just submitted the PR.

[jenndiaz]

addressed by pr #134 #138