Asking the same question different AI models

00_README.md

The tweet

https://twitter.com/JLarky/status/1639832543766941703

Bard

Bing Chat

Copilot X

GPT-3.5

GPT-4 (failed to finish, I tried two times)

Conclusion

I figured it's probably not entirely clear how to interpret the results, so here it is: all of them are wrong

01_prompt.txt

Rewrite this component to be accessible:

export const Checkbox = ({
  atom,
  children,
}: {
  atom: BooleanConfigAtom;
  children: React.ReactNode;
}) => {
  const [value, setValue] = useAtom(atom);
  return (
    <div
      className="text-blue-500 flex items-center gap-3 cursor-pointer"
      onClick={() => setValue(x => !x)}
    >
      {value ? <CheckboxOff className="w-5" /> : <CheckboxOn className="w-5" />}
      <span className="text-black">{children}</span>
    </div>
  );
};

bard.tsx

<div
  className="text-blue-500 flex items-center gap-3 cursor-pointer"
  onClick={() => setValue(x => !x)}
  aria-role="checkbox"
  aria-label={children}
>
  {value ? <CheckboxOff className="w-5" /> : <CheckboxOn className="w-5" />}
</div>

copilot.tsx

export const Checkbox = ({
  atom,
  children,
}: {
  atom: BooleanConfigAtom;
  children: React.ReactNode;
}) => {
  const [value, setValue] = useAtom(atom);
  const id = useId();
  return (
    <div className="text-blue-500 flex items-center gap-3 cursor-pointer">
      <label htmlFor={id}>
        <input
          id={id}
          type="checkbox"
          checked={value}
          onChange={() => setValue(x => !x)}
          className="sr-only"
        />
        {value ? <CheckboxOff className="w-5" /> : <CheckboxOn className="w-5" />}
        <span className="text-black">{children}</span>
      </label>
    </div>
  );
};

GPT-3.5.tsx

import { useState } from 'react';

type CheckboxProps = {
  id: string;
  label: string;
  defaultChecked?: boolean;
  onChange: (checked: boolean) => void;
};

export const Checkbox = ({
  id,
  label,
  defaultChecked = false,
  onChange,
}: CheckboxProps) => {
  const [checked, setChecked] = useState(defaultChecked);

  const handleClick = () => {
    const newChecked = !checked;
    setChecked(newChecked);
    onChange(newChecked);
  };

  const handleKeyDown = (event: React.KeyboardEvent) => {
    if (event.key === 'Enter' || event.key === ' ') {
      handleClick();
    }
  };

  return (
    <div role="checkbox" aria-checked={checked} tabIndex={0} onKeyDown={handleKeyDown}>
      <input type="checkbox" id={id} checked={checked} onChange={() => {}} />
      <label htmlFor={id} onClick={handleClick}>
        {label}
      </label>
    </div>
  );
};

GPT-4.tsx

import React from 'react';
import { useAtom } from 'jotai';
import { BooleanConfigAtom } from 'path/to/BooleanConfigAtom';

export const Checkbox = ({
  atom,
  children,
  id,
  labelText,
}: {
  atom: BooleanConfigAtom;
  children: React.ReactNode;
  id: string;
  labelText: string;
}) => {
  const [value, setValue] = useAtom(atom);

  const handleKeyPress = (event: React.KeyboardEvent<HTMLLabelElement>) => {
    if (event.key === 'Enter' || event.key === ' ') {
      setValue(x => !x);
      event.preventDefault();
    }
  };

  return (
    <div className="text-blue-500 flex items-center gap-3">
      <input
        type="checkbox"
        id={id}
        checked={value}
        onChange={() => setValue(x => !x)}
        className="hidden"
      />
      <label
        htmlFor={id}
        tabIndex={0}
        className="cursor-pointer flex items-center gap-3"
        onKeyPress={handleKeyPress}
        aria-label={labelText}
      >
        {value ? (
          <CheckboxOff className="w-5" aria-hidden="true" />
        ) : (
          <CheckboxOn className="w