Improve heading semantics

[pdehaan]

aXe is telling me on https://metrics.mozilla.com/protected/usage-report-demo/dashboard/user-activity that "Heading levels should only increase by one". I think this is because we have an <h3> 👉 <h5>, but not an intermediate <h4> tag.

<h3 id="metrics-heading">Metrics</h3>
...
<h5 class="striped"><span>Yearly Active Users</span></h5>

I reckon we should possibly bump this from an H5 to an H4:

ensemble/src/components/views/MetricOverview.js

Line 91 in 9ebbb3d

<StripedHeader tag="h5" label={props.title} />

[openjck]

@pdehaan Good catch. Is this the project you're testing with?

[openjck]

I've looked into this a little bit. There are two problems:

1. Heading levels jump from h3 to h5 on pages that do not have sections
2. Headings that are display: none (like h3#metrics-heading) are treated as though they do not exist at all

I'll have a commit for #1 in a second. #2 is a little trickier. I think there's value to having markup that isn't shown visually, but axe thinks that such a situation is bad for accessibility.

[openjck]

While fixing #2, I'd like to spend some more time going through the site with HeadingsMap. There are some other minor issues. For example, the headings in the footer are set as h3 which doesn't seem like a good choice.

[pdehaan]

Is this the project you're testing with?

Yes, I use the aXe Firefox/Chrome plugins directly, or sometimes indirectly via the lighthouse or webhint (formerly sonarwhal) scanners.