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

15
packages/design-system/lib/components/Icons/Nucleo/Benefits/FilledDiscount.tsx
View File

@@ -1,18 +1,11 @@
import { NucleoIconProps } from '../../icon'
import { colorVariants } from '../colorVariants'
import { getNucleoIconProps } from '../utils'
export default function FilledDiscount({ color, size }: NucleoIconProps) {
const fill = color ? colorVariants[color] : 'currentColor'
const width = size || '1em'
const height = size || '1em'
export default function FilledDiscount(props: NucleoIconProps) {
const { fill, ...iconProps } = getNucleoIconProps(props)
return (
<svg
height={height}
width={width}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...iconProps}>
<g fill={fill}>
<path
d="M23.707,11.293L21,8.586V4c0-0.552-0.448-1-1-1h-4.586l-2.707-2.707c-0.391-0.391-1.023-0.391-1.414,0 L8.586,3H4C3.448,3,3,3.448,3,4v4.586l-2.707,2.707c-0.391,0.391-0.391,1.023,0,1.414L3,15.414V20c0,0.552,0.448,1,1,1h4.586 l2.707,2.707C11.488,23.902,11.744,24,12,24s0.512-0.098,0.707-0.293L15.414,21H20c0.552,0,1-0.448,1-1v-4.586l2.707-2.707 C24.098,12.316,24.098,11.684,23.707,11.293z M8.5,7C9.328,7,10,7.672,10,8.5S9.328,10,8.5,10S7,9.328,7,8.5S7.672,7,8.5,7z M15.5,17c-0.828,0-1.5-0.672-1.5-1.5s0.672-1.5,1.5-1.5s1.5,0.672,1.5,1.5S16.328,17,15.5,17z M8,17.414L6.586,16L16,6.586 L17.414,8L8,17.414z"

15
packages/design-system/lib/components/Icons/Nucleo/Benefits/bouquet.tsx
View File

@@ -1,20 +1,11 @@
import { colorVariants } from '../colorVariants'
import type { NucleoIconProps } from '../../icon'
import { getNucleoIconProps } from '../utils'
function Bouquet(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 (
<svg
height={height}
width={width}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...iconProps}>
<g
fill={fill}
strokeLinecap="round"

14
packages/design-system/lib/components/Icons/Nucleo/Benefits/discount-2-2.tsx
View File

@@ -1,19 +1,11 @@
import type { NucleoIconProps } from '../../icon'
import { colorVariants } from '../colorVariants'
import { getNucleoIconProps } from '../utils'
function Discount22(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 (
<svg
height={height}
width={width}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...iconProps}>
<g
fill={fill}
strokeLinecap="round"