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

Add FocusScope to PanelEditor when open in the Dashboard Page so that a11y focus never catches invisible content. (#54400)

Browse Source
This commit is contained in:
Polina Boneva 2022-08-30 12:08:31 +03:00 committed by GitHub
parent 5e394c0385
commit ef32050508
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
public/app/features/dashboard/containers/DashboardPage.tsx
View File

@ -1,4 +1,5 @@
import { cx } from '@emotion/css'; import { cx } from '@emotion/css';
import { FocusScope } from '@react-aria/focus';
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { connect, ConnectedProps } from 'react-redux'; import { connect, ConnectedProps } from 'react-redux';
@ -371,7 +372,13 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
<DashboardGrid dashboard={dashboard} viewPanel={viewPanel} editPanel={editPanel} /> <DashboardGrid dashboard={dashboard} viewPanel={viewPanel} editPanel={editPanel} />
{inspectPanel && <PanelInspector dashboard={dashboard} panel={inspectPanel} />} {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> </Page>
{queryParams.editview && ( {queryParams.editview && (
<DashboardSettings <DashboardSettings