Accordion first pass

[bryanjonker-illinois]

Questions:

• This doesn't have any of the styling attached. How do we want to handle this?
• I'm not happy about it calling render() when it opens/closes. Wondering if there's a pure JS way of handling this?
• This is in JS -- should it be in TS?
• I added a test case to try out "single". Thinking of renaming "data-il-behavior" to something like "data-il-multiple-open"
• I also had to change the tests to focus on the buttons.

I'm happy with this process. Looking forward to talking with you at our meeting.

[bryanjonker-illinois]

Answers:

• This doesn't have any of the styling attached. How do we want to handle this? style as normal and we will refactor to combine styles as needed
• I'm not happy about it calling render() when it opens/closes. Wondering if there's a pure JS way of handling this? yes, there probably is -- make the panels more dumb and tie everything to styles -- do not modify the dom
• This is in JS -- should it be in TS? no
• I added a test case to try out "single". Thinking of renaming "data-il-behavior" to something like "data-il-multiple-open" Matt will come up with a better name
• I also had to change the tests to focus on the buttons. no longer needed

[bryanjonker-illinois]

@mattsharkey -- updates are done. Let me know what you think.

Tests still fail, but that's because the tests need to choose the button, not the text underneath. I think this will work if you change await page.getByText('Alumni', { exact: true }) to await page.getByRole('button', { name: 'Alumni' }). I think this is a truer test because it confirms the role is button, which is important for assistive technology.

[bryanjonker-illinois]

@mattsharkey -- changes based on our talk are done.

Accessibility notes:

• Header slot is outside button role in order for it to be read. This should be a heading, but not required.
• Button is unlabelled but is assigned:
  • aria-expanded to reflect if it is expanded or not
  • aria-labelled-by pointing to ID of header
  • aria-controls pointing to ID of panel it controls
• Panel is assigned:
  • role of region to signify a separate area
  • aria-labelledby pointing to ID of header (all regions require a label)

According to the design, header should have a fixed size, no matter which heading level it has. I added the CSS, not sure if this is the right solution?