feat[dev]: ✨ implement A11y improvements to sd-header

[yoezlem]

Description

This task describes the Storybook implementation for the sd-header component as part of the A11y improvements outlined in Epic #1465.

A11y improvements for sd-checkbox can be found here: sd-header Notes.

---

Comment

Problem: Icon-only buttons have no accessible name (burger, Weitere Auftritte, search).
Solution: Add one.

Problem: The menu button (burger icon) doesn't do anything.
Solution: It must toggle the list's visibility.

Problem: The menu button misses essential information: it has no accessible name and doesn't indicate whether the navigation is visible.
Solution: Add an accessible name, put aria-expanded on it and toggle its value.

Problem: The fixed header covers much of the screen when the viewport's zoomed in.
Solution: Consider making headers only fixed at a certain minimum viewport height.

• figure out why its not working in codepen (timeslot is 30min, after that we should create a Ticket for that issue)

Problem: The description of the logo serves as the accessible name of the link in which it's wrapped.
Solution: Thus, it must not describe the image ("Logo"), but the links function "Union Investment Homepage.”

Related WCAG criteria

• https://www.w3.org/WAI/WCAG22/quickref/#name-role-value
• https://www.w3.org/WAI/WCAG22/quickref/#non-text-content

Additional resources

• https://www.w3.org/WAI/tutorials/images/functional/

Open Questions

• Question1
• Question2

DoR

• Item has been estimated by the team
• Item dependencies have been identified and documented

DoD

• Documentation has been created/updated (if applicable)
• Migration Guide has been created/updated (if applicable)
• Relevant E2E tests (Features, A11y, Bug fixes) are created/updated
• Relevant stories (Features, A11y) are created/updated
• Implementation works successfully on feature branch