visual-framework
Update design of the vf-breadcrumbs in figma and on the vf-site
From the review of the breadcrumbs design during the Intranet project. The Vf-breadcrumbs component's enhancement on desktop are as follows:
Improve the target area for the breadcrumb Increase the spacing after the “>” symbol from 4px to 8px to avoid overlap of touch target areas for small words in the breadcrumb
Task
-
[ ] @Adedoyinebi Update the design of the vf-breadcrumb component in figma
-
[ ] @bhushan-ebi Update the vf-breadcrumb in html as specified above
The desktop variants of the vf-breadcrumbs has been updated in figma
- Spacing after the separator “>” increased form 4px to 8px to avoid overlap of touch target areas for small words in the breadcrumb.
@stefangutnick kindly review this update
@Adedoyinebi The padding now appears to be 4+4 px which is correct, looks good
Based on the discussion with @bhushan-ebi yesterday, We agreed to use a padding of 8px on the left and right of the of the ">" Chevron for a uniform padding on both ends.
The padding on the top and bottom of each node has also been updated to 8px to achieve a target touch size of 44px for touch based interactions matching AAA accessibility standard on target touch area
Design of the Vf-breadcrumb has been updated in figma based on this.
@stefangutnick please review
Image below showing desired target touch area without overlap on other elements
Figma changes are done as per comment above https://github.com/visual-framework/vf-core/issues/2009#issuecomment-2104274387. Dev changes are done as part of parent ticket #1976
