@transferwise/components 46.52.0 → 46.52.2

package/src/typeahead/Typeahead.tsx

@@ -1,27 +1,28 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-
 import { Cross as CrossIcon } from '@transferwise/icons';
 import { clsx } from 'clsx';
 import { DebouncedFunc } from 'lodash';
 import clamp from 'lodash.clamp';
 import debounce from 'lodash.debounce';
 import { Component, ReactNode } from 'react';
+import { injectIntl, WrappedComponentProps } from 'react-intl';
 
 import Chip from '../chips/Chip';
-import { Size, Sentiment, SizeMedium, SizeLarge } from '../common';
 import {
+  Size,
+  Sentiment,
+  SizeMedium,
+  SizeLarge,
   addClickClassToDocumentOnIos,
   removeClickClassFromDocumentOnIos,
   stopPropagation,
-} from '../common/domHelpers';
+} from '../common';
 import InlineAlert from '../inlineAlert';
 import { InlineAlertProps } from '../inlineAlert/InlineAlert';
 import { withInputAttributes, WithInputAttributesProps } from '../inputs/contexts';
 
 import TypeaheadInput from './typeaheadInput/TypeaheadInput';
 import TypeaheadOption from './typeaheadOption/TypeaheadOption';
+import messages from './Typeahead.messages';
 
 const DEFAULT_MIN_QUERY_LENGTH = 3;
 const SEARCH_DELAY = 200;
@@ -35,7 +36,7 @@ export type TypeaheadOption<T = string> = {
   keepFocusOnSelect?: boolean;
 };
 
-export interface TypeaheadProps<T> {
+export interface TypeaheadProps<T> extends WrappedComponentProps {
   id: string;
   name: string;
   addon?: ReactNode;
@@ -464,6 +465,7 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
     const hasWarning = displayAlert && alertType === Sentiment.WARNING;
     const hasInfo = displayAlert && alertType === Sentiment.NEUTRAL;
     return (
+      /* eslint-disable-next-line jsx-a11y/click-events-have-key-events */
       <div
         role="group"
         {...inputAttributes}
@@ -513,7 +515,12 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
 
             {clearButton && (
               <div className="input-group-addon">
-                <button type="button" className="btn-unstyled" onClick={this.clear}>
+                <button
+                  type="button"
+                  className="btn-unstyled"
+                  aria-label={this.props.intl.formatMessage(messages.clearLabel)}
+                  onClick={this.clear}
+                >
                   <CrossIcon />
                 </button>
               </div>
@@ -526,6 +533,6 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
   }
 }
 
-export default withInputAttributes(Typeahead, { nonLabelable: true }) as <T>(
+export default injectIntl(withInputAttributes(Typeahead, { nonLabelable: true })) as <T>(
   props: TypeaheadProps<T>,
 ) => React.ReactElement;