Accordion doesn't work in screen readers

[robdodson]

I noticed when you enter the 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." 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:

<sc-accordion>
  <sc-tabs role="tablist">
    <sc-pane role="presentation">
      <button role="tab" aria-controls="panel1">Panel 1</button>
    </sc-pane>
    ...
  </sc-tabs>
  <sc-panel id="panel1" role="tabpanel">Lorem ipsum...</sc-panel>
  ...
</sc-accordion>

[robdodson]

Also, the accordion pattern in the Authoring Practices guide doesn't mention aria-controls, instead it suggests having aria-labelledby relationship. But the tab panel pattern does mention using aria-controls and we're using the same role in both cases so... not sure which one is correct but it feels like aria-controls would be the one to use?

[surma]

I think we can make that work. I might give this a run after CDS