fix(navigation): address a couple of minor issues

[giamir]

SPARK-105

• Address an issue where in highcontrast mode anchor navigation items with activity indicator or badges were not correctly underlined. Check out the fix in HC mode
• Change the background color of the interactive tabs example to be white as the other ones (report)
• Fix an issue where the trailing story was showing an extra navigation element in the code part
• Adjust high contrast mode so that focused selected elements are distinguishable (see here for details)
• Adjust trailing story to use the a button with a larger tappable areas (storybook)

Before the fix

[changeset-bot]

🦋 Changeset detected

Latest commit: 55a0641

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for stacks-svelte ready!

Name	Link
🔨 Latest commit	55a0641
🔍 Latest deploy log	https://app.netlify.com/projects/stacks-svelte/deploys/69258b944ee70d0008b9ff7c
😎 Deploy Preview	https://deploy-preview-2065--stacks-svelte.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for stacks ready!

Name	Link
🔨 Latest commit	55a0641
🔍 Latest deploy log	https://app.netlify.com/projects/stacks/deploys/69258b94fdea6800089a68a1
😎 Deploy Preview	https://deploy-preview-2065--stacks.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[mukunku]

The underline on hover seems the wrong color but not a big deal:

[dancormier]

Nice improvement @giamir 🎉

[CGuindon]

The focus state on the selected items (already have an outline) aren't using the 2 px border of the focus ring. I'm assuming there's a conflict with the border that's already there for HC. When in HC, focusing on the vertical items, it feels like the focus disappears when it lands on the selected item.

Can the focus state change to be 2px instead of 1px on selected items that have an outline?

[giamir]

The focus state on the selected items (already have an outline) aren't using the 2 px border of the focus ring. I'm assuming there's a conflict with the border that's already there for HC. When in HC, focusing on the vertical items, it feels like the focus disappears when it lands on the selected item.

Can the focus state change to be 2px instead of 1px on selected items that have an outline?

@CGuindon I ended up slightly altering the high contrast mode styles to something that resemble more closely the non-HC mode styles. Please have a look and let me know if it works for you.
https://deploy-preview-2065--stacks.netlify.app/product/components/navigation/

[CGuindon]

LGTM — larger clickable area on the chevron looks good to