fix(z-logo): add visible focus indicator for keyboard navigation

[ada-workbackai]

Summary

Fixes WCAG 2.1.1 (Keyboard) by adding a visible focus indicator to the z-logo component's anchor element.

Issue: The z-logo component in the site header receives keyboard focus but provides no visible feedback, making it impossible for keyboard users to know when focus is on the logo link.

Solution: Added a 2px blue outline (#005a9c) with 2px offset when the logo link receives keyboard focus. The fix uses both :focus and :focus-visible to ensure proper behavior across browsers while respecting user preferences.

Test Plan

• Identified z-logo component in design-system repository
• Reproduced focus issue on https://www.zanichelli.it/
• Added focus indicator styles to z-logo/styles.css
• Verified focus-visible pseudo-class for modern browser support
• Used appropriate fallback with :focus for older browsers

Evidence

View before/after screenshots and full audit details:
https://app.workback.ai/dashboard/issue/76/

Before: Logo receives focus with no visual indicator
After: Logo shows clear blue outline when focused via keyboard

Technical Details

The fix adds focus styles to the anchor element within the z-logo shadow DOM:

• Blue outline color (#005a9c) matches Zanichelli brand
• 2px outline with 2px offset provides clear visibility
• Border-radius of 4px creates smooth, professional appearance
• Uses :focus-visible for progressive enhancement

---

WCAG Reference:
2.1.1 Keyboard (Level A)