Explicit accessibility contracts make React components more portable
A component that works in a React app doesn't automatically work when you reuse it elsewhere in the React ecosystem. I moved a design-system layout component from a React app into a Next project and it broke. The problem wasn't that Next couldn't render the component; it was that the component assumed a particular ownership and composition model. That assumption affected its accessibility too.…
The article discusses how accessibility issues arise when reusing React components across different React frameworks, such as Next.js. The issue lies in the assumption made by the component about its composition, which affects its accessibility. To address this, the author refactored the layout component into two separate components: a shell and the content.
The shell owns the skip link, header, and main landmark, while the content owns the page heading and body. This change makes the accessibility relationship explicit and makes the component more portable across different React frameworks. The article explains that the shell and content are separated by an explicit boundary, with the focus target and its stable identity being clearly defined.
The use of a shared ID as an interface between the two components ensures consistent behavior and makes the relationship visible, rather than relying on a hidden convention. While there is still a limitation to the API design, making the accessibility contract explicit is a significant improvement over the previous implementation.
This approach allows for easier composition of components in different React frameworks, ultimately making the component more portable.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
