fixing color and toggle accessibility (elastic#54661)

* fixing color and toggle accessibility * updating snapshots * fixing more snapshots * fixing toggle console warning
timductive · Jan 14, 2020 · 451f7be · 451f7be
1 parent dec9c21
commit 451f7be
Show file tree

Hide file tree

Showing 20 changed files with 125 additions and 12 deletions.
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/palette.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/palette.js
@@ -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 = {

diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/shape.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/shape.js
@@ -20,6 +20,7 @@ const ShapeArgInput = ({ onValueChange, argValue, typeInstance }) => (
         value={argValue}
         onChange={onValueChange}
         shapes={typeInstance.options.shapes}
+        ariaLabel={typeInstance.displayName}
       />
     </EuiFlexItem>
   </EuiFlexGroup>

diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/toggle.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/toggle.js
@@ -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>
   );

diff --git a/x-pack/legacy/plugins/canvas/i18n/components.ts b/x-pack/legacy/plugins/canvas/i18n/components.ts
@@ -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: {

diff --git a/...blic/components/color_palette/__examples__/__snapshots__/color_palette.examples.storyshot b/...blic/components/color_palette/__examples__/__snapshots__/color_palette.examples.storyshot
diff --git a/x-pack/legacy/plugins/canvas/public/components/color_palette/color_palette.tsx b/x-pack/legacy/plugins/canvas/public/components/color_palette/color_palette.tsx
@@ -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>