[8.15] Fixes accordion disclosure keyboard focus border (#190436) (#1…

…90463)

# Backport

This will backport the following commits from `main` to `8.15`:
- [Fixes accordion disclosure keyboard focus border
(#190436)](#190436)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Bryce
Buchanan","email":"75274611+bryce-b@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-08-13T21:44:57Z","message":"Fixes
accordion disclosure keyboard focus border (#190436)\n\n##
Summary\r\n\r\nThis fixes keyboard navigation focus border around the
accordion element\r\non the Exploratory
View.\r\n\r\n\r\nhttps://github.com/user-attachments/assets/e863f52a-9745-4f55-acc5-d2aa12464f3c\r\n\r\n\r\n###
Checklist\r\n\r\nDelete any items that are not applicable to this
PR.\r\n\r\n- [x] Any UI touched in this PR is usable by keyboard only
(learn more\r\nabout [keyboard
accessibility](https://webaim.org/techniques/keyboard/))\r\n- [x] Any UI
touched in this PR does not create any new axe failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"6ee8051a07370a41727b4f0eb31cde905538c189","branchLabelMapping":{"^v8.16.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","backport:prev-minor","ci:project-deploy-observability","Team:obs-ux-management","v8.16.0"],"title":"Fixes
accordion disclosure keyboard focus
border","number":190436,"url":"https://github.com/elastic/kibana/pull/190436","mergeCommit":{"message":"Fixes
accordion disclosure keyboard focus border (#190436)\n\n##
Summary\r\n\r\nThis fixes keyboard navigation focus border around the
accordion element\r\non the Exploratory
View.\r\n\r\n\r\nhttps://github.com/user-attachments/assets/e863f52a-9745-4f55-acc5-d2aa12464f3c\r\n\r\n\r\n###
Checklist\r\n\r\nDelete any items that are not applicable to this
PR.\r\n\r\n- [x] Any UI touched in this PR is usable by keyboard only
(learn more\r\nabout [keyboard
accessibility](https://webaim.org/techniques/keyboard/))\r\n- [x] Any UI
touched in this PR does not create any new axe failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"6ee8051a07370a41727b4f0eb31cde905538c189"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/190436","number":190436,"mergeCommit":{"message":"Fixes
accordion disclosure keyboard focus border (#190436)\n\n##
Summary\r\n\r\nThis fixes keyboard navigation focus border around the
accordion element\r\non the Exploratory
View.\r\n\r\n\r\nhttps://github.com/user-attachments/assets/e863f52a-9745-4f55-acc5-d2aa12464f3c\r\n\r\n\r\n###
Checklist\r\n\r\nDelete any items that are not applicable to this
PR.\r\n\r\n- [x] Any UI touched in this PR is usable by keyboard only
(learn more\r\nabout [keyboard
accessibility](https://webaim.org/techniques/keyboard/))\r\n- [x] Any UI
touched in this PR does not create any new axe failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"6ee8051a07370a41727b4f0eb31cde905538c189"}}]}]
BACKPORT-->

Co-authored-by: Bryce Buchanan <75274611+bryce-b@users.noreply.github.com>

x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/series_editor/series.tsx

@@ -63,7 +63,8 @@ export function Series({ item, isExpanded, toggleExpanded }: Props) {
         aria-label={ACCORDION_LABEL}
         onToggle={toggleExpanded}
         arrowDisplay={!seriesProps.series.dataType ? 'none' : undefined}
-        extraAction={
+        buttonElement="div"
+        buttonContent={
           <EuiFlexGroup alignItems="center" gutterSize="s" wrap>
             <EuiFlexItem grow={false}>
               <EuiFlexGroup alignItems="center" responsive={false} gutterSize="s">