EuiAccordion does not respect `arrowDisplay="right"` when `extraAction` is configured

[legrego]

The EuiAccordion supports changing the location of the arrow via the arrowDisplay prop.
When set to right, the arrow should render to the righthand side of the component, like the docs site shows:

This works fine for a basic accordion, but if the accordion is configured with an extraAction, then the arrowDisplay prop is ignored, and it always renders to the left.

        <EuiAccordion
          id={`featureCategory_${category.id}`}
          arrowDisplay="right"
          buttonContent={<div>Some button content</div>}
          extraAction={<div>Some extra action</div>}
        >
          <div>
            Some content here
          </div>
        </EuiAccordion>

Discovered this while trying to implement design changes to the Spaces Management screen in Kibana: https://www.figma.com/file/dBta1q3JgFe3Cfhw5h76Oq/%5BIn-Progress%5D-Spaces-%26-Roles-Solution-Grouping?node-id=103%3A1234

cc @MichaelMarcialis

[TAYTS]

Hi, I would like to work on this issue. May I know what should be the expected/correct behaviour? Should the arrow show before or after the extra action?

[cchaos]

Thanks @TAYTS ! The arrow should be after the extra action.

[TAYTS]

@cchaos I have implemented the fix but there are some details would like to clarify for this specific configuration?

Detail 1: Is it ok for the buttonClassName prop to only apply to the text button and exclude the icon?
Detail 2: Is it ok for the icon highlight when focus to be separated from the text button?

[cchaos]

@TAYTS Since we're now talking more specifically about your implementation, I'm going to answer your questions in your PR #3971