This content originally appeared on Level Up Coding - Medium and was authored by Aishwarya
Portals are not used as frequently as some other features in React, but they are powerful and valuable tools in certain situations.
Portals are most commonly used when rendering a child component in a different part of the DOM hierarchy than its parent component. This is often necessary when creating UI components like modal dialog boxes, popovers, tooltips, or other overlays that must be positioned relative to a specific element on the page or displayed outside the current DOM hierarchy.
For example, you could render a modal dialog box that needs to appear in the center of the screen or a tooltip that needs to be positioned relative to a specific element on the page. In the example below, the modal is nested inside the root div.
Using a Portal, we can make the modal component “break out” of its parent container and be rendered in a different location in the DOM hierarchy. To create a portal, you use the ReactDOM.createPortal() method. This method takes two arguments: the first is the child component you want to render in the portal, and the second is the DOM node where you want to generate the component.
Now that we’ve established what is Portal and why we use them, the next question is, are they accessible?
Are Portals Accessible?
Yes, portals can be made accessible by following standard accessibility practices.
- Use ARIA attributes
When using portals in React, it is essential to ensure that the Portal's content is still accessible to all users, including those who use assistive technologies like screen readers. This means the content must be keyboard navigable, and all relevant ARIA attributes should be applied to the Portal content.
Here’s an example of how to add ARIA attributes to a portal:
2. Focus management
Additionally, the focus management of the Portal should be carefully considered. When a portal is opened, it should adequately manage focus so that keyboard users can easily navigate to and interact with the Portal content. The focus should be restored to the appropriate element when the outlet is closed.
In the below example, the reference passed to the modal’s div “modalRef” is used to move the focus to the dialog when the dialog is opened. The “activeElement” stores the reference to the currently active element, so when the dialog is closed, the focus is moved away from this element inside the dialog.
Overall, portals are a powerful feature in React that can help create a more accessible user interface as long as they are implemented thoughtfully and with accessibility in mind.
Level Up Coding
Thanks for being a part of our community! Before you go:
- 👏 Clap for the story and follow the author 👉
- 📰 View more content in the Level Up Coding publication
- 💰 Free coding interview course ⇒ View Course
- 🔔 Follow us: Twitter | LinkedIn | Newsletter
🚀👉 Join the Level Up talent collective and find an amazing job
What are Portals in React, and How do you Make them Accessible was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Aishwarya
Aishwarya | Sciencx (2023-03-20T16:17:27+00:00) What are Portals in React, and How do you Make them Accessible. Retrieved from https://www.scien.cx/2023/03/20/what-are-portals-in-react-and-how-do-you-make-them-accessible/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.