React

Give every box a name, link hints and errors to their boxes, move the focus to an error summary, and tell everyone when the form is busy or done.

Make a React app work with only a keyboard. Learn Tab order, tabIndex, focus rings, moving focus with refs, a focus trap for a modal, skip links and arrow keys.

How screen readers learn about a page, why a real button beats a div, and how to write ARIA names, states and live regions in JSX. The examples are checked in Chromium.

A slot is a prop that holds JSX, so one component can have many holes for the parent to fill. Build a Card, a page layout and a notice with named slots.

The children prop holds plain data you can read. Learn what it holds, React’s Children API and its traps, and the simpler ways React’s docs suggest instead.

Make one Button that can also be a link. Learn the as prop, the asChild pattern, how to build a small Slot that merges props, and when to use each.

A portal draws a component’s tags somewhere else on the page. Learn why modals need one, how events and context still work, and how to build a modal.

A higher-order component is a function that takes a component and gives back a new one. Learn how to build and type one, its rules and problems, and why hooks replaced most of them.

A render prop is a function you pass to a component. The component calls it with its own data, and your function says what to show. Learn when to use one, and when a hook is better.

Build tabs that work with a mouse, a keyboard and a screen reader. Learn the roles, the arrow keys, the roving tabindex, matching by value, and hidden panels.