244-feature-improve-semantic-html-accessibility-for-navbar-and-hero-components Show on GitHub
aliceafanasieva
a34ff74
fix(a11y): make hero slide counter readable for screen readers
Remove aria-hidden conflict by ensuring the slide announcement is exposed to assistive technologies while keeping the visual counter hidden, allowing 'Slide X of Y' to be announced correctly.
refs: #257
fix(hero): sync slide text fade-in and keep autoplay after manual navigation
- Make hero title re-render per slide using a keyed block ({#key current}) to reliably retrigger fade-in on slide change
- Replace manual active/RAF toggle logic with CSS keyframes for the title fade
- Prevent autoplay from stopping after arrow clicks by resetting the interval instead of clearing it
- Simplify slideshow logic: share the same next/prev functions for autoplay and user navigation
refs: #244 #219 #237
refactor(hero): simplify slider logic and improve accessibility
- Replaced GSAP timeline animations with a lightweight interval-based slideshow.
- Added autoplay start/stop helpers and clear cleanup on destroy to prevent leaks.
- Respected prefers-reduced-motion by disabling autoplay when motion reduction is enabled.
- Renamed/streamlined slide navigation functions (next/prev + userNext/userPrev) and wired buttons directly to handlers.
- Added sr-only labels for icon-only arrow buttons (removed reliance on aria-label for controls).
- Updated hero CTA to a semantic link (<a href="/tickets">) instead of a button.
- Kept responsive <picture> sources (AVIF/WEBP) and prioritized the first slide with fetchpriority/ eager loading.
refs #244
refactor(nav): improve semantic structure, accessibility and reduce JS
- Refactored header and mobile navigation markup for clearer semantics (header/nav/list structure).
- Switched language menu and mobile drawer/submenus to <details>/<summary> for native toggle behavior (no JS required).
- Added sr-only headings inside nav landmarks to differentiate navigation regions without relying on aria-label.
- Ensured icon-only controls include screen-reader text.
- Improved sidepanel layout with flex so footer sits at the bottom without absolute positioning.
- Standardized navigation class naming and introduced shared nav utility classes (nav-list/nav-item/nav-link) for DRY styling.
- Added prefers-reduced-motion handling and kept transitions lightweight.
refs: #244
style(buttons): apply styleguide button classes across components
- Updated components to use shared .btn variants (gradient/expand/underscore types)
- Kept <a> elements as anchors (no <a> to <button> changes)
refs: #216 #238
refactor(css): change color system to dynamic HSL palette + animated gradient stops
- define base HSL hue/saturation tokens and lightness scale (l-0–l-100)
- generate neutral/primary/accent color variations from the HSL system
- map semantic tokens (background, surface, text, link, border, focus) to the new palette
- add dedicated gradient stop variables for gold/blue and rebuild 13-stop animated gradients
- update link hover color using color-mix in HSL
refs: #238 #216
refactor(css): restructure global-styles.css layout and typography tokens
- add layered CSS structure for reset, base and typography
- replace spacing tokens with a semantic scale (2xs–2xl)
- replace px in sizes into rem units
- replace hex codes with HSL notation
- rename typography tokens from h1/h2 to a more descriptive font-size scale (2xl–s)
refs: #216 #238
feat(hero): make hero layout responsive with a fixed content area
- wrap h1/h2 in .hero-title for a more stable layout
- restructure .hero to column + space-evenly on mobile and row from 700px
- give .hero-content a fixed height/space and use justify-content: space-between
- update heading typography using var(--h1) / var(--h2) and prevent text clipping
- refine .info-line spacing and add a breakpoint for taller screens
#237
style(button): add type3 underline animation and white variant
- implement ::after underline with scaleX transition for hover/focus-visible
- align arrow icon and normalize svg/img sizing for type3
- add .btn--type3-white variant for dark backgrounds
refs: #228, #216, #231
style(button): refine type3 base layout and label styling
- set type3 to inline-flex with baseline alignment and token-based gap
- remove padding and default link underline
- make .btn_label inline-block for consistent underline sizing
refs: #228 #216 #231
Merge pull request #234 from fdnd-agency/224-feature-sponser-bar-with-horizontal-scroll-animation
224 feature sponser bar with horizontal scroll animation
