@transferwise/components 0.0.0-experimental-db313a8 → 0.0.0-experimental-d44d661

package/src/moneyInput/MoneyInput.tsx

@@ -313,10 +313,10 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
     const selectedCurrencyElementId = `${inputAttributes?.id ?? amountInputId}SelectedCurrency`;
 
     return (
-      <fieldset
-        aria-invalid={inputAttributes?.['aria-invalid']}
-        aria-describedby={inputAttributes?.['aria-describedby']}
-        aria-labelledby={inputAttributes?.id ?? amountInputId}
+      <div
+        role="group"
+        {...inputAttributes}
+        aria-labelledby={ariaLabelledBy}
         className={clsx(
           this.style('tw-money-input'),
           this.style('input-group'),
@@ -324,8 +324,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
         )}
       >
         <Input
-          id={inputAttributes?.id ?? amountInputId}
-          aria-labelledby={ariaLabelledBy}
+          id={amountInputId}
           value={this.state.formattedAmount}
           inputMode="decimal"
           disabled={disabled}
@@ -431,7 +430,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
             />
           </div>
         )}
-      </fieldset>
+      </div>
     );
   }
 }

package/src/phoneNumberInput/PhoneNumberInput.tsx

@@ -1,8 +1,8 @@
-import { useState, useEffect, useMemo, useRef } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { useIntl } from 'react-intl';
 
 import { Size, SizeLarge, SizeMedium, SizeSmall } from '../common';
-import { useFieldLabelRef, useInputAttributes } from '../inputs/contexts';
+import { useInputAttributes } from '../inputs/contexts';
 import { SelectInput, SelectInputOptionContent, SelectInputProps } from '../inputs/SelectInput';
 import messages from './PhoneNumberInput.messages';
 import countries from './data/countries';
@@ -58,10 +58,7 @@ const PhoneNumberInput = ({
   selectProps = defaultSelectProps,
   disabledCountries = defaultDisabledCountries,
 }: PhoneNumberInputProps) => {
-  const countryCodeSelectRef = useRef<HTMLButtonElement>(null);
-  const phoneNumberInputRef = useRef<HTMLInputElement>(null);
   const inputAttributes = useInputAttributes({ nonLabelable: true });
-  const fieldLabelRef = useFieldLabelRef();
   const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];
 
   const { locale, formatMessage } = useIntl();
@@ -74,7 +71,6 @@ const PhoneNumberInput = ({
     return `${backup}-${random}`;
   };
 
-  // Link the first non-disabled input to the the Field label, if present
   const ids = {
     countryCode: {
       label: createId(id, 'country-code-label'),
@@ -166,34 +162,18 @@ const PhoneNumberInput = ({
     setBroadcastedValue(internalValue);
   }, [onChange, broadcastedValue, internalValue]);
 
-  useEffect(() => {
-    const labelRef = fieldLabelRef?.current;
-
-    if (labelRef) {
-      const handleLabelClick = () => {
-        if (!selectProps.disabled) {
-          countryCodeSelectRef.current?.click();
-        } else {
-          phoneNumberInputRef.current?.focus();
-        }
-      };
-
-      labelRef.addEventListener('click', handleLabelClick);
-
-      return () => {
-        labelRef?.removeEventListener('click', handleLabelClick);
-      };
-    }
-  }, [fieldLabelRef, selectProps.disabled]);
-
   return (
-    <fieldset {...inputAttributes} aria-labelledby={ariaLabelledBy} className="tw-telephone">
-      <label className="sr-only" id={ids.countryCode.label} htmlFor={ids.countryCode.select}>
+    <div
+      role="group"
+      {...inputAttributes}
+      aria-labelledby={ariaLabelledBy}
+      className="tw-telephone"
+    >
+      <label className="sr-only" id={ids.countryCode.label}>
         {formatMessage(messages.countryCodeLabel)}
       </label>
       <div className="tw-telephone__country-select">
         <SelectInput
-          triggerRef={countryCodeSelectRef}
           placeholder={formatMessage(messages.selectInputPlaceholder)}
           items={[...countriesByPrefix].map(([prefix, countries]) => ({
             type: 'option',
@@ -247,7 +227,6 @@ const PhoneNumberInput = ({
       <div className="tw-telephone__number-input">
         <div className={`input-group input-group-${size}`}>
           <Input
-            ref={phoneNumberInputRef}
             id={ids.phoneNumber.input}
             autoComplete="tel-national"
             name="phoneNumber"
@@ -264,7 +243,7 @@ const PhoneNumberInput = ({
           />
         </div>
       </div>
-    </fieldset>
+    </div>
   );
 };