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

ColorPickerPopover: apply react-aria for a11y support (#42444)

Browse Source 
* add focus trapping to colorPickerPopover

* make popover exit using esc key

* fix colorPickerPopover to be tabbable

* fix focus escape in colorPickerPopover

* revert to focus trap fix
This commit is contained in:
Uchechukwu Obasi 2021-11-30 16:26:50 +01:00 committed by GitHub
parent 2ce1cf22ef
commit 0cde13d51f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx
View File

@ -7,6 +7,7 @@ import { warnAboutColorPickerPropsDeprecation } from './warnAboutColorPickerProp
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import { GrafanaTheme2, colorManipulator } from '@grafana/data'; import { GrafanaTheme2, colorManipulator } from '@grafana/data';
import { stylesFactory, withTheme2 } from '../../themes'; import { stylesFactory, withTheme2 } from '../../themes';
import { FocusScope } from '@react-aria/focus';
export type ColorPickerChangeHandler = (color: string) => void; export type ColorPickerChangeHandler = (color: string) => void;
@ -116,18 +117,20 @@ class UnThemedColorPickerPopover<T extends CustomPickersDescriptor> extends Reac
const { theme } = this.props; const { theme } = this.props;
const styles = getStyles(theme); const styles = getStyles(theme);
return ( return (
<div className={styles.colorPickerPopover}> <FocusScope contain restoreFocus autoFocus>
<div className={styles.colorPickerPopoverTabs}> <div className={styles.colorPickerPopover}>
<div className={this.getTabClassName('palette')} onClick={this.onTabChange('palette')}> <div className={styles.colorPickerPopoverTabs}>
Colors <div tabIndex={0} className={this.getTabClassName('palette')} onClick={this.onTabChange('palette')}>
Colors
</div>
<div tabIndex={0} className={this.getTabClassName('spectrum')} onClick={this.onTabChange('spectrum')}>
Custom
</div>
{this.renderCustomPickerTabs()}
</div> </div>
<div className={this.getTabClassName('spectrum')} onClick={this.onTabChange('spectrum')}> <div className={styles.colorPickerPopoverContent}>{this.renderPicker()}</div>
Custom
</div>
{this.renderCustomPickerTabs()}
</div> </div>
<div className={styles.colorPickerPopoverContent}>{this.renderPicker()}</div> </FocusScope>
</div>
); );
} }
} }