fixing color and toggle accessibility (#54661)
* fixing color and toggle accessibility * updating snapshots * fixing more snapshots * fixing toggle console warning
This commit is contained in:
parent
ea82503f49
commit
b298dd4c20
|
@ -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 = {
|
||||
|
|
|
@ -20,6 +20,7 @@ const ShapeArgInput = ({ onValueChange, argValue, typeInstance }) => (
|
|||
value={argValue}
|
||||
onChange={onValueChange}
|
||||
shapes={typeInstance.options.shapes}
|
||||
ariaLabel={typeInstance.displayName}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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: {
|
||||
|
|
|
@ -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={
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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={
|
||||
|
|
|
@ -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={
|
||||
|
|
|
@ -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 />, {
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -127,6 +127,7 @@ export const TextStylePicker = ({
|
|||
value={color}
|
||||
onChange={value => doChange('color', value)}
|
||||
colors={colors}
|
||||
ariaLabel={strings.getFontColorLabel()}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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={
|
||||
|
|
|
@ -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={
|
||||
|
|
|
@ -115,6 +115,7 @@ export const BorderForm: FunctionComponent<Props> = ({
|
|||
onChange={borderColorChange}
|
||||
colors={colors}
|
||||
anchorPosition="upCenter"
|
||||
ariaLabel={strings.getBorderTitle()}
|
||||
/>
|
||||
</EuiFormRow>
|
||||
</EuiFlexItem>
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue