IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Accessibility: Trap focus correctly in dashboard settings (#47149)

Browse Source 
* Accessibility: Trap focus correctly in search + dashboard settings

* add accessible names for the overlays

* Undo changes to search

* missed a bit
This commit is contained in:
Ashley Harrison 2022-04-01 11:44:48 +01:00 committed by GitHub
parent e0457665f6
commit 9d3b701797
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 42 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx
View File

@ -1,5 +1,8 @@
import React, { useCallback, useMemo } from 'react'; import React, { useCallback, useMemo, useRef } from 'react';
import { Link } from 'react-router-dom'; 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 { css, cx } from '@emotion/css';
import { Button, CustomScrollbar, Icon, IconName, PageToolbar, stylesFactory, useForceUpdate } from '@grafana/ui'; import { Button, CustomScrollbar, Icon, IconName, PageToolbar, stylesFactory, useForceUpdate } from '@grafana/ui';
import config from 'app/core/config'; import config from 'app/core/config';
@ -40,6 +43,14 @@ const MakeEditable = (props: { onMakeEditable: () => any }) => (
); );
export function DashboardSettings({ dashboard, editview }: Props) { 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 forceUpdate = useForceUpdate();
const onMakeEditable = useCallback(() => { const onMakeEditable = useCallback(() => {
dashboard.editable = true; dashboard.editable = true;
@ -139,7 +150,8 @@ export function DashboardSettings({ dashboard, editview }: Props) {
const styles = getStyles(config.theme2); const styles = getStyles(config.theme2);
return ( return (
<div className="dashboard-settings"> <FocusScope contain autoFocus restoreFocus>
<div className="dashboard-settings" ref={ref} {...overlayProps} {...dialogProps}>
<PageToolbar title={`${dashboard.title} / Settings`} parent={folderTitle} onGoBack={onClose} /> <PageToolbar title={`${dashboard.title} / Settings`} parent={folderTitle} onGoBack={onClose} />
<CustomScrollbar> <CustomScrollbar>
<div className={styles.scrollInner}> <div className={styles.scrollInner}>
@ -168,6 +180,7 @@ export function DashboardSettings({ dashboard, editview }: Props) {
</div> </div>
</CustomScrollbar> </CustomScrollbar>
</div> </div>
</FocusScope>
); );
} }