From 9d3b701797d4b7685fbed5047da356b29edc554d Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Fri, 1 Apr 2022 11:44:48 +0100
Subject: [PATCH] Accessibility: Trap focus correctly in dashboard settings
 (#47149)

* Accessibility: Trap focus correctly in search + dashboard settings

* add accessible names for the overlays

* Undo changes to search

* missed a bit
---
 .../DashboardSettings/DashboardSettings.tsx   | 71 +++++++++++--------
 1 file changed, 42 insertions(+), 29 deletions(-)

diff --git a/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx b/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx
index 2e31a65ed96..1a0acb63656 100644
--- a/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx
+++ b/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx
@@ -1,5 +1,8 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 import { Link } from 'react-router-dom';
+import { FocusScope } from '@react-aria/focus';
+import { useDialog } from '@react-aria/dialog';
+import { useOverlay } from '@react-aria/overlays';
 import { css, cx } from '@emotion/css';
 import { Button, CustomScrollbar, Icon, IconName, PageToolbar, stylesFactory, useForceUpdate } from '@grafana/ui';
 import config from 'app/core/config';
@@ -40,6 +43,14 @@ const MakeEditable = (props: { onMakeEditable: () => any }) => (
 );
 
 export function DashboardSettings({ dashboard, editview }: Props) {
+  const ref = useRef<HTMLDivElement>(null);
+  const { overlayProps } = useOverlay({}, ref);
+  const { dialogProps } = useDialog(
+    {
+      'aria-label': 'Dashboard settings',
+    },
+    ref
+  );
   const forceUpdate = useForceUpdate();
   const onMakeEditable = useCallback(() => {
     dashboard.editable = true;
@@ -139,35 +150,37 @@ export function DashboardSettings({ dashboard, editview }: Props) {
   const styles = getStyles(config.theme2);
 
   return (
-    <div className="dashboard-settings">
-      <PageToolbar title={`${dashboard.title} / Settings`} parent={folderTitle} onGoBack={onClose} />
-      <CustomScrollbar>
-        <div className={styles.scrollInner}>
-          <div className={styles.settingsWrapper}>
-            <aside className="dashboard-settings__aside">
-              {pages.map((page) => (
-                <Link
-                  onClick={() => reportInteraction(`Dashboard settings navigation to ${page.id}`)}
-                  to={(loc) => locationUtil.getUrlForPartial(loc, { editview: page.id })}
-                  className={cx('dashboard-settings__nav-item', { active: page.id === editview })}
-                  key={page.id}
-                >
-                  <Icon name={page.icon} style={{ marginRight: '4px' }} />
-                  {page.title}
-                </Link>
-              ))}
-              <div className="dashboard-settings__aside-actions">
-                {canSave && <SaveDashboardButton dashboard={dashboard} onSaveSuccess={onPostSave} />}
-                {canSaveAs && (
-                  <SaveDashboardAsButton dashboard={dashboard} onSaveSuccess={onPostSave} variant="secondary" />
-                )}
-              </div>
-            </aside>
-            <div className={styles.settingsContent}>{currentPage.component}</div>
+    <FocusScope contain autoFocus restoreFocus>
+      <div className="dashboard-settings" ref={ref} {...overlayProps} {...dialogProps}>
+        <PageToolbar title={`${dashboard.title} / Settings`} parent={folderTitle} onGoBack={onClose} />
+        <CustomScrollbar>
+          <div className={styles.scrollInner}>
+            <div className={styles.settingsWrapper}>
+              <aside className="dashboard-settings__aside">
+                {pages.map((page) => (
+                  <Link
+                    onClick={() => reportInteraction(`Dashboard settings navigation to ${page.id}`)}
+                    to={(loc) => locationUtil.getUrlForPartial(loc, { editview: page.id })}
+                    className={cx('dashboard-settings__nav-item', { active: page.id === editview })}
+                    key={page.id}
+                  >
+                    <Icon name={page.icon} style={{ marginRight: '4px' }} />
+                    {page.title}
+                  </Link>
+                ))}
+                <div className="dashboard-settings__aside-actions">
+                  {canSave && <SaveDashboardButton dashboard={dashboard} onSaveSuccess={onPostSave} />}
+                  {canSaveAs && (
+                    <SaveDashboardAsButton dashboard={dashboard} onSaveSuccess={onPostSave} variant="secondary" />
+                  )}
+                </div>
+              </aside>
+              <div className={styles.settingsContent}>{currentPage.component}</div>
+            </div>
           </div>
-        </div>
-      </CustomScrollbar>
-    </div>
+        </CustomScrollbar>
+      </div>
+    </FocusScope>
   );
 }