A11y talk

bad_code_example.jsx

// Bad Code
const No = () => (
  <div>
    <DivSoup />
    <ForDinner />
  </div>
);

const DivSoup = () => (
  <div className="heading-1">
    Some Headline!!
  </div>
);

const ForDinner = (checkboxes) => (
  <div>
    Choices
    {checkboxes.map((value, i) => (
      <div
        className="fancy-checkbox"
        onClick={handler}
      >
        {`Option ${i}`}
      </div>
    ))}
    <div onClick={submit}>
      Submit
    </div>
  </div>
);

// Semantic Refactor
const No = () => (
  <>
    <DivSoup />
    <ForDinner />
  </>
);

const DivSoup = () => (
  <h1>
    Some Headline!!
  </h1>
);

const ForDinner = (checkboxes) => (
  <form>
    <fieldset>
      <legend>
        Choices
      </legend>
      {checkboxes.map(({ value, id }) => (
        <input
          type="checkbox"
          id={id}
          name={value}
          onClick={handler}
        />
        <label htmlFor={id}>
          {value}
        </label>
      ))}
    </fieldset>
    <button type="submit" onClick={submit}>
      Submit
    </button>
  </form>
);