maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

fixing color and toggle accessibility (#54661)

Browse source 
* fixing color and toggle accessibility

* updating snapshots

* fixing more snapshots

* fixing toggle console warning
This commit is contained in:
Tim Schnell 2020-01-14 10:53:27 -06:00 committed by GitHub
parent ea82503f49
commit b298dd4c20
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 125 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/palette.js
View file

@ -61,7 +61,9 @@ const PaletteArgInput = ({ onValueChange, argValue, renderError }) => {
const palette = astToPalette(argValue);
return <PalettePicker value={palette} onChange={handleChange} />;
return (
<PalettePicker value={palette} onChange={handleChange} ariaLabel={strings.getDisplayName()} />
);
};
PaletteArgInput.propTypes = {

1
x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/shape.js
View file

@ -20,6 +20,7 @@ const ShapeArgInput = ({ onValueChange, argValue, typeInstance }) => (
value={argValue}
onChange={onValueChange}
shapes={typeInstance.options.shapes}
ariaLabel={typeInstance.displayName}
/>
</EuiFlexItem>
</EuiFlexGroup>

5
x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/toggle.js
View file

@ -12,7 +12,7 @@ import { ArgumentStrings } from '../../../i18n';
const { Toggle: strings } = ArgumentStrings;
const ToggleArgInput = ({ onValueChange, argValue, argId, renderError }) => {
const ToggleArgInput = ({ onValueChange, argValue, argId, renderError, typeInstance }) => {
const handleChange = () => onValueChange(!argValue);
if (typeof argValue !== 'boolean') {
renderError();
@ -26,6 +26,9 @@ const ToggleArgInput = ({ onValueChange, argValue, argId, renderError }) => {
checked={argValue}
onChange={handleChange}
className="canvasArg__switch"
aria-label={typeInstance.displayName}
label=""
showLabel={false}
/>
</EuiFormRow>
);

10
x-pack/legacy/plugins/canvas/i18n/components.ts
View file

@ -912,6 +912,10 @@ export const ComponentStrings = {
i18n.translate('xpack.canvas.textStylePicker.styleUnderlineOption', {
defaultMessage: 'Underline',
}),
getFontColorLabel: () =>
i18n.translate('xpack.canvas.textStylePicker.fontColorLabel', {
defaultMessage: 'Font Color',
}),
},
TimePicker: {
getApplyButtonLabel: () =>
@ -1007,7 +1011,11 @@ export const ComponentStrings = {
getUSLetterButtonLabel: () =>
i18n.translate('xpack.canvas.workpadConfig.USLetterButtonLabel', {
defaultMessage: 'US Letter',
description: 'This is referring to the dimentions of U.S. standard letter paper.',
description: 'This is referring to the dimensions of U.S. standard letter paper.',
}),
getBackgroundColorLabel: () =>
i18n.translate('xpack.canvas.workpadConfig.backgroundColorLabel', {
defaultMessage: 'Background color',
}),
},
WorkpadCreate: {

36
x-pack/legacy/plugins/canvas/public/components/color_palette/__examples__/__snapshots__/color_palette.examples.storyshot generated
View file

@ -8,6 +8,7 @@ exports[`Storyshots components/Color/ColorPalette interactive 1`] = `
className="item-grid-row"
>
<button
aria-label="white"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -34,6 +35,7 @@ exports[`Storyshots components/Color/ColorPalette interactive 1`] = `
</div>
</button>
<button
aria-label="#666"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -60,6 +62,7 @@ exports[`Storyshots components/Color/ColorPalette interactive 1`] = `
</div>
</button>
<button
aria-label="black"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -86,6 +89,7 @@ exports[`Storyshots components/Color/ColorPalette interactive 1`] = `
</div>
</button>
<button
aria-label="#abc"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -112,6 +116,7 @@ exports[`Storyshots components/Color/ColorPalette interactive 1`] = `
</div>
</button>
<button
aria-label="#def"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -138,6 +143,7 @@ exports[`Storyshots components/Color/ColorPalette interactive 1`] = `
</div>
</button>
<button
aria-label="#abcdef"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -176,6 +182,7 @@ Array [
className="item-grid-row"
>
<button
aria-label="white"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -202,6 +209,7 @@ Array [
</div>
</button>
<button
aria-label="#666"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -228,6 +236,7 @@ Array [
</div>
</button>
<button
aria-label="black"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -254,6 +263,7 @@ Array [
</div>
</button>
<button
aria-label="#abc"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -280,6 +290,7 @@ Array [
</div>
</button>
<button
aria-label="#def"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -306,6 +317,7 @@ Array [
</div>
</button>
<button
aria-label="#abcdef"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -340,6 +352,7 @@ Array [
className="item-grid-row"
>
<button
aria-label="white"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -382,6 +395,7 @@ Array [
</div>
</button>
<button
aria-label="#666"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -408,6 +422,7 @@ Array [
</div>
</button>
<button
aria-label="black"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -434,6 +449,7 @@ Array [
</div>
</button>
<button
aria-label="#abc"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -460,6 +476,7 @@ Array [
</div>
</button>
<button
aria-label="#def"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -486,6 +503,7 @@ Array [
</div>
</button>
<button
aria-label="#abcdef"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -524,6 +542,7 @@ exports[`Storyshots components/Color/ColorPalette six colors, value missing 1`]
className="item-grid-row"
>
<button
aria-label="white"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -550,6 +569,7 @@ exports[`Storyshots components/Color/ColorPalette six colors, value missing 1`]
</div>
</button>
<button
aria-label="#666"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -576,6 +596,7 @@ exports[`Storyshots components/Color/ColorPalette six colors, value missing 1`]
</div>
</button>
<button
aria-label="black"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -602,6 +623,7 @@ exports[`Storyshots components/Color/ColorPalette six colors, value missing 1`]
</div>
</button>
<button
aria-label="#abc"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -628,6 +650,7 @@ exports[`Storyshots components/Color/ColorPalette six colors, value missing 1`]
</div>
</button>
<button
aria-label="#def"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -654,6 +677,7 @@ exports[`Storyshots components/Color/ColorPalette six colors, value missing 1`]
</div>
</button>
<button
aria-label="#abcdef"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -691,6 +715,7 @@ exports[`Storyshots components/Color/ColorPalette six colors, wrap at 4 1`] = `
className="item-grid-row"
>
<button
aria-label="white"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -733,6 +758,7 @@ exports[`Storyshots components/Color/ColorPalette six colors, wrap at 4 1`] = `
</div>
</button>
<button
aria-label="#666"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -759,6 +785,7 @@ exports[`Storyshots components/Color/ColorPalette six colors, wrap at 4 1`] = `
</div>
</button>
<button
aria-label="black"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -785,6 +812,7 @@ exports[`Storyshots components/Color/ColorPalette six colors, wrap at 4 1`] = `
</div>
</button>
<button
aria-label="#abc"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -815,6 +843,7 @@ exports[`Storyshots components/Color/ColorPalette six colors, wrap at 4 1`] = `
className="item-grid-row"
>
<button
aria-label="#def"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -841,6 +870,7 @@ exports[`Storyshots components/Color/ColorPalette six colors, wrap at 4 1`] = `
</div>
</button>
<button
aria-label="#abcdef"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -879,6 +909,7 @@ Array [
className="item-grid-row"
>
<button
aria-label="white"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -905,6 +936,7 @@ Array [
</div>
</button>
<button
aria-label="#666"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -931,6 +963,7 @@ Array [
</div>
</button>
<button
aria-label="black"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -965,6 +998,7 @@ Array [
className="item-grid-row"
>
<button
aria-label="white"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -1007,6 +1041,7 @@ Array [
</div>
</button>
<button
aria-label="#666"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -1033,6 +1068,7 @@ Array [
</div>
</button>
<button
aria-label="black"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={

1
x-pack/legacy/plugins/canvas/public/components/color_palette/color_palette.tsx
View file

@ -61,6 +61,7 @@ export const ColorPalette: FunctionComponent<Props> = ({
key={color}
onClick={() => !match && onChange(color)}
className="canvasColorPalette__dot"
aria-label={tinycolor(color).toName() || color}
>
<ColorDot value={color}>{icon}</ColorDot>
</EuiLink>

21
x-pack/legacy/plugins/canvas/public/components/color_picker/__examples__/__snapshots__/color_picker.examples.storyshot generated
View file

@ -10,6 +10,7 @@ exports[`Storyshots components/Color/ColorPicker interactive 1`] = `
className="item-grid-row"
>
<button
aria-label="white"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -36,6 +37,7 @@ exports[`Storyshots components/Color/ColorPicker interactive 1`] = `
</div>
</button>
<button
aria-label="#666"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -62,6 +64,7 @@ exports[`Storyshots components/Color/ColorPicker interactive 1`] = `
</div>
</button>
<button
aria-label="black"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -88,6 +91,7 @@ exports[`Storyshots components/Color/ColorPicker interactive 1`] = `
</div>
</button>
<button
aria-label="#abc"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -114,6 +118,7 @@ exports[`Storyshots components/Color/ColorPicker interactive 1`] = `
</div>
</button>
<button
aria-label="#def"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -140,6 +145,7 @@ exports[`Storyshots components/Color/ColorPicker interactive 1`] = `
</div>
</button>
<button
aria-label="#abcdef"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -285,6 +291,7 @@ exports[`Storyshots components/Color/ColorPicker six colors 1`] = `
className="item-grid-row"
>
<button
aria-label="white"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -327,6 +334,7 @@ exports[`Storyshots components/Color/ColorPicker six colors 1`] = `
</div>
</button>
<button
aria-label="#666"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -353,6 +361,7 @@ exports[`Storyshots components/Color/ColorPicker six colors 1`] = `
</div>
</button>
<button
aria-label="black"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -379,6 +388,7 @@ exports[`Storyshots components/Color/ColorPicker six colors 1`] = `
</div>
</button>
<button
aria-label="#abc"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -405,6 +415,7 @@ exports[`Storyshots components/Color/ColorPicker six colors 1`] = `
</div>
</button>
<button
aria-label="#def"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -431,6 +442,7 @@ exports[`Storyshots components/Color/ColorPicker six colors 1`] = `
</div>
</button>
<button
aria-label="#abcdef"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -559,6 +571,7 @@ exports[`Storyshots components/Color/ColorPicker six colors, value missing 1`] =
className="item-grid-row"
>
<button
aria-label="white"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -585,6 +598,7 @@ exports[`Storyshots components/Color/ColorPicker six colors, value missing 1`] =
</div>
</button>
<button
aria-label="#666"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -611,6 +625,7 @@ exports[`Storyshots components/Color/ColorPicker six colors, value missing 1`] =
</div>
</button>
<button
aria-label="black"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -637,6 +652,7 @@ exports[`Storyshots components/Color/ColorPicker six colors, value missing 1`] =
</div>
</button>
<button
aria-label="#abc"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -663,6 +679,7 @@ exports[`Storyshots components/Color/ColorPicker six colors, value missing 1`] =
</div>
</button>
<button
aria-label="#def"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -689,6 +706,7 @@ exports[`Storyshots components/Color/ColorPicker six colors, value missing 1`] =
</div>
</button>
<button
aria-label="#abcdef"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -817,6 +835,7 @@ exports[`Storyshots components/Color/ColorPicker three colors 1`] = `
className="item-grid-row"
>
<button
aria-label="white"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -859,6 +878,7 @@ exports[`Storyshots components/Color/ColorPicker three colors 1`] = `
</div>
</button>
<button
aria-label="#666"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={
@ -885,6 +905,7 @@ exports[`Storyshots components/Color/ColorPicker three colors 1`] = `
</div>
</button>
<button
aria-label="black"
className="euiLink euiLink--primary canvasColorPalette__dot"
onClick={[Function]}
style={

4
x-pack/legacy/plugins/canvas/public/components/color_picker_popover/__examples__/__snapshots__/color_picker_popover.examples.storyshot generated
View file

@ -16,6 +16,7 @@ exports[`Storyshots components/Color/ColorPickerPopover interactive 1`] = `
className="euiPopover__anchor"
>
<button
aria-label="Color Picker black"
className="euiLink euiLink--primary"
onClick={[Function]}
style={
@ -77,6 +78,7 @@ exports[`Storyshots components/Color/ColorPickerPopover six colors 1`] = `
className="euiPopover__anchor"
>
<button
aria-label="Color Picker white"
className="euiLink euiLink--primary"
onClick={[Function]}
style={
@ -121,6 +123,7 @@ exports[`Storyshots components/Color/ColorPickerPopover six colors, value missin
className="euiPopover__anchor"
>
<button
aria-label="Color Picker #a1b2c3"
className="euiLink euiLink--primary"
onClick={[Function]}
style={
@ -165,6 +168,7 @@ exports[`Storyshots components/Color/ColorPickerPopover three colors 1`] = `
className="euiPopover__anchor"
>
<button
aria-label="Color Picker white"
className="euiLink euiLink--primary"
onClick={[Function]}
style={

4
x-pack/legacy/plugins/canvas/public/components/color_picker_popover/__examples__/color_picker_popover.examples.tsx
View file

@ -33,6 +33,7 @@ class Interactive extends React.Component<
value={this.state.value}
anchorPosition="downCenter"
hasButtons={this.state.hasButtons}
ariaLabel="Color Picker"
/>
<p style={{ marginTop: 20 }}>
<label>
@ -72,6 +73,7 @@ storiesOf('components/Color/ColorPickerPopover', module)
anchorPosition="downCenter"
onChange={action('onChange')}
colors={THREE_COLORS}
ariaLabel="Color Picker"
/>
))
.add('six colors', () => (
@ -80,6 +82,7 @@ storiesOf('components/Color/ColorPickerPopover', module)
anchorPosition="downCenter"
onChange={action('onChange')}
colors={SIX_COLORS}
ariaLabel="Color Picker"
/>
))
.add('six colors, value missing', () => (
@ -88,6 +91,7 @@ storiesOf('components/Color/ColorPickerPopover', module)
anchorPosition="downCenter"
onChange={action('onChange')}
colors={SIX_COLORS}
ariaLabel="Color Picker"
/>
))
.add('interactive', () => <Interactive />, {

10
x-pack/legacy/plugins/canvas/public/components/color_picker_popover/color_picker_popover.tsx
View file

@ -7,18 +7,24 @@
import { EuiLink, PopoverAnchorPosition } from '@elastic/eui';
import PropTypes from 'prop-types';
import React, { FunctionComponent, MouseEvent } from 'react';
import tinycolor from 'tinycolor2';
import { ColorDot } from '../color_dot';
import { ColorPicker, Props as ColorPickerProps } from '../color_picker';
import { Popover } from '../popover';
export interface Props extends ColorPickerProps {
anchorPosition: PopoverAnchorPosition;
ariaLabel?: string;
}
export const ColorPickerPopover: FunctionComponent<Props> = (props: Props) => {
const { value, anchorPosition, ...rest } = props;
const { value, anchorPosition, ariaLabel, ...rest } = props;
const button = (handleClick: (ev: MouseEvent) => void) => (
<EuiLink style={{ fontSize: 0 }} onClick={handleClick}>
<EuiLink
aria-label={`${ariaLabel} ${tinycolor(value).toName() || value}`}
style={{ fontSize: 0 }}
onClick={handleClick}
>
<ColorDot value={value} />
</EuiLink>
);

4
x-pack/legacy/plugins/canvas/public/components/palette_picker/palette_picker.js
View file

@ -12,9 +12,9 @@ import { Popover } from '../popover';
import { PaletteSwatch } from '../palette_swatch';
import { palettes } from '../../../common/lib/palettes';
export const PalettePicker = ({ onChange, value, anchorPosition }) => {
export const PalettePicker = ({ onChange, value, anchorPosition, ariaLabel }) => {
const button = handleClick => (
<button style={{ width: '100%', height: 16 }} onClick={handleClick}>
<button aria-label={ariaLabel} style={{ width: '100%', height: 16 }} onClick={handleClick}>
<PaletteSwatch colors={value.colors} gradient={value.gradient} />
</button>
);

5
x-pack/legacy/plugins/canvas/public/components/shape_picker_popover/shape_picker_popover.tsx
View file

@ -17,12 +17,13 @@ interface Props {
};
onChange?: (key: string) => void;
value?: string;
ariaLabel?: string;
}
export const ShapePickerPopover = ({ shapes, onChange, value }: Props) => {
export const ShapePickerPopover = ({ shapes, onChange, value, ariaLabel }: Props) => {
const button = (handleClick: (ev: MouseEvent) => void) => (
<EuiPanel paddingSize="s" hasShadow={false}>
<EuiLink style={{ fontSize: 0 }} onClick={handleClick}>
<EuiLink aria-label={ariaLabel} style={{ fontSize: 0 }} onClick={handleClick}>
<ShapePreview shape={value ? shapes[value] : undefined} />
</EuiLink>
</EuiPanel>

1
x-pack/legacy/plugins/canvas/public/components/text_style_picker/text_style_picker.js
View file

@ -127,6 +127,7 @@ export const TextStylePicker = ({
value={color}
onChange={value => doChange('color', value)}
colors={colors}
ariaLabel={strings.getFontColorLabel()}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>

11
x-pack/legacy/plugins/canvas/public/components/workpad_color_picker/workpad_color_picker.tsx
View file

@ -6,9 +6,18 @@
import React from 'react';
import { ColorPickerPopover, Props } from '../color_picker_popover';
import { ComponentStrings } from '../../../i18n';
const { WorkpadConfig: strings } = ComponentStrings;
export const WorkpadColorPicker = (props: Props) => {
return <ColorPickerPopover {...props} hasButtons={true} />;
return (
<ColorPickerPopover
{...props}
hasButtons={true}
ariaLabel={strings.getBackgroundColorLabel()}
/>
);
};
WorkpadColorPicker.propTypes = ColorPickerPopover.propTypes;

9
x-pack/legacy/plugins/canvas/public/expression_types/arg_types/color.js
View file

@ -13,10 +13,15 @@ import { ArgTypesStrings } from '../../../i18n';
const { Color: strings } = ArgTypesStrings;
const ColorArgInput = ({ onValueChange, argValue, workpad }) => (
const ColorArgInput = ({ onValueChange, argValue, workpad, typeInstance }) => (
<EuiFlexGroup gutterSize="s">
<EuiFlexItem grow={false}>
<ColorPickerPopover value={argValue} onChange={onValueChange} colors={workpad.colors} />
<ColorPickerPopover
value={argValue}
onChange={onValueChange}
colors={workpad.colors}
ariaLabel={`${typeInstance.displayName} ${strings.getDisplayName()}`}
/>
</EuiFlexItem>
</EuiFlexGroup>
);

3
x-pack/legacy/plugins/canvas/public/expression_types/arg_types/container_style/__examples__/__snapshots__/extended_template.examples.storyshot generated
View file

@ -467,6 +467,7 @@ exports[`Storyshots arguments/ContainerStyle extended 1`] = `
className="euiPopover__anchor"
>
<button
aria-label="Border white"
className="euiLink euiLink--primary"
onClick={[Function]}
style={
@ -956,6 +957,7 @@ exports[`Storyshots arguments/ContainerStyle/components border form 1`] = `
className="euiPopover__anchor"
>
<button
aria-label="Border black"
className="euiLink euiLink--primary"
onClick={[Function]}
style={
@ -1457,6 +1459,7 @@ exports[`Storyshots arguments/ContainerStyle/components extended template 1`] =
className="euiPopover__anchor"
>
<button
aria-label="Border white"
className="euiLink euiLink--primary"
onClick={[Function]}
style={

2
x-pack/legacy/plugins/canvas/public/expression_types/arg_types/container_style/__examples__/__snapshots__/simple_template.examples.storyshot generated
View file

@ -31,6 +31,7 @@ exports[`Storyshots arguments/ContainerStyle simple 1`] = `
className="euiPopover__anchor"
>
<button
aria-label="Container style white"
className="euiLink euiLink--primary"
onClick={[Function]}
style={
@ -93,6 +94,7 @@ exports[`Storyshots arguments/ContainerStyle/components simple template 1`] = `
className="euiPopover__anchor"
>
<button
aria-label="Container style white"
className="euiLink euiLink--primary"
onClick={[Function]}
style={

1
x-pack/legacy/plugins/canvas/public/expression_types/arg_types/container_style/border_form.tsx
View file

@ -115,6 +115,7 @@ export const BorderForm: FunctionComponent<Props> = ({
onChange={borderColorChange}
colors={colors}
anchorPosition="upCenter"
ariaLabel={strings.getBorderTitle()}
/>
</EuiFormRow>
</EuiFlexItem>

4
x-pack/legacy/plugins/canvas/public/expression_types/arg_types/container_style/simple_template.tsx
View file

@ -8,6 +8,9 @@ import React, { FunctionComponent } from 'react';
import PropTypes from 'prop-types';
import { ColorPickerPopover } from '../../../components/color_picker_popover';
import { CanvasWorkpad } from '../.../../../../../types';
import { ArgTypesStrings } from '../../../../i18n';
const { ContainerStyle: strings } = ArgTypesStrings;
export interface Arguments {
backgroundColor: string;
@ -27,6 +30,7 @@ export const SimpleTemplate: FunctionComponent<Props> = ({ getArgValue, setArgVa
onChange={color => setArgValue('backgroundColor', color)}
colors={workpad.colors}
anchorPosition="leftCenter"
ariaLabel={strings.getDisplayName()}
/>
</div>
);

1
x-pack/legacy/plugins/canvas/public/expression_types/arg_types/series_style/simple_template.tsx
View file

@ -76,6 +76,7 @@ export const SimpleTemplate: FunctionComponent<Props> = props => {
colors={workpad.colors}
onChange={val => handleChange('color', val)}
value={color}
ariaLabel={strings.getColorLabel()}
/>
</EuiFlexItem>
<EuiFlexItem>