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

71
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 { 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>
);
}