fix (a11y): breadcrumb a11y issues on blog page

[virus-rpi]

Chages:

• change breadcrumb text color from rgb(0, 0, 0, 0.5) to rgb(0, 0, 0, 0.65) to make color contrast WCAG AA compliant
• add aria-label to breadcrumb container
• wrap breadcrumb container with nav landmark
• replace overflow: hidden with overflow-x: clip to only hide the overflow in the x direction
• replace padding: 0 with padding-left: 4px so the outline isn't cut of at the left side
• add transform: translateX(-4px) to breadcrumb container to counteract the visual changes through the padding change
• add display: inline-block to the breadcrumb link to fix the shape of the focus outline

Before:

After (without display: inline-block added ):

[netlify]

✅ Deploy Preview for satellytes ready!

Name	Link
🔨 Latest commit	08c54d2
🔍 Latest deploy log	https://app.netlify.com/sites/satellytes/deploys/66ec41b7bb64bd0008d53de5
😎 Deploy Preview	https://deploy-preview-805--satellytes.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 86 (🟢 up 3 from production) Accessibility: 100 (no change from production) Best Practices: 100 (no change from production) SEO: 93 (no change from production) PWA: 80 (no change from production) View the detailed breakdown and full score reports

---

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

[georgiee]

Hey thanks for that.
It would help if you can describe the effects in addition to the changes because a11y is pretty abstract for many folks. Even with some experience I've issues following the actual motivation for your changes

I found two issues while the color change is good.

1. I can see the difference with the colour and I understand the contrast thing. Fine!

2. I do not understand the role "navigation" because that seems to remove the list + listitem role already given by the ol tag. I think a better alternative would be to just wrap the ol with an additional nav tag. That way people can use the semantics of the list (screen reader more easily navigate lists) plus the nav semantic, that a screen reader may use to tell about the significant navigation options on the page

Ref:

• https://a11y-style-guide.com/style-guide/section-navigation.html
• https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/navigation_role

3. I don't see any difference of the focus outline. Can you demonstrate? I also wonder why removing the overflow has no other impact. Why do we have it in the first place anyway?

---

You see that I have feedback to all three changes. I have the vague feeling that 3 very small PRs would have been much better here as you could focus on documenting and demonstrating the purpose of the change. On the other hand, it's quite an overhead. Let's go with this PR, fix the issues and then continue.