no-boolean-autofocus-on-modal-dialog

The modal dialog should only have ref's in the autoFocus prop. The default value is true, which is the most accessible base case. Using false results in accessibility issues and should be avoided.

This rule will warn makers if the autoFocus prop is set using a boolean.

<ModalDialog autoFocus={true}>
 ^^^^^^^^^^^ `autoFocus` should be set to a component's `ref` or left to resolve to the default value of `true`. It is recommended to leave it as is for a maximally accessible experience.
    <ModalHeader hasCloseButton>
        <ModalTitle>Modal Title</ModalTitle>
    </ModalHeader>
</ModalDialog>

<ModalDialog autoFocus={false}>
 ^^^^^^^^^^^ `autoFocus` should be set to a component's `ref` or left to resolve to the default value of `true`. It is recommended to leave it as is for a maximally accessible experience.
    <ModalHeader hasCloseButton>
        <ModalTitle>Modal Title</ModalTitle>
    </ModalHeader>
</ModalDialog>

<ModalDialog>
    <ModalHeader hasCloseButton>
        <ModalTitle>Modal Title</ModalTitle>
    </ModalHeader>
</ModalDialog>

const ref = useRef<HTMLElement>(null);

<ModalDialog autoFocus={ref}>
    <ModalHeader hasCloseButton>
        <ModalTitle>Modal Title</ModalTitle>
    </ModalHeader>
    <ModalBody>
        <p tabindex={-1} ref={ref}>
            This is the content.
        </p>
    </ModalBody>
</ModalDialog>;