scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat/BOOK-117 svg accessibility

Browse Source 
* feat(BOOK-117): Added aria-label to Scandic Friends levels
* feat(BOOK-117): Added aria-label to hotel logos
* feat(BOOK-117): Added alt text to app download images
* feat(BOOK-117): Added same logo component to footer as the one in the header
* feat(BOOK-117): Added aria attributes to icons similar to how we handled MaterialIcon aria attributes

Approved-by: Bianca Widstam
Approved-by: Matilda Landström
This commit is contained in:
Erik Tiekstra
2025-11-13 06:34:18 +00:00
parent c4b564998c
commit ce469bc4b4
117 changed files with 541 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
apps/scandic-web/components/Header/MainMenu/LogoLink/index.tsx
View File

@@ -1,43 +0,0 @@
"use client"
import NextLink from "next/link"
import { useIntl } from "react-intl"
import ScandicLogoIcon from "@scandic-hotels/design-system/Icons/ScandicLogoIcon"
import useDropdownStore from "@/stores/main-menu"
import useLang from "@/hooks/useLang"
import styles from "./logoLink.module.css"
import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
export function LogoLink() {
const lang = useLang()
const intl = useIntl()
const { toggleDropdown, isHamburgerMenuOpen } = useDropdownStore()
function handleNavigate() {
if (isHamburgerMenuOpen) {
toggleDropdown(DropdownTypeEnum.HamburgerMenu)
}
}
return (
<NextLink
className={styles.logoLink}
href={`/${lang}`}
onClick={handleNavigate}
aria-label={intl.formatMessage({
id: "header.backToScandicHotelsCom",
defaultMessage: "Back to scandichotels.com",
})}
>
<ScandicLogoIcon
className={styles.logoIcon}
width="103px"
height="22px"
/>
</NextLink>
)
}

8
apps/scandic-web/components/Header/MainMenu/LogoLink/logoLink.module.css
View File

@@ -1,8 +0,0 @@
.logoLink {
display: inline-flex;
width: auto;
}
:global(body:has(.themed-hotel-page)) .logoIcon {
color: var(--Surface-UI-Fill-Intense);
}

2
apps/scandic-web/components/Header/MainMenu/index.tsx
View File

@@ -1,7 +1,7 @@
import { Suspense } from "react"
import { LogoLink } from "../../LogoLink"
import { NavigationMenuListSkeleton } from "./NavigationMenu/NavigationMenuList"
import { LogoLink } from "./LogoLink"
import { MobileMenuSkeleton } from "./MobileMenu"
import MobileMenuWrapper from "./MobileMenuWrapper"
import MyPagesMenuWrapper from "./MyPagesMenuWrapper"