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

---
 .../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 d2b273d3968..bfffbfc5183 100644
--- a/public/app/features/dashboard/containers/DashboardPage.tsx
+++ b/public/app/features/dashboard/containers/DashboardPage.tsx
@@ -1,4 +1,5 @@
 import { cx } from '@emotion/css';
+import { FocusScope } from '@react-aria/focus';
 import React, { PureComponent } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 
@@ -371,7 +372,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>
+          )}
         </Page>
         {queryParams.editview && (
           <DashboardSettings