Update design of the vf-breadcrumbs in figma and on the vf-site

[Adedoyinebi]

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

[Adedoyinebi]

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

[stefangutnick]

@Adedoyinebi The padding now appears to be 4+4 px which is correct, looks good

[Adedoyinebi]

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

[bhushan-ebi]

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