diff --git a/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/DowntownCamperLarge.tsx b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/DowntownCamperLarge.tsx index aecb31c38..75d827279 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/DowntownCamperLarge.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/DowntownCamperLarge.tsx @@ -6,6 +6,8 @@ export function DowntownCamperLogoLarge({ className }: { className?: string }) { viewBox="0 0 308 315" fill="none" xmlns="http://www.w3.org/2000/svg" + // eslint-disable-next-line formatjs/no-literal-string-in-jsx + aria-label="Downtown Camper by Scandic" className={className} > diff --git a/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/DowntownCamperSmall.tsx b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/DowntownCamperSmall.tsx index 77361d8c7..24d6eb6e3 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/DowntownCamperSmall.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/DowntownCamperSmall.tsx @@ -2,6 +2,8 @@ export function DowntownCamperLogoSmall({ className }: { className?: string }) { return ( diff --git a/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/TheDockSmall.tsx b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/TheDockSmall.tsx index f9348ee75..e84e6d2e3 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/TheDockSmall.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/Hero/Logos/TheDockSmall.tsx @@ -6,6 +6,8 @@ export function TheDockLogoSmall({ className }: { className?: string }) { viewBox="0 0 288 36" fill="none" xmlns="http://www.w3.org/2000/svg" + // eslint-disable-next-line formatjs/no-literal-string-in-jsx + aria-label="The Dock" className={className} >
- - Scandic Hotels logo - + diff --git a/apps/scandic-web/components/Footer/Navigation/SecondaryNav/utils.ts b/apps/scandic-web/components/Footer/Navigation/SecondaryNav/utils.ts new file mode 100644 index 000000000..348f7713d --- /dev/null +++ b/apps/scandic-web/components/Footer/Navigation/SecondaryNav/utils.ts @@ -0,0 +1,77 @@ +import type { IntlShape } from "react-intl" + +export function getAppDownloadAttributes(intl: IntlShape, key: string) { + const appleAlt = intl.formatMessage({ + id: "footer.appDownloadAlt.apple", + defaultMessage: "Download on the App Store", + }) + const googleAlt = intl.formatMessage({ + id: "footer.appDownloadAlt.google", + defaultMessage: "Get it on Google Play", + }) + + switch (key) { + case "Apple_da": + return { + src: "/_static/img/store-badges/app-store-badge-da.svg", + alt: appleAlt, + } + case "Apple_de": + return { + src: "/_static/img/store-badges/app-store-badge-de.svg", + alt: appleAlt, + } + case "Apple_en": + return { + src: "/_static/img/store-badges/app-store-badge-en.svg", + alt: appleAlt, + } + case "Apple_fi": + return { + src: "/_static/img/store-badges/app-store-badge-fi.svg", + alt: appleAlt, + } + case "Apple_no": + return { + src: "/_static/img/store-badges/app-store-badge-no.svg", + alt: appleAlt, + } + case "Apple_sv": + return { + src: "/_static/img/store-badges/app-store-badge-sv.svg", + alt: appleAlt, + } + case "Google_da": + return { + src: "/_static/img/store-badges/google-play-badge-da.svg", + alt: googleAlt, + } + case "Google_de": + return { + src: "/_static/img/store-badges/google-play-badge-de.svg", + alt: googleAlt, + } + case "Google_en": + return { + src: "/_static/img/store-badges/google-play-badge-en.svg", + alt: googleAlt, + } + case "Google_fi": + return { + src: "/_static/img/store-badges/google-play-badge-fi.svg", + alt: googleAlt, + } + case "Google_no": + return { + src: "/_static/img/store-badges/google-play-badge-no.svg", + alt: googleAlt, + } + case "Google_sv": + return { + src: "/_static/img/store-badges/google-play-badge-sv.svg", + alt: googleAlt, + } + default: + return null + } +} diff --git a/apps/scandic-web/components/Header/MainMenu/LogoLink/logoLink.module.css b/apps/scandic-web/components/Header/MainMenu/LogoLink/logoLink.module.css deleted file mode 100644 index 667377e80..000000000 --- a/apps/scandic-web/components/Header/MainMenu/LogoLink/logoLink.module.css +++ /dev/null @@ -1,8 +0,0 @@ -.logoLink { - display: inline-flex; - width: auto; -} - -:global(body:has(.themed-hotel-page)) .logoIcon { - color: var(--Surface-UI-Fill-Intense); -} diff --git a/apps/scandic-web/components/Header/MainMenu/index.tsx b/apps/scandic-web/components/Header/MainMenu/index.tsx index b713d89bc..2498a99c9 100644 --- a/apps/scandic-web/components/Header/MainMenu/index.tsx +++ b/apps/scandic-web/components/Header/MainMenu/index.tsx @@ -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" diff --git a/apps/scandic-web/components/Levels/Level/DoubleRow/BestFriend.tsx b/apps/scandic-web/components/Levels/Level/DoubleRow/BestFriend.tsx index c7e4e3a25..22f5f555d 100644 --- a/apps/scandic-web/components/Levels/Level/DoubleRow/BestFriend.tsx +++ b/apps/scandic-web/components/Levels/Level/DoubleRow/BestFriend.tsx @@ -4,6 +4,7 @@ import type { LevelProps } from "../../levels" export default function BestFriend({ className, + "aria-label": ariaLabel, color, height = "75", width = "159", @@ -21,6 +22,8 @@ export default function BestFriend({ viewBox="0 0 159 75" width={width} xmlns="http://www.w3.org/2000/svg" + // eslint-disable-next-line formatjs/no-literal-string-in-jsx + aria-label={ariaLabel ?? "BEST FRIEND"} {...props} > diff --git a/apps/scandic-web/components/Levels/Level/DoubleRow/CloseFriend.tsx b/apps/scandic-web/components/Levels/Level/DoubleRow/CloseFriend.tsx index dc16197df..a49c36dac 100644 --- a/apps/scandic-web/components/Levels/Level/DoubleRow/CloseFriend.tsx +++ b/apps/scandic-web/components/Levels/Level/DoubleRow/CloseFriend.tsx @@ -4,6 +4,7 @@ import type { LevelProps } from "../../levels" export default function CloseFriend({ className, + "aria-label": ariaLabel, color, height = "75", width = "158", @@ -21,6 +22,8 @@ export default function CloseFriend({ viewBox="0 0 158 75" width={width} xmlns="http://www.w3.org/2000/svg" + // eslint-disable-next-line formatjs/no-literal-string-in-jsx + aria-label={ariaLabel ?? "CLOSE FRIEND"} {...props} > diff --git a/apps/scandic-web/components/Levels/Level/DoubleRow/DearFriend.tsx b/apps/scandic-web/components/Levels/Level/DoubleRow/DearFriend.tsx index c0b1ec0e8..caf1d708e 100644 --- a/apps/scandic-web/components/Levels/Level/DoubleRow/DearFriend.tsx +++ b/apps/scandic-web/components/Levels/Level/DoubleRow/DearFriend.tsx @@ -4,6 +4,7 @@ import type { LevelProps } from "../../levels" export default function DearFriend({ className, + "aria-label": ariaLabel, color, height = "75", width = "159", @@ -21,6 +22,8 @@ export default function DearFriend({ viewBox="0 0 159 75" width={width} xmlns="http://www.w3.org/2000/svg" + // eslint-disable-next-line formatjs/no-literal-string-in-jsx + aria-label={ariaLabel ?? "DEAR FRIEND"} {...props} > diff --git a/apps/scandic-web/components/Levels/Level/DoubleRow/GoodFriend.tsx b/apps/scandic-web/components/Levels/Level/DoubleRow/GoodFriend.tsx index 9a6c24678..2f13c6e11 100644 --- a/apps/scandic-web/components/Levels/Level/DoubleRow/GoodFriend.tsx +++ b/apps/scandic-web/components/Levels/Level/DoubleRow/GoodFriend.tsx @@ -4,6 +4,7 @@ import type { LevelProps } from "../../levels" export default function GoodFriend({ className, + "aria-label": ariaLabel, color, height = "75", width = "159", @@ -21,6 +22,8 @@ export default function GoodFriend({ viewBox="0 0 159 75" width={width} xmlns="http://www.w3.org/2000/svg" + // eslint-disable-next-line formatjs/no-literal-string-in-jsx + aria-label={ariaLabel ?? "GOOD FRIEND"} {...props} > diff --git a/apps/scandic-web/components/Levels/Level/DoubleRow/LoyalFriend.tsx b/apps/scandic-web/components/Levels/Level/DoubleRow/LoyalFriend.tsx index d2c0efda3..9d4b1ca89 100644 --- a/apps/scandic-web/components/Levels/Level/DoubleRow/LoyalFriend.tsx +++ b/apps/scandic-web/components/Levels/Level/DoubleRow/LoyalFriend.tsx @@ -4,6 +4,7 @@ import type { LevelProps } from "../../levels" export default function LoyalFriend({ className, + "aria-label": ariaLabel, color, height = "75", width = "158", @@ -21,6 +22,8 @@ export default function LoyalFriend({ viewBox="0 0 158 75" width={width} xmlns="http://www.w3.org/2000/svg" + // eslint-disable-next-line formatjs/no-literal-string-in-jsx + aria-label={ariaLabel ?? "LOYAL FRIEND"} {...props} > diff --git a/apps/scandic-web/components/Levels/Level/DoubleRow/NewFriend.tsx b/apps/scandic-web/components/Levels/Level/DoubleRow/NewFriend.tsx index 962fa4692..28aba1197 100644 --- a/apps/scandic-web/components/Levels/Level/DoubleRow/NewFriend.tsx +++ b/apps/scandic-web/components/Levels/Level/DoubleRow/NewFriend.tsx @@ -4,6 +4,7 @@ import type { LevelProps } from "../../levels" export default function NewFriend({ className, + "aria-label": ariaLabel, color, height = "75", width = "159", @@ -21,6 +22,8 @@ export default function NewFriend({ viewBox="0 0 159 75" width={width} xmlns="http://www.w3.org/2000/svg" + // eslint-disable-next-line formatjs/no-literal-string-in-jsx + aria-label={ariaLabel ?? "NEW FRIEND"} {...props} > diff --git a/apps/scandic-web/components/Levels/Level/DoubleRow/ScandicFriends.tsx b/apps/scandic-web/components/Levels/Level/DoubleRow/ScandicFriends.tsx index 5baf51553..d540a8e1a 100644 --- a/apps/scandic-web/components/Levels/Level/DoubleRow/ScandicFriends.tsx +++ b/apps/scandic-web/components/Levels/Level/DoubleRow/ScandicFriends.tsx @@ -2,7 +2,11 @@ import { levelVariants } from "../../variants" import type { LevelProps } from "../../levels" -export default function ScandicFriends({ className, color }: LevelProps) { +export default function ScandicFriends({ + className, + "aria-label": ariaLabel, + color, +}: LevelProps) { const classNames = levelVariants({ className, color, @@ -11,6 +15,8 @@ export default function ScandicFriends({ className, color }: LevelProps) { diff --git a/apps/scandic-web/components/Levels/Level/SingleRow/BestFriend.tsx b/apps/scandic-web/components/Levels/Level/SingleRow/BestFriend.tsx index db70eeef2..ce26284cf 100644 --- a/apps/scandic-web/components/Levels/Level/SingleRow/BestFriend.tsx +++ b/apps/scandic-web/components/Levels/Level/SingleRow/BestFriend.tsx @@ -4,6 +4,7 @@ import type { LevelProps } from "../../levels" export default function BestFriend({ className, + "aria-label": ariaLabel, color, height = "44", width = "274", @@ -21,6 +22,8 @@ export default function BestFriend({ viewBox="0 0 274 44" width={width} xmlns="http://www.w3.org/2000/svg" + // eslint-disable-next-line formatjs/no-literal-string-in-jsx + aria-label={ariaLabel ?? "BEST FRIEND"} {...props} > { + isInverted?: boolean +} + +export function LogoLink({ + isInverted = false, + "aria-label": ariaLabel, + ...props +}: LogoLinkProps) { const lang = useLang() const intl = useIntl() const { toggleDropdown, isHamburgerMenuOpen } = useDropdownStore() @@ -28,13 +37,19 @@ export function LogoLink() { className={styles.logoLink} href={`/${lang}`} onClick={handleNavigate} - aria-label={intl.formatMessage({ - id: "header.backToScandicHotelsCom", - defaultMessage: "Back to scandichotels.com", - })} + aria-label={ + ariaLabel ?? + intl.formatMessage({ + id: "header.backToScandicHotelsCom", + defaultMessage: "Back to scandichotels.com", + }) + } + {...props} > diff --git a/apps/scandic-web/components/LogoLink/logoLink.module.css b/apps/scandic-web/components/LogoLink/logoLink.module.css new file mode 100644 index 000000000..732d1f502 --- /dev/null +++ b/apps/scandic-web/components/LogoLink/logoLink.module.css @@ -0,0 +1,12 @@ +.logoLink { + display: inline-flex; + width: auto; +} + +.logoIcon.inverted { + color: var(--Icon-Inverted); +} + +:global(body:has(.themed-hotel-page)) .logoIcon:not(.inverted) { + color: var(--Surface-UI-Fill-Intense); +} diff --git a/apps/scandic-web/types/components/footer/appDownloadIcons.ts b/apps/scandic-web/types/components/footer/appDownloadIcons.ts deleted file mode 100644 index b591ac280..000000000 --- a/apps/scandic-web/types/components/footer/appDownloadIcons.ts +++ /dev/null @@ -1,14 +0,0 @@ -export enum AppDownLoadLinks { - Apple_da = "/_static/img/store-badges/app-store-badge-da.svg", - Apple_de = "/_static/img/store-badges/app-store-badge-de.svg", - Apple_en = "/_static/img/store-badges/app-store-badge-en.svg", - Apple_fi = "/_static/img/store-badges/app-store-badge-fi.svg", - Apple_no = "/_static/img/store-badges/app-store-badge-no.svg", - Apple_sv = "/_static/img/store-badges/app-store-badge-sv.svg", - Google_da = "/_static/img/store-badges/google-play-badge-da.svg", - Google_de = "/_static/img/store-badges/google-play-badge-de.svg", - Google_en = "/_static/img/store-badges/google-play-badge-en.svg", - Google_fi = "/_static/img/store-badges/google-play-badge-fi.svg", - Google_no = "/_static/img/store-badges/google-play-badge-no.svg", - Google_sv = "/_static/img/store-badges/google-play-badge-sv.svg", -} diff --git a/packages/design-system/lib/components/Icons/Customised/Amenities_Facilities/BedHotel.tsx b/packages/design-system/lib/components/Icons/Customised/Amenities_Facilities/BedHotel.tsx index 95ce422ad..9e8d7bf22 100644 --- a/packages/design-system/lib/components/Icons/Customised/Amenities_Facilities/BedHotel.tsx +++ b/packages/design-system/lib/components/Icons/Customised/Amenities_Facilities/BedHotel.tsx @@ -1,4 +1,5 @@ import type { IconProps } from '../../icon' +import { getIconAriaProps } from '../../utils' import { iconVariants } from '../../variants' export default function BedHotelIcon({ @@ -8,6 +9,8 @@ export default function BedHotelIcon({ ...props }: IconProps) { const classNames = iconVariants({ className, color }) + const ariaProps = getIconAriaProps(props) + return ( diff --git a/packages/design-system/lib/components/Icons/Illustrations/BedBunk.tsx b/packages/design-system/lib/components/Icons/Illustrations/BedBunk.tsx index bc30443ed..7c24cdd91 100644 --- a/packages/design-system/lib/components/Icons/Illustrations/BedBunk.tsx +++ b/packages/design-system/lib/components/Icons/Illustrations/BedBunk.tsx @@ -1,6 +1,9 @@ import type { IllustrationProps } from '../icon' +import { getIconAriaProps } from '../utils' export default function BedBunkIcon(props: IllustrationProps) { + const ariaProps = getIconAriaProps(props) + return ( diff --git a/packages/design-system/lib/components/Icons/Illustrations/HandKey.tsx b/packages/design-system/lib/components/Icons/Illustrations/HandKey.tsx index cbeca1cd4..514bfe527 100644 --- a/packages/design-system/lib/components/Icons/Illustrations/HandKey.tsx +++ b/packages/design-system/lib/components/Icons/Illustrations/HandKey.tsx @@ -1,12 +1,16 @@ import type { IllustrationProps } from '../icon' +import { getIconAriaProps } from '../utils' export default function HandKeyIcon(props: IllustrationProps) { + const ariaProps = getIconAriaProps(props) + return ( diff --git a/packages/design-system/lib/components/Icons/Logos/DowntownCamper.tsx b/packages/design-system/lib/components/Icons/Logos/DowntownCamper.tsx index c55caefc6..9753f2eac 100644 --- a/packages/design-system/lib/components/Icons/Logos/DowntownCamper.tsx +++ b/packages/design-system/lib/components/Icons/Logos/DowntownCamper.tsx @@ -2,6 +2,7 @@ import type { LogoProps } from '../icon' export default function DowntownCamperIcon({ className = '', + 'aria-label': ariaLabel, height = 30, width = 123, ...props @@ -14,6 +15,8 @@ export default function DowntownCamperIcon({ viewBox="0 0 123 30" fill="none" xmlns="http://www.w3.org/2000/svg" + // eslint-disable-next-line formatjs/no-literal-string-in-jsx + aria-label={ariaLabel ?? 'Downtown Camper'} {...props} > , @@ -20,22 +21,18 @@ export function MaterialIcon({ ...props }: MaterialIconProps) { const classNames = iconVariants({ className, color }) - const { role, 'aria-label': ariaLabel, 'aria-hidden': ariaHidden } = props - - // Automatically decide whether to hide from assistive tech - const computedAriaHidden = - ariaHidden !== undefined ? ariaHidden : ariaLabel || role ? false : true + const ariaProps = getIconAriaProps(props) return ( // The span is used to prevent the MaterialSymbol from being underlined when used inside a link or button ) diff --git a/packages/design-system/lib/components/Icons/Nucleo/Amenities_Facilities/bathroom-cabinet-2.tsx b/packages/design-system/lib/components/Icons/Nucleo/Amenities_Facilities/bathroom-cabinet-2.tsx index 7e26d5dc7..f233dfdbd 100644 --- a/packages/design-system/lib/components/Icons/Nucleo/Amenities_Facilities/bathroom-cabinet-2.tsx +++ b/packages/design-system/lib/components/Icons/Nucleo/Amenities_Facilities/bathroom-cabinet-2.tsx @@ -1,19 +1,11 @@ import type { NucleoIconProps } from '../../icon' -import { colorVariants } from '../colorVariants' +import { getNucleoIconProps } from '../utils' function BathroomCabinet2(props: NucleoIconProps) { - const fill = props.color ? colorVariants[props.color] : 'currentColor' - const strokewidth = props.strokewidth || 2 - const width = props.size || '1em' - const height = props.size || '1em' + const { fill, strokewidth, ...iconProps } = getNucleoIconProps(props) return ( - + + + + + + + + + + + + + +