Is it good to have too much space in-between typography and icon (arrow) on a link? For instance, when looking at the Adidas website on tablet and mobile you notice that there is a lot of space in-between font and icon (arrow)? Is this good in terms of accessibility? I would say no because of the gestalt point of proximity. What is best for the user and why? Could you help with some academic / official source documentation that justifies your position on this?
The question is based on a misconception, you may have to adjust the content to a real example where the described situation occurs to get an academic / official source documentation answer ;-).
For a situation similar to the one described to become an accessibility problem, it should meet the following requirements:
- The icon must or should refer directly to the name
- The icon must or should belong to that name
In this case, the separation is so pronounced that in a digital environment it can lead to a misinterpretation of the association of both elements.
But the Adidas example does not meet either of the two requirements.
- The icons do not refer to the label, there is no man, woman, kids, or shoes
- They don't belong to the label but refer to the table row indicating that it's collapsible
Therefore, regardless of whether or not the row has its corresponding outline, the action of the icon is on the entire row that corresponds to the label, not on the name itself. Gestaltically, the name marks the beginning of the row while the collapse icon closes it: closure law, situation even more evident as both elements are located on each side of the screen.
You're right, there are accessibility issues, and you're right again, it conflicts with the law of proximity of Gestalt.
These problems are important from a cognitive point of view, but they don't affect functionality. If you click anywhere in the line, you get the interaction you want.
So some accessibility and cognitive cues have been sacrificed to achieve a more uniform appearance. If the arrows were at the end of each navigation element's labels, it would cause other problems, both in terms of consistency and cognitive friction, since the arrows would be scattered everywhere.
In short, while you're correct in your assessment, this is a classic UI compromise. And as long as the functionality is preserved, we can say that their solution is correct.
What worries me is your second image. The chat icon above the arrows is certainly wrong, and there's no way to positively evaluate this floating element above an actionable element and its visual cues.