From 6ee8051a07370a41727b4f0eb31cde905538c189 Mon Sep 17 00:00:00 2001 From: Bryce Buchanan <75274611+bryce-b@users.noreply.github.com> Date: Tue, 13 Aug 2024 14:44:57 -0700 Subject: [PATCH] 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) --- .../shared/exploratory_view/series_editor/series.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/series_editor/series.tsx b/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/series_editor/series.tsx index 7be69c2a0969f..08810e673a0e6 100644 --- a/x-pack/plugins/observability_solution/exploratory_view/public/components/shared/exploratory_view/series_editor/series.tsx +++ b/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={