A11y: Replace LinkButton with Button in Value Mappings to make it accessible (#46330)

This commit is contained in:
Joao Silva
2022-03-09 14:01:24 +00:00
committed by GitHub
parent 53799973f0
commit 4b57ffbb4f
@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useRef } from 'react';
import { GrafanaTheme2, MappingType, SpecialValueMatch, SelectableValue, ValueMappingResult } from '@grafana/data'; import { GrafanaTheme2, MappingType, SpecialValueMatch, SelectableValue, ValueMappingResult } from '@grafana/data';
import { Draggable } from 'react-beautiful-dnd'; import { Draggable } from 'react-beautiful-dnd';
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import { useStyles2, Icon, Select, HorizontalGroup, ColorPicker, IconButton, LinkButton, Input } from '@grafana/ui'; import { useStyles2, Icon, Select, HorizontalGroup, ColorPicker, IconButton, Input, Button } from '@grafana/ui';
export interface ValueMappingEditRowModel { export interface ValueMappingEditRowModel {
type: MappingType; type: MappingType;
@@ -176,9 +176,9 @@ export function ValueMappingEditRow({ mapping, index, onChange, onRemove, onDupl
{!result.color && ( {!result.color && (
<ColorPicker color={'gray'} onChange={onChangeColor} enableNamedColors={true}> <ColorPicker color={'gray'} onChange={onChangeColor} enableNamedColors={true}>
{(props) => ( {(props) => (
<LinkButton variant="primary" fill="text" onClick={props.showColorPicker} ref={props.ref} size="sm"> <Button variant="primary" fill="text" onClick={props.showColorPicker} ref={props.ref} size="sm">
Set color Set color
</LinkButton> </Button>
)} )}
</ColorPicker> </ColorPicker>
)} )}