A11y React components #a11y #react

A11yReact.tsx

// https://reactjs.org/docs/accessibility.html
import React from 'react';

function ListItem({ item }) {
  return (
    // https://reactjs.org/docs/fragments.html
    <>
      <dt>{item.term}</dt>
      <dd>{item.description}</dd>
    </>
  );
}

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        <ListItem item={item} key={item.id} />
      ))}
    </dl>
  );
}