@transferwise/components 46.110.0 → 46.111.1

package/src/main.css

@@ -433,6 +433,159 @@
 .np-theme-personal .tw-avatar--outlined:not(.disabled):not(:disabled):hover {
   border-color: var(--color-interactive-primary-hover);
 }
+.wds-inline-prompt {
+  display: inline-flex;
+  text-align: left;
+  padding-top: calc(8px / 2);
+  padding-top: calc(var(--padding-x-small) / 2);
+  padding-bottom: calc(8px / 2);
+  padding-bottom: calc(var(--padding-x-small) / 2);
+  padding-left: calc(8px - 1px);
+  padding-left: calc(var(--padding-x-small) - 1px);
+  padding-right: 8px;
+  padding-right: var(--padding-x-small);
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+  word-break: break-word;
+  word-wrap: break-word;
+}
+.wds-inline-prompt:has(a),
+.wds-inline-prompt:has(button) {
+  position: relative;
+  z-index: 1;
+}
+.wds-inline-prompt--muted {
+  opacity: 0.93;
+  filter: grayscale(1);
+}
+.wds-inline-prompt a,
+.wds-inline-prompt button {
+  text-underline-offset: calc(4px / 2);
+  text-underline-offset: calc(var(--size-4) / 2);
+}
+.wds-inline-prompt a:first-of-type:before,
+.wds-inline-prompt button:first-of-type:before {
+  content: '';
+  position: absolute;
+  inset: 0;
+}
+.wds-inline-prompt__media-wrapper {
+  padding-right: calc(12px / 2);
+  padding-right: calc(var(--size-12) / 2);
+  padding-top: calc(4px - 1px);
+  padding-top: calc(var(--size-4) - 1px);
+  padding-bottom: calc(4px - 1px);
+  padding-bottom: calc(var(--size-4) - 1px);
+}
+.wds-inline-prompt__media-wrapper .tw-icon-tags,
+.wds-inline-prompt__media-wrapper .tw-icon-confetti {
+  color: var(--color-sentiment-positive-primary);
+}
+.wds-inline-prompt--negative {
+  background-color: var(--color-sentiment-negative-secondary);
+  color: var(--color-sentiment-negative-primary);
+}
+.wds-inline-prompt--negative a,
+.wds-inline-prompt--negative button {
+  color: var(--color-sentiment-negative-primary);
+}
+.wds-inline-prompt--negative a:hover,
+.wds-inline-prompt--negative button:hover {
+  color: var(--color-sentiment-negative-primary-hover);
+}
+.wds-inline-prompt--negative a:active,
+.wds-inline-prompt--negative button:active {
+  color: var(--color-sentiment-negative-primary-active);
+}
+.wds-inline-prompt.wds-inline-prompt--negative:has(a, button):hover {
+  background-color: var(--color-sentiment-negative-secondary-hover);
+}
+.wds-inline-prompt.wds-inline-prompt--negative:has(a, button):active {
+  background-color: var(--color-sentiment-negative-secondary-active);
+}
+.wds-inline-prompt--positive {
+  background-color: var(--color-sentiment-positive-secondary);
+  color: var(--color-sentiment-positive-primary);
+}
+.wds-inline-prompt--positive a,
+.wds-inline-prompt--positive button {
+  color: var(--color-sentiment-positive-primary);
+}
+.wds-inline-prompt--positive a:hover,
+.wds-inline-prompt--positive button:hover {
+  color: var(--color-sentiment-positive-primary-hover);
+}
+.wds-inline-prompt--positive a:active,
+.wds-inline-prompt--positive button:active {
+  color: var(--color-sentiment-positive-primary-active);
+}
+.wds-inline-prompt.wds-inline-prompt--positive:has(a, button):hover {
+  background-color: var(--color-sentiment-positive-secondary-hover);
+}
+.wds-inline-prompt.wds-inline-prompt--positive:has(a, button):active {
+  background-color: var(--color-sentiment-positive-secondary-active);
+}
+.wds-inline-prompt--proposition {
+  background-color: var(--color-sentiment-positive-secondary);
+  color: var(--color-sentiment-positive-primary);
+}
+.wds-inline-prompt--proposition a,
+.wds-inline-prompt--proposition button {
+  color: var(--color-sentiment-positive-primary);
+}
+.wds-inline-prompt--proposition a:hover,
+.wds-inline-prompt--proposition button:hover {
+  color: var(--color-sentiment-positive-primary-hover);
+}
+.wds-inline-prompt--proposition a:active,
+.wds-inline-prompt--proposition button:active {
+  color: var(--color-sentiment-positive-primary-active);
+}
+.wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):hover {
+  background-color: var(--color-sentiment-positive-secondary-hover);
+}
+.wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):active {
+  background-color: var(--color-sentiment-positive-secondary-active);
+}
+.wds-inline-prompt--neutral {
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.wds-inline-prompt--neutral a,
+.wds-inline-prompt--neutral button {
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.wds-inline-prompt.wds-inline-prompt--neutral:has(a, button):hover {
+  background-color: var(--color-background-neutral-hover);
+}
+.wds-inline-prompt.wds-inline-prompt--neutral:has(a, button):active {
+  background-color: var(--color-background-neutral-active);
+}
+.wds-inline-prompt--warning {
+  background-color: var(--color-sentiment-warning-secondary);
+  color: var(--color-sentiment-warning-content);
+}
+.wds-inline-prompt--warning a,
+.wds-inline-prompt--warning button {
+  color: var(--color-sentiment-warning-content);
+}
+.wds-inline-prompt--warning a:hover,
+.wds-inline-prompt--warning button:hover {
+  color: var(--color-sentiment-warning-content-hover);
+}
+.wds-inline-prompt--warning a:active,
+.wds-inline-prompt--warning button:active {
+  color: var(--color-sentiment-warning-content-active);
+}
+.wds-inline-prompt.wds-inline-prompt--warning:has(a, button):hover {
+  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 92%, var(--color-sentiment-warning-primary));
+}
+.wds-inline-prompt.wds-inline-prompt--warning:has(a, button):active {
+  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 84%, var(--color-sentiment-warning-primary));
+}
 .np-notification-dot {
   --np-notification-dot-size: 14px;
   position: relative;
@@ -2507,6 +2660,11 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   transition-duration: 300ms;
   /* TODO: Remove these overrides once `.form-control` isn’t used anymore */
 }
+.disabled .np-form-control,
+:disabled .np-form-control {
+  opacity: 1;
+  opacity: initial;
+}
 .np-form-control:focus-visible {
   outline: none;
 }
@@ -3026,159 +3184,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
     margin-top: var(--size-4);
   }
 }
-.wds-inline-prompt {
-  display: inline-flex;
-  text-align: left;
-  padding-top: calc(8px / 2);
-  padding-top: calc(var(--padding-x-small) / 2);
-  padding-bottom: calc(8px / 2);
-  padding-bottom: calc(var(--padding-x-small) / 2);
-  padding-left: calc(8px - 1px);
-  padding-left: calc(var(--padding-x-small) - 1px);
-  padding-right: 8px;
-  padding-right: var(--padding-x-small);
-  border-radius: 10px;
-  border-radius: var(--radius-small);
-  word-break: break-word;
-  word-wrap: break-word;
-}
-.wds-inline-prompt:has(a),
-.wds-inline-prompt:has(button) {
-  position: relative;
-  z-index: 1;
-}
-.wds-inline-prompt--muted {
-  opacity: 0.93;
-  filter: grayscale(1);
-}
-.wds-inline-prompt a,
-.wds-inline-prompt button {
-  text-underline-offset: calc(4px / 2);
-  text-underline-offset: calc(var(--size-4) / 2);
-}
-.wds-inline-prompt a:first-of-type:before,
-.wds-inline-prompt button:first-of-type:before {
-  content: '';
-  position: absolute;
-  inset: 0;
-}
-.wds-inline-prompt__media-wrapper {
-  padding-right: calc(12px / 2);
-  padding-right: calc(var(--size-12) / 2);
-  padding-top: calc(4px - 1px);
-  padding-top: calc(var(--size-4) - 1px);
-  padding-bottom: calc(4px - 1px);
-  padding-bottom: calc(var(--size-4) - 1px);
-}
-.wds-inline-prompt__media-wrapper .tw-icon-tags,
-.wds-inline-prompt__media-wrapper .tw-icon-confetti {
-  color: var(--color-sentiment-positive-primary);
-}
-.wds-inline-prompt--negative {
-  background-color: var(--color-sentiment-negative-secondary);
-  color: var(--color-sentiment-negative-primary);
-}
-.wds-inline-prompt--negative a,
-.wds-inline-prompt--negative button {
-  color: var(--color-sentiment-negative-primary);
-}
-.wds-inline-prompt--negative a:hover,
-.wds-inline-prompt--negative button:hover {
-  color: var(--color-sentiment-negative-primary-hover);
-}
-.wds-inline-prompt--negative a:active,
-.wds-inline-prompt--negative button:active {
-  color: var(--color-sentiment-negative-primary-active);
-}
-.wds-inline-prompt.wds-inline-prompt--negative:has(a, button):hover {
-  background-color: var(--color-sentiment-negative-secondary-hover);
-}
-.wds-inline-prompt.wds-inline-prompt--negative:has(a, button):active {
-  background-color: var(--color-sentiment-negative-secondary-active);
-}
-.wds-inline-prompt--positive {
-  background-color: var(--color-sentiment-positive-secondary);
-  color: var(--color-sentiment-positive-primary);
-}
-.wds-inline-prompt--positive a,
-.wds-inline-prompt--positive button {
-  color: var(--color-sentiment-positive-primary);
-}
-.wds-inline-prompt--positive a:hover,
-.wds-inline-prompt--positive button:hover {
-  color: var(--color-sentiment-positive-primary-hover);
-}
-.wds-inline-prompt--positive a:active,
-.wds-inline-prompt--positive button:active {
-  color: var(--color-sentiment-positive-primary-active);
-}
-.wds-inline-prompt.wds-inline-prompt--positive:has(a, button):hover {
-  background-color: var(--color-sentiment-positive-secondary-hover);
-}
-.wds-inline-prompt.wds-inline-prompt--positive:has(a, button):active {
-  background-color: var(--color-sentiment-positive-secondary-active);
-}
-.wds-inline-prompt--proposition {
-  background-color: var(--color-sentiment-positive-secondary);
-  color: var(--color-sentiment-positive-primary);
-}
-.wds-inline-prompt--proposition a,
-.wds-inline-prompt--proposition button {
-  color: var(--color-sentiment-positive-primary);
-}
-.wds-inline-prompt--proposition a:hover,
-.wds-inline-prompt--proposition button:hover {
-  color: var(--color-sentiment-positive-primary-hover);
-}
-.wds-inline-prompt--proposition a:active,
-.wds-inline-prompt--proposition button:active {
-  color: var(--color-sentiment-positive-primary-active);
-}
-.wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):hover {
-  background-color: var(--color-sentiment-positive-secondary-hover);
-}
-.wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):active {
-  background-color: var(--color-sentiment-positive-secondary-active);
-}
-.wds-inline-prompt--neutral {
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.wds-inline-prompt--neutral a,
-.wds-inline-prompt--neutral button {
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.wds-inline-prompt.wds-inline-prompt--neutral:has(a, button):hover {
-  background-color: var(--color-background-neutral-hover);
-}
-.wds-inline-prompt.wds-inline-prompt--neutral:has(a, button):active {
-  background-color: var(--color-background-neutral-active);
-}
-.wds-inline-prompt--warning {
-  background-color: var(--color-sentiment-warning-secondary);
-  color: var(--color-sentiment-warning-content);
-}
-.wds-inline-prompt--warning a,
-.wds-inline-prompt--warning button {
-  color: var(--color-sentiment-warning-content);
-}
-.wds-inline-prompt--warning a:hover,
-.wds-inline-prompt--warning button:hover {
-  color: var(--color-sentiment-warning-content-hover);
-}
-.wds-inline-prompt--warning a:active,
-.wds-inline-prompt--warning button:active {
-  color: var(--color-sentiment-warning-content-active);
-}
-.wds-inline-prompt.wds-inline-prompt--warning:has(a, button):hover {
-  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 92%, var(--color-sentiment-warning-primary));
-}
-.wds-inline-prompt.wds-inline-prompt--warning:has(a, button):active {
-  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 84%, var(--color-sentiment-warning-primary));
-}
 .wds-list-item-prompt {
   grid-area: prompt;
   justify-self: start;
@@ -3220,6 +3225,11 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   text-underline-offset: calc(4px / 2);
   text-underline-offset: calc(var(--size-4) / 2);
 }
+.wds-list-item a .wds-list-item-subtitle,
+.wds-list-item a .wds-list-item-subtitle-value {
+  color: #5d7079;
+  color: var(--color-content-secondary);
+}
 .wds-list-item-interactive .wds-list-item-control:focus-visible,
 .wds-list-item-interactive .np-checkbox-button:has(input[type="checkbox"]:focus-visible) .tw-checkbox-button {
   outline: none;

package/src/main.less

@@ -4,6 +4,7 @@
 @import "./actionOption/ActionOption.less";
 @import "./alert/Alert.less";
 @import "./avatar/Avatar.less";
+@import "./prompt/InlinePrompt/InlinePrompt.less";
 @import "./avatarView/AvatarView.less";
 @import "./avatarLayout/AvatarLayout.less";
 @import "./iconButton/IconButton.less";

package/src/moneyInput/MoneyInput.spec.tsx

@@ -406,7 +406,7 @@ describe('Money Input', () => {
       </>,
     );
 
-    expect(screen.getAllByLabelText('Prioritized label')[0]).toHaveClass('input-group');
+    expect(screen.getAllByLabelText('Prioritized label')[0]).toHaveClass('np-form-control');
   });
 
   it('supports `Field` for labeling', () => {
@@ -415,9 +415,24 @@ describe('Money Input', () => {
         <MoneyInput {...initialProps} />
       </Field>,
     );
+
     expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Recipient gets/);
   });
 
+  it('focuses money input when `Field` label is clicked', async () => {
+    const label = 'Recipient gets';
+
+    render(
+      <Field label={label}>
+        <MoneyInput {...initialProps} />
+      </Field>,
+    );
+
+    const input = screen.getByRole('textbox');
+    await userEvent.click(screen.getByLabelText(label));
+    expect(input).toHaveFocus();
+  });
+
   describe('ids', () => {
     it('renders Select component with generated id when id is not provided', () => {
       customRender();

package/src/moneyInput/MoneyInput.tsx

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

package/src/neptune-css/NeptuneCSS.story.tsx

@@ -0,0 +1,142 @@
+import React, { ReactNode } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import clsx from 'clsx';
+import AvatarView from '../avatarView';
+import Tooltip from '../tooltip';
+import IconButton from '../iconButton';
+import Body from '../body';
+
+const meta: Meta = {
+  title: 'NeptuneCSS',
+  component: () => <div>NeptuneCSS Example</div>,
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Colors: Story = {
+  render: () => {
+    return (
+      <Body>
+        {colorTokens.map((token) => (
+          <ColorToken key={token} token={token} className="m-b-2" />
+        ))}
+      </Body>
+    );
+  },
+};
+
+const colorTokens = [
+  '--color-content-primary',
+  '--color-bright-yellow',
+  '--color-bright-orange',
+  '--color-dark-purple',
+  '--color-dark-gold',
+  '--color-bright-blue',
+  '--color-dark-charcoal',
+  '--color-white',
+  '--color-black',
+  '--color-bright-green',
+  '--color-forest-green',
+  '--color-bright-pink',
+  '--color-dark-maroon',
+  '--color-content-primary',
+  '--color-content-secondary',
+  '--color-content-tertiary',
+  '--color-content-link',
+  '--color-content-link-hover',
+  '--color-content-link-active',
+  '--color-interactive-control',
+  '--color-interactive-control-hover',
+  '--color-interactive-control-active',
+  '--color-interactive-primary',
+  '--color-interactive-primary-hover',
+  '--color-interactive-primary-active',
+  '--color-interactive-secondary',
+  '--color-interactive-secondary-hover',
+  '--color-interactive-secondary-active',
+  '--color-interactive-accent',
+  '--color-interactive-accent-hover',
+  '--color-interactive-accent-active',
+  '--color-interactive-contrast',
+  '--color-interactive-contrast-hover',
+  '--color-interactive-contrast-active',
+  '--color-interactive-neutral',
+  '--color-interactive-neutral-hover',
+  '--color-interactive-neutral-active',
+  '--color-border-neutral',
+  '--color-border-overlay',
+  '--color-background-screen',
+  '--color-background-screen-hover',
+  '--color-background-screen-active',
+  '--color-background-elevated',
+  '--color-background-neutral',
+  '--color-background-neutral-hover',
+  '--color-background-neutral-active',
+  '--color-background-overlay',
+  '--color-background-surface',
+  '--color-sentiment-negative',
+  '--color-sentiment-negative-hover',
+  '--color-sentiment-negative-active',
+  '--color-sentiment-negative-primary',
+  '--color-sentiment-negative-primary-hover',
+  '--color-sentiment-negative-primary-active',
+  '--color-sentiment-negative-secondary',
+  '--color-sentiment-negative-secondary-hover',
+  '--color-sentiment-negative-secondary-active',
+  '--color-sentiment-positive',
+  '--color-sentiment-positive-hover',
+  '--color-sentiment-positive-active',
+  '--color-sentiment-positive-primary',
+  '--color-sentiment-positive-primary-hover',
+  '--color-sentiment-positive-primary-active',
+  '--color-sentiment-positive-secondary',
+  '--color-sentiment-positive-secondary-hover',
+  '--color-sentiment-positive-secondary-active',
+  '--color-sentiment-warning',
+  '--color-sentiment-warning-hover',
+  '--color-sentiment-warning-active',
+  '--color-sentiment-warning-primary',
+  '--color-sentiment-warning-primary-hover',
+  '--color-sentiment-warning-primary-active',
+  '--color-sentiment-warning-secondary',
+  '--color-sentiment-warning-secondary-hover',
+  '--color-sentiment-warning-secondary-active',
+  '--color-sentiment-warning-content',
+  '--color-sentiment-warning-content-hover',
+  '--color-sentiment-warning-content-active',
+  '--color-contrast',
+  '--color-light',
+  '--color-dark',
+  '--color-contrast-overlay',
+  '--color-contrast-theme',
+];
+
+function ColorToken(props: { token: string; className?: string }) {
+  const color = `var(${props.token})`;
+  const [tooltipLabel, setTooltipLabel] = React.useState<ReactNode>('Copy Token Name');
+  return (
+    <div className={clsx('d-flex', 'align-items-center', props.className)}>
+      <IconButton
+        aria-label="Copy color"
+        size={72}
+        className="m-r-2"
+        onClick={async () => {
+          await navigator.clipboard.writeText(color);
+          setTooltipLabel('Copied!');
+        }}
+      >
+        <Tooltip label={<Body type="body-large-bold">{tooltipLabel}</Body>} position="top">
+          <AvatarView
+            size={72}
+            style={{ backgroundColor: color, border: 'solid 1px var(--color-border-neutral)' }}
+          >
+            {null}
+          </AvatarView>
+        </Tooltip>
+      </IconButton>
+      <code className="m-l-2">{props.token}</code>
+    </div>
+  );
+}

package/src/phoneNumberInput/PhoneNumberInput.spec.tsx

@@ -314,4 +314,36 @@ describe('PhoneNumberInput', () => {
     );
     expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Phone number/);
   });
+
+  it('focuses country code input when `Field` label is clicked', async () => {
+    const label = 'Phone number';
+
+    render(
+      <Field label={label}>
+        <PhoneNumberInput initialValue="+12345678" onChange={() => {}} />
+      </Field>,
+    );
+
+    await userEvent.click(screen.getByText(label, { selector: 'label:not(.sr-only)' })); // Have to use `getByText` due to the way `Field` handles group labelling
+    const countryCodeFilterInput = screen.getByRole('combobox');
+    expect(countryCodeFilterInput).toHaveFocus();
+  });
+
+  it('focuses number input when `Field` label is clicked and country code is disabled', async () => {
+    const label = 'Phone number';
+
+    render(
+      <Field label={label}>
+        <PhoneNumberInput
+          initialValue="+12345678"
+          selectProps={{ disabled: true }}
+          onChange={() => {}}
+        />
+      </Field>,
+    );
+
+    const phoneNumberInput = screen.getByRole('textbox');
+    await userEvent.click(screen.getByText(label, { selector: 'label:not(.sr-only)' })); // Have to use `getByText` due to the way `Field` handles group labelling
+    expect(phoneNumberInput).toHaveFocus();
+  });
 });

package/src/phoneNumberInput/PhoneNumberInput.tsx

@@ -1,8 +1,8 @@
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect, useMemo, useRef } from 'react';
 import { useIntl } from 'react-intl';
 
 import { Size, SizeLarge, SizeMedium, SizeSmall } from '../common';
-import { useInputAttributes } from '../inputs/contexts';
+import { useFieldLabelRef, useInputAttributes } from '../inputs/contexts';
 import { SelectInput, SelectInputOptionContent, SelectInputProps } from '../inputs/SelectInput';
 import messages from './PhoneNumberInput.messages';
 import countries from './data/countries';
@@ -58,7 +58,10 @@ 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();
@@ -71,6 +74,7 @@ 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'),
@@ -162,18 +166,34 @@ 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 (
-    <div
-      role="group"
-      {...inputAttributes}
-      aria-labelledby={ariaLabelledBy}
-      className="tw-telephone"
-    >
-      <label className="sr-only" id={ids.countryCode.label}>
+    <fieldset {...inputAttributes} aria-labelledby={ariaLabelledBy} className="tw-telephone">
+      <label className="sr-only" id={ids.countryCode.label} htmlFor={ids.countryCode.select}>
         {formatMessage(messages.countryCodeLabel)}
       </label>
       <div className="tw-telephone__country-select">
         <SelectInput
+          triggerRef={countryCodeSelectRef}
           placeholder={formatMessage(messages.selectInputPlaceholder)}
           items={[...countriesByPrefix].map(([prefix, countries]) => ({
             type: 'option',
@@ -225,8 +245,9 @@ const PhoneNumberInput = ({
         {formatMessage(messages.phoneNumberLabel)}
       </label>
       <div className="tw-telephone__number-input">
-        <div className={`input-group input-group-${size}`}>
+        <div className={`input-group input-group-${size} ${disabled ? 'disabled' : ''}`}>
           <Input
+            ref={phoneNumberInputRef}
             id={ids.phoneNumber.input}
             autoComplete="tel-national"
             name="phoneNumber"
@@ -243,7 +264,7 @@ const PhoneNumberInput = ({
           />
         </div>
       </div>
-    </div>
+    </fieldset>
   );
 };