From 0a4d2bbe3d3813cba65fea88de3a2285840992f6 Mon Sep 17 00:00:00 2001
From: Polina Boneva <13227501+polibb@users.noreply.github.com>
Date: Tue, 30 Aug 2022 13:04:41 +0300
Subject: [PATCH] Add FocusScope to PanelEditor when open in the Dashboard Page
 so that a11y focus never catches invisible content. (#54400) (#54430)

(cherry picked from commit ef3205050804a746dffc19d1fbb792fe1177c6d8)
---
 .../app/features/dashboard/containers/DashboardPage.tsx  | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/public/app/features/dashboard/containers/DashboardPage.tsx b/public/app/features/dashboard/containers/DashboardPage.tsx
index ef9f5b15212..3c06ee07fd8 100644
--- a/public/app/features/dashboard/containers/DashboardPage.tsx
+++ b/public/app/features/dashboard/containers/DashboardPage.tsx
@@ -1,3 +1,4 @@
+import { FocusScope } from '@react-aria/focus';
 import classnames from 'classnames';
 import React, { PureComponent } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
@@ -406,7 +407,13 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
         <DashboardGrid dashboard={dashboard} viewPanel={viewPanel} editPanel={editPanel} />
 
         {inspectPanel && <PanelInspector dashboard={dashboard} panel={inspectPanel} />}
-        {editPanel && <PanelEditor dashboard={dashboard} sourcePanel={editPanel} tab={this.props.queryParams.tab} />}
+        {editPanel && (
+          <FocusScope contain autoFocus restoreFocus>
+            <section>
+              <PanelEditor dashboard={dashboard} sourcePanel={editPanel} tab={this.props.queryParams.tab} />
+            </section>
+          </FocusScope>
+        )}
         {queryParams.editview && <DashboardSettings dashboard={dashboard} editview={queryParams.editview} />}
       </Page>
     );