QReact · Interview preparation
What makes a React dialog accessible?
A dialog needs an accessible name, managed keyboard focus, and an appropriate way to close it.
The idea to remember.
A dialog needs an accessible name, managed keyboard focus, and an appropriate way to close it. Native dialog elements or thoroughly tested accessible primitives reduce the need for custom focus handling.
01Learn by doing
From first example to real project.
Start with the smallest working idea, examine a more detailed example, then look at a real application pattern. Adapt dependencies, error handling and data models to your project.
Basic: pass content through children
01 / BEGINNERCompose a reusable panel without hardcoding its content.
function Panel({ title, children }) {
return <section><h2>{title}</h2>{children}</section>;
}Intermediate: share state with context
02 / INTERMEDIATEPut truly shared values in context, not every temporary input.
const ThemeContext = React.createContext('light');
function ThemeLabel() {
const theme = React.useContext(ThemeContext);
return <span>Theme: {theme}</span>;
}Real scenario: reducer for complex UI
03 / REAL SCENARIOGroup related updates in a reducer for a multi-step workflow.
function reducer(state, action) {
if (action.type === 'NEXT') return { ...state, step: state.step + 1 };
if (action.type === 'BACK') return { ...state, step: Math.max(0, state.step - 1) };
return state;
}
const [wizard, dispatch] = React.useReducer(reducer, { step: 0 });02Check your understanding
Try it in your own words.
Explain what makes a React dialog accessible without looking at the code. Then modify the intermediate example, describe one trade-off and identify when the real-world pattern fits.
Keep learning here.
Explore more in-depth guides, exercises and related interview questions in this library.
Browse React study guides ↗