Modal with auto-focus

Modal with an auto-focused button.

auto-focus is generally not recommended from an accessibility point of view, but maybe useful for some times of confirmation modals.

import { useState } from 'react';
import { Modal } from '@citizensadvice/react-dialogs';

export function Example() {
  const [show, setShow] = useState();

  return (
    <>
      <button
        type="button"
        onClick={() => setShow(!show)}
        aria-expanded={show ? 'true' : 'false'}
        aria-haspopup="dialog"
      >
        Toggle
      </button>
      {show && (
        <Modal title="Modal title" onClose={() => setShow(false)}>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </p>
          <p>
            <button
              type="button"
              data-auto-focus
              onClick={() => setShow(false)}
            >
              Close
            </button>
          </p>
        </Modal>
      )}
    </>
  );
}