From ce469bc4b474f4e411624300b2f5cdbc8cbb9438 Mon Sep 17 00:00:00 2001 From: Erik Tiekstra Date: Thu, 13 Nov 2025 06:34:18 +0000 Subject: [PATCH] Feat/BOOK-117 svg accessibility * 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 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Approved-by: Bianca Widstam Approved-by: Matilda Landström --- .../Hero/Logos/DowntownCamperLarge.tsx | 2 + .../Hero/Logos/DowntownCamperSmall.tsx | 2 + .../HotelPage/Hero/Logos/GrandHotelLarge.tsx | 2 + .../HotelPage/Hero/Logos/GrandHotelSmall.tsx | 2 + .../HotelPage/Hero/Logos/HaymarketLarge.tsx | 2 + .../HotelPage/Hero/Logos/HaymarketSmall.tsx | 2 + .../HotelPage/Hero/Logos/HotelNorgeLarge.tsx | 2 + .../HotelPage/Hero/Logos/HotelNorgeSmall.tsx | 2 + .../HotelPage/Hero/Logos/MarskiLarge.tsx | 2 + .../HotelPage/Hero/Logos/MarskiSmall.tsx | 2 + .../HotelPage/Hero/Logos/ScandicGoLarge.tsx | 2 + .../HotelPage/Hero/Logos/ScandicGoSmall.tsx | 2 + .../HotelPage/Hero/Logos/TheDockLarge.tsx | 2 + .../HotelPage/Hero/Logos/TheDockSmall.tsx | 2 + .../components/Footer/Details/index.tsx | 24 +----- .../Footer/Navigation/SecondaryNav/index.tsx | 52 +++++++------ .../Footer/Navigation/SecondaryNav/utils.ts | 77 +++++++++++++++++++ .../MainMenu/LogoLink/logoLink.module.css | 8 -- .../components/Header/MainMenu/index.tsx | 2 +- .../Levels/Level/DoubleRow/BestFriend.tsx | 3 + .../Levels/Level/DoubleRow/CloseFriend.tsx | 3 + .../Levels/Level/DoubleRow/DearFriend.tsx | 3 + .../Levels/Level/DoubleRow/GoodFriend.tsx | 3 + .../Levels/Level/DoubleRow/LoyalFriend.tsx | 3 + .../Levels/Level/DoubleRow/NewFriend.tsx | 3 + .../Levels/Level/DoubleRow/ScandicFriends.tsx | 8 +- .../Levels/Level/DoubleRow/TrueFriend.tsx | 3 + .../Levels/Level/SingleRow/BestFriend.tsx | 3 + .../Levels/Level/SingleRow/CloseFriend.tsx | 3 + .../Levels/Level/SingleRow/DearFriend.tsx | 3 + .../Levels/Level/SingleRow/GoodFriend.tsx | 3 + .../Levels/Level/SingleRow/LoyalFriend.tsx | 3 + .../Levels/Level/SingleRow/NewFriend.tsx | 3 + .../Levels/Level/SingleRow/TrueFriend.tsx | 3 + .../{Header/MainMenu => }/LogoLink/index.tsx | 27 +++++-- .../components/LogoLink/logoLink.module.css | 12 +++ .../components/footer/appDownloadIcons.ts | 14 ---- .../Amenities_Facilities/BedHotel.tsx | 4 + .../Amenities_Facilities/Cooling.tsx | 4 + .../Amenities_Facilities/CouchTable.tsx | 4 + .../Amenities_Facilities/FootStool.tsx | 4 + .../Amenities_Facilities/Hairdryer.tsx | 4 + .../Amenities_Facilities/HandSoap.tsx | 4 + .../Amenities_Facilities/IceMachine.tsx | 4 + .../Amenities_Facilities/Massage.tsx | 4 + .../MdiBunkBedOutline.tsx | 4 + .../Amenities_Facilities/Mirror.tsx | 4 + .../Amenities_Facilities/MovingBeds.tsx | 4 + .../Customised/Amenities_Facilities/Road.tsx | 3 + .../Customised/Amenities_Facilities/Rug.tsx | 4 + .../Amenities_Facilities/SafetyBox.tsx | 4 + .../Amenities_Facilities/Slippers.tsx | 4 + .../Customised/Amenities_Facilities/Towel.tsx | 4 + .../Customised/Amenities_Facilities/View.tsx | 4 + .../Customised/Amenities_Facilities/Ward.tsx | 4 + .../WindowNotAvailable.tsx | 4 + .../Amenities_Facilities/WoodFloor.tsx | 4 + .../Icons/Customised/Benefits/DiamondAdd.tsx | 4 + .../Icons/Customised/Socials/Facebook.tsx | 4 + .../Icons/Customised/Socials/Instagram.tsx | 4 + .../Icons/Customised/Socials/Tripadvisor.tsx | 4 + .../Icons/Customised/UI/Minimize.tsx | 4 + .../components/Icons/Illustrations/Bed.tsx | 4 + .../Icons/Illustrations/BedBunk.tsx | 4 + .../Icons/Illustrations/BedBunkExtra.tsx | 4 + .../Icons/Illustrations/BedGeneric.tsx | 4 + .../Icons/Illustrations/BedKing.tsx | 4 + .../Icons/Illustrations/BedPullOut.tsx | 4 + .../Icons/Illustrations/BedPullOutExtra.tsx | 4 + .../Icons/Illustrations/BedQueen.tsx | 4 + .../Icons/Illustrations/BedSingle.tsx | 4 + .../Icons/Illustrations/BedSofa.tsx | 4 + .../Icons/Illustrations/BedSofaExtra.tsx | 4 + .../Icons/Illustrations/BedTwin.tsx | 4 + .../Icons/Illustrations/BedWallExtra.tsx | 4 + .../Icons/Illustrations/BreakfastBuffet.tsx | 4 + .../components/Icons/Illustrations/Coin.tsx | 4 + .../Illustrations/CroissantCoffeeEgg.tsx | 4 + .../Icons/Illustrations/CutleryOne.tsx | 4 + .../Icons/Illustrations/CutleryTwo.tsx | 4 + .../Icons/Illustrations/GiftOpen.tsx | 4 + .../Icons/Illustrations/HandKey.tsx | 4 + .../Icons/Illustrations/HotelNight.tsx | 4 + .../components/Icons/Illustrations/Kids.tsx | 4 + .../Icons/Illustrations/KidsMocktail.tsx | 4 + .../Icons/Illustrations/MagicWand.tsx | 4 + .../Icons/Illustrations/MoneyHand.tsx | 4 + .../Icons/Illustrations/MoneyHandEllipsis.tsx | 4 + .../Icons/Illustrations/NoBreakfastBuffet.tsx | 4 + .../Icons/Illustrations/Surprise.tsx | 4 + .../components/Icons/Illustrations/Trophy.tsx | 4 + .../Icons/Illustrations/Voucher.tsx | 4 + .../components/Icons/Logos/DowntownCamper.tsx | 3 + .../components/Icons/Logos/GrandHotelOslo.tsx | 3 + .../lib/components/Icons/Logos/Haymarket.tsx | 3 + .../lib/components/Icons/Logos/HotelNorge.tsx | 3 + .../lib/components/Icons/Logos/Marski.tsx | 3 + .../components/Icons/Logos/ScandicGoLogo.tsx | 3 + .../components/Icons/Logos/ScandicLogo.tsx | 3 + .../lib/components/Icons/Logos/TheDock.tsx | 3 + .../Icons/MaterialIcon/MaterialIcon.tsx | 11 +-- .../bathroom-cabinet-2.tsx | 14 +--- .../Amenities_Facilities/conference-room.tsx | 15 +--- .../Nucleo/Amenities_Facilities/door-2.tsx | 15 +--- .../Amenities_Facilities/hairdresser-1.tsx | 15 +--- .../Amenities_Facilities/record-player-3.tsx | 16 +--- .../Nucleo/Amenities_Facilities/toilet-2.tsx | 16 +--- .../Amenities_Facilities/user-police-2.tsx | 15 +--- .../Icons/Nucleo/Benefits/FilledDiscount.tsx | 15 +--- .../Icons/Nucleo/Benefits/bouquet.tsx | 15 +--- .../Icons/Nucleo/Benefits/discount-2-2.tsx | 14 +--- .../Icons/Nucleo/Experiences/bowling-pins.tsx | 15 +--- .../Icons/Nucleo/Experiences/palm-tree-2.tsx | 15 +--- .../components/Icons/Nucleo/Food/chips-3.tsx | 15 +--- .../Icons/Nucleo/Food/popcorn-2.tsx | 15 +--- .../lib/components/Icons/Nucleo/utils.ts | 13 ++++ .../lib/components/Icons/utils.ts | 17 ++++ 117 files changed, 541 insertions(+), 247 deletions(-) create mode 100644 apps/scandic-web/components/Footer/Navigation/SecondaryNav/utils.ts delete mode 100644 apps/scandic-web/components/Header/MainMenu/LogoLink/logoLink.module.css rename apps/scandic-web/components/{Header/MainMenu => }/LogoLink/index.tsx (60%) create mode 100644 apps/scandic-web/components/LogoLink/logoLink.module.css delete mode 100644 apps/scandic-web/types/components/footer/appDownloadIcons.ts create mode 100644 packages/design-system/lib/components/Icons/Nucleo/utils.ts create mode 100644 packages/design-system/lib/components/Icons/utils.ts 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 ( - + + + + + + + + + + + + + +