a11y quick wins: Having landmarks for pages/components

[rajasegar]

While running through the axe Audit plugin in Chrome I came across these two moderate issues:

1. Document must have one main landmark

2. All page content must be contained by landmarks

[rajasegar]

I tried the following fixes, it worked:

super-rentals/app/components/jumbo.hbs

Line 1 in 5da83dd

<div class="jumbo">

- <div class="jumbo">
+ <div class="jumbo" role="banner">

super-rentals/app/components/rentals.hbs

Line 1 in 5da83dd

<div class="rentals">

- <div class="rentals">
+ <div class="rentals" role="main">

@MelSumner Your thoughts?

[rajasegar]

Also for the Rentals component, we can go for the semantic component instead of a div

super-rentals/app/components/rentals.hbs

Line 1 in 5da83dd

<div class="rentals">

- <div class="rentals">
+ <main class="rentals">

[chancancode]

Assuming @MelSumner is +1, seems good to me. Same with #148 (comment), we should be making the changes in the source along with brief explanation.

Something like this: "... Since this is going to be the main content of the page, we also gave it the "main" ARIA role to help assistive technologies comprehend our page."

[chancancode]

Ah sorry I didn't see your second comment, I agree it's a better idea to use the main element. That way we won't even have to explain it, since it's the natural thing to do (though if you want to add a short sentence to call it out, I suppose it doesn't hurt also). 👍