How do ARIA attributes help improve accessibility in a React component?

ARIA attributes give extra information to screen readers when plain HTML is not enough to describe what an element does. For example, aria label describes a button that only has an icon, and aria expanded tells a screen reader whether a menu is open or closed. ARIA should only be used when semantic HTML alone cannot express the meaning.

function MenuButton({ isOpen, onClick }) {
  return (
    <button aria-expanded={isOpen} aria-label="Open navigation menu" onClick={onClick}>
      <MenuIcon />
    </button>
  );
}