Allow EuiAccordion state to be controlled from outside

[anishagg17]

Summary

Fixes: #2130

Sceenshot

Checklist

- [ ] Check against all themes for compatibility in both light and dark modes
- [ ] Checked in mobile
- [ ] Checked in IE11 and Firefox

• Props have proper autodocs
• Added documentation examples
  - [ ] Added or updated jest tests
  - [ ] Checked for breaking changes and labeled appropriately
  - [ ] Checked for accessibility including keyboard-only and screenreader modes
• A changelog entry exists and is marked appropriately

[kibanamachine]

Since this is a community submitted pull request, a Jenkins build has not been kicked off automatically. Can an Elastic organization member please verify the contents of this patch and then kick off a build manually?

[cchaos]

Thanks @anishagg17 for this start. I don't think this prop quite fits the ask from the issue. The issue isn't asking to force a consistent state (here, closed), but to allow the toggling of the accordion to happen via an outside trigger.

So think of a button that exist outside of the accordion that will either toggle the current state of the accordion or try to open it no matter the state, or close it no matter the state. More similar to a high-order-component (one that completely handles the state of a child component).

[anishagg17]

OKay would make changes accordingly, can you suggest prop name?

[anishagg17]

now it works as

[chandlerprall]

When given this prop, the interaction is very hard to understand:

I think onToggle should not update the state when it is being forced, i.e. clicking on a forced-open or forced-closed accordion is a no-op. The onToggle prop should still be called

[anishagg17]

All changes have been made

[chandlerprall]

Small copy changes, otherwise this looks good!

[chandlerprall]

jenkins test this

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3240/

[chandlerprall]

jenkins test this

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3240/

[chandlerprall]

Looks like something in the example got disconnected - I'd guess its the accessibility fix. Both buttons toggle the option on/off and neither highlight.

https://eui.elastic.co/pr_3240/#/layout/accordion

[anishagg17]

I have resolved the issue

[chandlerprall]

jenkins test this

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3240/

[chandlerprall]

thanks again @anishagg17 !