[EuiAccordion] Fix accordion right arrow display when combined with extraAction

[TAYTS]

Summary

Fixed #3881: EuiAccordionarrow display right with extra action styling.

Checklist

• Check against all themes for compatibility in both light and dark modes
• Checked in mobile
• Checked in Chrome, Safari, Edge, and Firefox
• Props have proper autodocs
• Added documentation
• Checked Code Sandbox works for the any docs 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?

[thompsongl]

Thanks, @TAYTS
Is there still work to be done on this PR?

When it's ready please mark as 'Ready for review' and check or strikethrough the checklist items to reflect what you've done (this will need a changelog entry).

[cchaos]

I think they're waiting on an answer from me to a question they posed in the issue: #3881 (comment)

[cchaos]

Jenkins, test this

[kibanamachine]

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

[cchaos]

Answering questions from #3881 (comment)

Detail 1: Is it ok for the buttonClassName prop to only apply to the text button and exclude the icon?

The problem with that is that it will break the visual for anyone using buttonClassName to style the accordion to their needs. I would say it is ok to move the arrow out of the buttonClassName only if the position for the arrow is on the right or none.

Detail 2: Is it ok for the icon highlight when focus to be separated from the text button?

Yes, testing in your current implementation, when the icon is on the right, it's ok to not show the focus ring.

---

I did notice, however, that in this PR, the none option is showing a placement and focus of an arrow that doesn't exist.

[cchaos]

Jenkins, test this

[kibanamachine]

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

[cchaos]

Jenkins, test this

[kibanamachine]

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

[cchaos]

Nice! All the logic looks great. Thanks for handling the accessibility portions as well. My comments are mostly patterns we like to follow in EUI specifically. They should be easy to follow, but if I didn't explain well, just holler.

You'll also need to update the jest snapshots.

[cchaos]

Jenkins, test this

[kibanamachine]

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

[cchaos]

Jenkins, test this

[kibanamachine]

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

[cchaos]

🎉 Looks great! Thanks for making all those changes. I also checked the screen-reader readout and it works properly when focused.

[legrego]

Thanks so much for this, @TAYTS!