You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When using height and width in px, there can be issues with accessibility in regards to text-only zoom. Because text zooms and the edges around it do not, edges and nodes rendered with dagree mutate to odd angles and nodes overlap one another.
Visit reactflow's example using dagre. Open it in the code sandbox. Change the text in the nodes to be longer for more of an effect.
Zoom in using browser controls. Note that even though the text gets larger, the edges do not elongate to match.
Allowing for the use of rems (pxValue / 16) will alleviate the text zoom issue and make this library more accessible to users with low vision, or anyone who needs it.
The text was updated successfully, but these errors were encountered:
angel1199410
changed the title
Allow for usage of rem or px in height and width
Accessibility: allow for usage of rem or px in height and width
Jul 26, 2023
When using height and width in
px
, there can be issues with accessibility in regards to text-only zoom. Because text zooms and the edges around it do not, edges and nodes rendered with dagree mutate to odd angles and nodes overlap one another.To recreate the issue:
reactflow
's example usingdagre
. Open it in the code sandbox. Change the text in the nodes to be longer for more of an effect.Allowing for the use of rems (
pxValue / 16
) will alleviate the text zoom issue and make this library more accessible to users with low vision, or anyone who needs it.The text was updated successfully, but these errors were encountered: