Accordion Pattern: Questions about header structure and partially displayed panel content

[gaurav5430]

I have some doubts which are not directly addressed in the description / example of the accordion Pattern

• it is mentioned that the header has to be a button element, and everything inside the header should be a child of the button. Why is that? Can we not implement an accordion header where only the chevron / icon is interactive and shows/hides the panel (and the rest of the text is non interactive? if yes, would the same aria practices as mentioned in the example still apply ?

• about the variant where partial text is always visible in the panel, would it still be ok to

  • use aria-expanded = false when the partial content is visible?

• is it mandatory to use aria-controls even if the expanded content is just next in the DOM ?

[gaurav5430]

ohk, regarding the 3rd point, I guess I understand

the header button would be wrapped in a heading and hence the expanded panel would not be a direct sibling of the button, and so aria-controls would be helpful