Fix hardcoded content warnings

Shopify · May 3, 2019 · 9f586c0 · 9f586c0
1 parent 76f9bb7
commit 9f586c0
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 5 deletions.
diff --git a/src/components/SkeletonPage/SkeletonPage.tsx b/src/components/SkeletonPage/SkeletonPage.tsx
@@ -36,6 +36,7 @@ export class SkeletonPage extends React.PureComponent<CombinedProps, never> {
       secondaryActions,
       title = '',
       breadcrumbs,
+      polaris: {intl},
     } = this.props;
 
     const className = classNames(
@@ -80,7 +81,11 @@ export class SkeletonPage extends React.PureComponent<CombinedProps, never> {
     ) : null;
 
     return (
-      <div className={className} role="status" aria-label="Page loading">
+      <div
+        className={className}
+        role="status"
+        aria-label={intl.translate('Polaris.SkeletonPage.loadingLabel')}
+      >
         {headerMarkup}
         <div className={styles.Content}>{children}</div>
       </div>

diff --git a/src/components/TopBar/TopBar.tsx b/src/components/TopBar/TopBar.tsx
@@ -59,6 +59,7 @@ export class TopBar extends React.PureComponent<ComposedProps, State> {
       onSearchResultsDismiss,
       contextControl,
       polaris: {
+        intl,
         theme: {logo},
       },
     } = this.props;
@@ -77,7 +78,7 @@ export class TopBar extends React.PureComponent<ComposedProps, State> {
         onClick={onNavigationToggle}
         onFocus={this.handleFocus}
         onBlur={this.handleBlur}
-        aria-label="Toggle menu"
+        aria-label={intl.translate('Polaris.TopBar.toggleMenuLabel')}
       >
         <Icon source={MobileHamburgerMajorMonotone} color="white" />
       </button>

diff --git a/src/components/TopBar/components/SearchField/SearchField.tsx b/src/components/TopBar/components/SearchField/SearchField.tsx
@@ -4,6 +4,7 @@ import {classNames} from '@shopify/react-utilities/styles';
 
 import {noop} from '../../../../utilities/other';
 import Icon from '../../../Icon';
+import {withAppProvider, WithAppProviderProps} from '../../../AppProvider';
 
 import styles from './SearchField.scss';
 
@@ -26,7 +27,9 @@ export interface Props {
   onCancel?(): void;
 }
 
-export default class SearchField extends React.Component<Props, never> {
+export type ComposedProps = Props & WithAppProviderProps;
+
+export class SearchField extends React.Component<ComposedProps, never> {
   private input: React.RefObject<HTMLInputElement> = React.createRef();
 
   componentDidMount() {
@@ -58,12 +61,20 @@ export default class SearchField extends React.Component<Props, never> {
   }
 
   render() {
-    const {value, focused, active, placeholder} = this.props;
+    const {
+      value,
+      focused,
+      active,
+      placeholder,
+      polaris: {intl},
+    } = this.props;
 
     const clearMarkup = value !== '' && (
       <button
         type="button"
-        aria-label="Clear"
+        aria-label={intl.translate(
+          'Polaris.TopBar.SearchField.clearButtonLabel',
+        )}
         className={styles.Clear}
         onClick={this.handleClear}
       >
@@ -148,3 +159,4 @@ function preventDefault(event: React.KeyboardEvent<HTMLInputElement>) {
     event.preventDefault();
   }
 }
+export default withAppProvider<Props>()(SearchField);
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -211,6 +211,10 @@
       }
     },
 
+    "SkeletonPage": {
+      "loadingLabel": "Page loading"
+    },
+
     "Spinner": {
       "warningMessage": "The color {color} is not meant to be used on {size} spinners. The colors available on large spinners are: {colors}"
     },
@@ -222,6 +226,14 @@
     "TextField": {
       "characterCount": "{count} characters",
       "characterCountWithMaxLength": "{count} of {limit} characters used"
+    },
+
+    "TopBar": {
+      "toggleMenuLabel": "Toggle menu",
+
+      "SearchField": {
+        "clearButtonLabel": "Clear"
+      }
     }
   }
 }