Accordion doesn't work in screen readers

I noticed when you enter [the accordion](https://googlechrome.github.io/ui-element-samples/accordion/) using VoiceOver it announces "tab 1 of 1", whereas it should say "tab 1 of 4".

I think there are a couple issues:

- It seems like in VoiceOver a `tablist` can only contain `tab` children. Putting `tabpanel` inside `tablist` breaks everything. However the Authoring Practices Guide says ["Contained within the tablist is a set of tab/tabpanel pairs."](https://www.w3.org/TR/wai-aria-practices-1.1/#accordion) So that's a little confusing. cc @MichielBijl to confirm if `tabpanel` must live outside `tablist`.
- The `tabpanel` should go on the `.content` divs
- `sc-pane` should have `role=presentation`

I think the final structure would be something like:

```html

Panel 1

...

Lorem ipsum...
...

```