undefined is not a constructor (evaluating 'new Intl.ListFormat()') exceptions in Playwright webkit and 'Mobile Safari' tests when using Modal with slot="title"

[philwolstenholme]

Hi all,

Big React Aria fan here, thank you for all your work and to Adobe for sharing so much good stuff.

Since we started using slot="title" on a Heading component to give our Modal dialogs a correct aria-describedby value our Playwright Webkit and 'Mobile Safari' browser tests have been failing with undefined is not a constructor (evaluating 'new Intl.ListFormat()') as a result of our codebase now calling useSlottedContext. If I revert our use of slot="title" then the issue goes away.

We're on the latest version of Playwright so should be using a recent Webkit, and I don't known about Webkit specifically, but recent Safari versions should be fine with new Intl.ListFormat() (caniuse, MDN).

I don't think this is a React Aria issue per se, but I was wondering if anyone had any ideas for what I could do to work around this issue? I tried adding https://polyfill.io/v3/polyfill.min.js?features=Intl.ListFormat,Intl.ListFormat.~locale.en as a polyfill, but that didn't seem to help.

Our `Modal.tsx` implementation

import React, { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import clsx from 'clsx';
import { mergeProps } from 'react-aria';
import { Heading, ModalOverlayProps } from 'react-aria-components';

import { Button, ButtonProps } from '@/components/Button/Button';
import { Icon } from '@/components/Icon';

import { NiceModalContext } from './NiceModal/NiceModalModal';
import { ReactAriaWrapper } from './ReactAriaWrapper';

interface ModalContext {
  closeModal: () => void;
}

// @TODO: what's best to do here?
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-explicit-any
const ModalContext = React.createContext<ModalContext>(null as any);

export const Modal = ({
  children,
  modalProps,
  closeAction
}: {
  children: React.ReactNode;
  /** See https://react-spectrum.adobe.com/react-aria/Modal.html#props */
  modalProps?: ModalOverlayProps;
  closeAction?: () => void;
}) => {
  const router = useRouter();
  const eBayModalContext = React.useContext(NiceModalContext);
  const [isOpen, setIsOpen] = useState(eBayModalContext ? eBayModalContext.modal.visible : true);

  const defaultModalProps = {
    isDismissable: true
  };

  modalProps = modalProps ? mergeProps(defaultModalProps, modalProps) : defaultModalProps;

  const closeModal = () => {
    setIsOpen(false);
    closeAction ? closeAction() : router.back();
  };

  useEffect(() => {
    if (eBayModalContext) {
      setIsOpen(eBayModalContext.modal.visible);
    }
  }, [eBayModalContext]);

  return (
    <ModalContext.Provider value={{ closeModal }}>
      <ReactAriaWrapper closeModal={closeModal} isOpen={isOpen} modalProps={modalProps}>
        {children}
      </ReactAriaWrapper>
    </ModalContext.Provider>
  );
};

Modal.Body = function ModalBody({
  children,
  className
}: {
  children: React.ReactNode;
  className?: string;
}) {
  return <div className={clsx('space-y-4 md:w-[min(90vw,447px)]', className)}>{children}</div>;
};

Modal.Heading = function ModalHeading({
  children,
  className
}: {
  children: React.ReactNode;
  className?: string;
}) {
  return (
    // We use the RAC heading component (with the 'title' slot name) to make
    // sure the aria-describedby for the whole modal is set
    <Heading slot="title" className={clsx('text-2xl font-semibold', className)}>
      {children}
    </Heading>
  );
};

Modal.Footer = function ModalFooterWithGap({ children }: { children: React.ReactNode }) {
  return <div className="flex flex-col gap-2">{children}</div>;
};

Modal.CloseButton = function CloseButton() {
  const { closeModal } = React.useContext(ModalContext);

  return (
    <div className="flex justify-end">
      <button
        type="button"
        // Use a transparent border to increase the tap target size. Use
        // negative margins to prevent the border affecting alignment.
        className="-m-4 -mt-2 border-[20px] border-transparent bg-clip-padding"
        onClick={closeModal}
      >
        <span className="sr-only">Close</span>
        <Icon
          icon="close"
          className="h-6 w-6 transition-transform duration-75 ease-in-out hocus:scale-110"
        />
      </button>
    </div>
  );
};

Modal.Button = function NavigationButton({ children, ...rest }: ButtonProps) {
  const { closeModal } = React.useContext(ModalContext);

  const mergedProps: ButtonProps = mergeProps(
    {
      onClick: () => {
        closeModal();
      }
    },
    rest
  );
  return <Button {...mergedProps}>{children}</Button>;
};

Edit: just seen this which looks interesting: microsoft/playwright#23978

[reidbarber]

Should be fixed in Playwright v1.40 via a webkit update on their end (microsoft/playwright#28178). Posting in case others come across this via search.