bug(fix): PhoneNumberField does not honor readonly prop

.changeset/serious-geckos-act.md

@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-react": patch
+---
+
+bug(fix): PhoneNumberField does not honor readonly prop

packages/react/src/primitives/PhoneNumberField/CountryCodeSelect.tsx

@@ -7,20 +7,26 @@ import { CountryCodeSelectProps, Primitive } from '../types';
 import { SelectField } from '../SelectField';
 
 const CountryCodeSelectPrimitive: Primitive<CountryCodeSelectProps, 'select'> =
-  ({ className, dialCodeList, ...props }, ref) => {
+  ({ className, dialCodeList, isReadOnly, ...props }, ref) => {
     const dialList = dialCodeList ?? countryDialCodes;
     const countryCodeOptions = React.useMemo(
       () =>
         dialList.map((dialCode) => (
-          <option key={dialCode} value={dialCode}>
+          // Regarding the `disabled` attribute, see comment in SelectField below
+          <option key={dialCode} value={dialCode} disabled={isReadOnly}>
             {dialCode}
           </option>
         )),
-      [dialList]
+      [dialList, isReadOnly]
     );
 
     return (
       <SelectField
+        /*
+          Since <select> elements do not support the `readonly` html attribute, it is suggested to use the `disabled` html attribute 
+          so that a screen reader will announce something to the user about the interactivity of the options list ( https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
+        */
+        aria-disabled={isReadOnly}
         autoComplete="tel-country-code"
         className={classNames(ComponentClassNames.CountryCodeSelect, className)}
         labelHidden={true}

packages/react/src/primitives/PhoneNumberField/PhoneNumberField.tsx

@@ -16,6 +16,7 @@ const PhoneNumberFieldPrimitive: Primitive<PhoneNumberFieldProps, 'input'> = (
     defaultCountryCode,
     hasError,
     isDisabled,
+    isReadOnly,
     onCountryCodeChange,
     onInput,
     size,
@@ -36,6 +37,7 @@ const PhoneNumberFieldPrimitive: Primitive<PhoneNumberFieldProps, 'input'> = (
           className={className}
           hasError={hasError}
           isDisabled={isDisabled}
+          isReadOnly={isReadOnly}
           label={countryCodeLabel}
           name={countryCodeName}
           onChange={onCountryCodeChange}
@@ -48,6 +50,7 @@ const PhoneNumberFieldPrimitive: Primitive<PhoneNumberFieldProps, 'input'> = (
       className={classNames(ComponentClassNames.PhoneNumberField, className)}
       hasError={hasError}
       isDisabled={isDisabled}
+      isReadOnly={isReadOnly}
       isMultiline={false}
       onInput={onInput}
       ref={ref}

packages/react/src/primitives/PhoneNumberField/__tests__/PhoneNumberField.test.tsx

@@ -3,8 +3,13 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { PhoneNumberField } from '../PhoneNumberField';
+import { Flex } from '../../Flex';
+import { Button } from '../../Button';
 import { ComponentClassNames } from '../../shared/constants';
 
+const originalLog = console.log;
+console.log = jest.fn();
+
 describe('PhoneNumberField primitive', () => {
   const setup = async ({
     defaultCountryCode = '+1',
@@ -29,6 +34,31 @@ describe('PhoneNumberField primitive', () => {
     };
   };
 
+  const ReadOnlyFormTest = () => {
+    const inputRef = React.useRef(null);
+    const countryCodeRef = React.useRef(null);
+
+    const handleSubmit = (e) => {
+      e.preventDefault();
+      console.log(`${countryCodeRef.current.value} ${inputRef.current.value}`);
+    };
+
+    return (
+      <Flex as="form" onSubmit={handleSubmit}>
+        <PhoneNumberField
+          defaultCountryCode="+40"
+          defaultValue="1234567"
+          label="Read Only"
+          name="read_only_phone"
+          ref={inputRef}
+          countryCodeRef={countryCodeRef}
+          isReadOnly
+        />
+        <Button type="submit">Submit</Button>
+      </Flex>
+    );
+  };
+
   it('should forward ref and countryCodeRef to DOM elements', async () => {
     const ref = React.createRef<HTMLInputElement>();
     const countryCodeRef = React.createRef<HTMLSelectElement>();
@@ -135,4 +165,28 @@ describe('PhoneNumberField primitive', () => {
 
     expect(onCountryCodeChange).toHaveBeenCalled();
   });
+
+  /*
+    Since <select> elements do not support the `readonly` html attribute, it is suggested to use the `disabled` html attribute 
+    so that a screen reader will announce something to the user about the interactivity of the options list ( https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
+  */
+  it('should set aria-disabled="true" when the isReadOnly prop is passed, and disable all the select options', async () => {
+    const { $countryCodeSelector } = await setup({ isReadOnly: true });
+
+    expect($countryCodeSelector).toHaveAttribute('aria-disabled', 'true');
+
+    $countryCodeSelector.querySelectorAll('option').forEach((option) => {
+      expect(option).toHaveAttribute('disabled');
+    });
+  });
+
+  it('should still submit the form values when the isReadOnly prop is passed', async () => {
+    const { container } = render(<ReadOnlyFormTest />);
+
+    const button = container.getElementsByTagName('button')[0];
+    userEvent.click(button);
+    expect(console.log).toHaveBeenCalledWith('+40 1234567');
+
+    console.log = originalLog;
+  });
 });

packages/react/src/primitives/types/phoneNumberField.ts

@@ -19,4 +19,5 @@ export interface PhoneNumberFieldProps extends TextInputFieldProps {
 export interface CountryCodeSelectProps extends SelectFieldProps {
   defaultValue: string;
   dialCodeList?: Array<string>;
+  isReadOnly?: boolean;
 }