[Canvas] i18n for page manager, page preview, and shape preview

x-pack/legacy/plugins/canvas/i18n/components.ts

@@ -214,6 +214,31 @@ export const ComponentStrings = {
         defaultMessage: 'Closes keyboard shortcuts reference',
       }),
   },
+  PageManager: {
+    getPageNumberAriaLabel: (pageNumber: number) =>
+      i18n.translate('xpack.canvas.pageManager.pageNumberAriaLabel', {
+        defaultMessage: 'Load page number {pageNumber}',
+        values: {
+          pageNumber,
+        },
+      }),
+  },
+  PagePreviewPageControls: {
+    getClonePageAriaLabel: () =>
+      i18n.translate('xpack.canvas.pagePreviewPageControls.clonePageAriaLabel', {
+        defaultMessage: 'Clone page',
+      }),
+    getDeletePageAriaLabel: () =>
+      i18n.translate('xpack.canvas.pagePreviewPageControls.deletePageAriaLabel', {
+        defaultMessage: 'Delete page',
+      }),
+  },
+  ShapePreview: {
+    getShapeErrorMessage: () =>
+      i18n.translate('xpack.canvas.shapePreview.shapeErrorMessage', {
+        defaultMessage: 'An unexpected error occurred: the SVG was not parseable',
+      }),
+  },
   Toolbar: {
     getEditorButtonLabel: () =>
       i18n.translate('xpack.canvas.toolbar.editorButtonLabel', {

x-pack/legacy/plugins/canvas/public/components/page_manager/page_manager.js

@@ -13,6 +13,10 @@ import { ConfirmModal } from '../confirm_modal';
 import { Link } from '../link';
 import { PagePreview } from '../page_preview';
 
+import { ComponentStrings } from '../../../i18n';
+
+const { PageManager: strings } = ComponentStrings;
+
 export class PageManager extends React.PureComponent {
   static propTypes = {
     isWriteable: PropTypes.bool.isRequired,
@@ -154,7 +158,7 @@ export class PageManager extends React.PureComponent {
                 <Link
                   name="loadWorkpad"
                   params={{ id: workpadId, page: pageNumber }}
-                  aria-label={`Load page number ${pageNumber}`}
+                  aria-label={strings.getPageNumberAriaLabel(pageNumber)}
                 >
                   {Style.it(
                     workpadCSS,

x-pack/legacy/plugins/canvas/public/components/page_preview/page_controls.js

@@ -8,6 +8,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { EuiFlexGroup, EuiFlexItem, EuiButtonIcon, EuiToolTip } from '@elastic/eui';
 
+import { ComponentStrings } from '../../../i18n';
+
+const { PagePreviewPageControls: strings } = ComponentStrings;
+
 export const PageControls = ({ pageId, onDelete, onDuplicate }) => {
   const handleDuplicate = ev => {
     ev.preventDefault();
@@ -27,15 +31,19 @@ export const PageControls = ({ pageId, onDelete, onDuplicate }) => {
     >
       <EuiFlexItem grow={false}>
         <EuiToolTip content="Clone">
-          <EuiButtonIcon iconType="copy" aria-label="Clone page" onClick={handleDuplicate} />
+          <EuiButtonIcon
+            iconType="copy"
+            aria-label={strings.getClonePageAriaLabel()}
+            onClick={handleDuplicate}
+          />
         </EuiToolTip>
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
         <EuiToolTip content="Delete">
           <EuiButtonIcon
             color="danger"
             iconType="trash"
-            aria-label="Delete Page"
+            aria-label={strings.getDeletePageAriaLabel()}
             onClick={handleDelete}
           />
         </EuiToolTip>

x-pack/legacy/plugins/canvas/public/components/shape_preview/shape_preview.tsx

@@ -7,6 +7,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { ComponentStrings } from '../../../i18n';
+
+const { ShapePreview: strings } = ComponentStrings;
+
 interface Props {
   shape?: string;
 }
@@ -24,7 +28,7 @@ export const ShapePreview = ({ shape }: Props) => {
     .item(0);
 
   if (!shapeSvg) {
-    throw new Error('An unexpected error occurred: the SVG was not parseable');
+    throw new Error(strings.getShapeErrorMessage());
   }
 
   shapeSvg.setAttribute('fill', 'none');