Headers should be inside of a section

[MinThaMie]

@jenweber tried to fix this problem in #36, but with the redesign-branch merged a lot changed. So this should be started from scratch.

Before

<h2 id="some-title">Some title</h2>
<section aria-labelledby="some-title">
  <p>Ember is doing better at accessibility</p>
<section>

After

<section aria-labelledby="some-title">
  <h2 id="some-title">Some title</h2>
  <p>Ember is doing better at accessibility</p>
<section>

[DeRaowl]

Hey, @MinThaMie it would be great if you can assign this issue to me.

[mansona]

@MinThaMie we should probably chat about this before any work is done. I think there is explicit work to move headers outside of the section which was motivated by a11y 🤔

[DeRaowl]

Hi, I was working on the below task and observed that Manson mentioned that this needs to be discussed before picking this up. Can anyone let me know what the discussion made around this?

[MelSumner]

Section elements should wrap the content and the heading element should be the first item inside. 👍

[mansona]

So the fact that sections are wrapped at all is done by a showdown plugin that wraps the HTML output from the markdown https://github.com/mansona/showdown-section-groups . You can see in the README what the before and after examples look like 👍

I guess we can update this plugin to move the header inside the section 🤔 @MelSumner do you know if we still need the aria-labelledby="some-title" on the section or can we also remove this?

[MelSumner]

The aria-labelledby is still useful because of implementation differences. 👍

[kennstenicht]

Is anyone working on the ticket, otherwise I might have a look at it in the near future.