Fixes accordion disclosure keyboard focus border (#190436)

## Summary

This fixes keyboard navigation focus border around the accordion element
on the Exploratory View.


https://github.com/user-attachments/assets/e863f52a-9745-4f55-acc5-d2aa12464f3c


### Checklist

Delete any items that are not applicable to this PR.

- [x] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [x] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)
This commit is contained in:
Bryce Buchanan 2024-08-13 14:44:57 -07:00 committed by GitHub
parent be2b853062
commit 6ee8051a07
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -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">