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 Approved-by: Bianca Widstam Approved-by: Matilda Landström
This commit is contained in:
Erik Tiekstra
@@ -1,6 +1,7 @@
|
||||
import { iconVariants } from '../../variants'
|
||||
|
||||
import type { IconProps } from '../../icon'
|
||||
import { getIconAriaProps } from '../../utils'
|
||||
|
||||
export default function FacebookIcon({
|
||||
className,
|
||||
@@ -9,6 +10,8 @@ export default function FacebookIcon({
|
||||
...props
|
||||
}: IconProps) {
|
||||
const classNames = iconVariants({ className, color })
|
||||
const ariaProps = getIconAriaProps(props)
|
||||
|
||||
return (
|
||||
<svg
|
||||
className={classNames}
|
||||
@@ -18,6 +21,7 @@ export default function FacebookIcon({
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
{...props}
|
||||
{...ariaProps}
|
||||
>
|
||||
<path
|
||||
d="M18.25 2C19.283 2 20.1662 2.36675 20.8997 3.10026C21.6332 3.83377 22 4.71701 22 5.75V18.25C22 19.283 21.6332 20.1662 20.8997 20.8997C20.1662 21.6332 19.283 22 18.25 22H15.8021V14.2526H18.3932L18.7839 11.2318H15.8021V9.30469C15.8021 8.81858 15.9041 8.45399 16.1081 8.21094C16.3121 7.96788 16.7092 7.84635 17.2995 7.84635L18.888 7.83333V5.13802C18.3411 5.0599 17.5686 5.02083 16.5703 5.02083C15.3898 5.02083 14.4457 5.36806 13.7383 6.0625C13.0308 6.75694 12.6771 7.73785 12.6771 9.00521V11.2318H10.0729V14.2526H12.6771V22H5.75C4.71701 22 3.83377 21.6332 3.10026 20.8997C2.36675 20.1662 2 19.283 2 18.25V5.75C2 4.71701 2.36675 3.83377 3.10026 3.10026C3.83377 2.36675 4.71701 2 5.75 2H18.25Z"
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { iconVariants } from '../../variants'
|
||||
|
||||
import type { IconProps } from '../../icon'
|
||||
import { getIconAriaProps } from '../../utils'
|
||||
|
||||
export default function InstagramIcon({
|
||||
className,
|
||||
@@ -9,6 +10,8 @@ export default function InstagramIcon({
|
||||
...props
|
||||
}: IconProps) {
|
||||
const classNames = iconVariants({ className, color })
|
||||
const ariaProps = getIconAriaProps(props)
|
||||
|
||||
return (
|
||||
<svg
|
||||
className={classNames}
|
||||
@@ -18,6 +21,7 @@ export default function InstagramIcon({
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
{...props}
|
||||
{...ariaProps}
|
||||
>
|
||||
<path
|
||||
d="M17.34 5.46012C17.1027 5.46012 16.8707 5.5305 16.6733 5.66236C16.476 5.79422 16.3222 5.98163 16.2313 6.2009C16.1405 6.42017 16.1168 6.66145 16.1631 6.89423C16.2094 7.12701 16.3236 7.34083 16.4915 7.50865C16.6593 7.67647 16.8731 7.79076 17.1059 7.83706C17.3387 7.88337 17.5799 7.8596 17.7992 7.76878C18.0185 7.67795 18.2059 7.52415 18.3378 7.32681C18.4696 7.12947 18.54 6.89746 18.54 6.66012C18.54 6.34186 18.4136 6.03664 18.1885 5.81159C17.9635 5.58655 17.6583 5.46012 17.34 5.46012ZM21.94 7.88012C21.9206 7.05042 21.7652 6.22952 21.48 5.45012C21.2257 4.78325 20.83 4.1794 20.32 3.68012C19.8248 3.16755 19.2196 2.7743 18.55 2.53012C17.7727 2.23628 16.9508 2.07733 16.12 2.06012C15.06 2.00012 14.72 2.00012 12 2.00012C9.28 2.00012 8.94 2.00012 7.88 2.06012C7.04915 2.07733 6.22734 2.23628 5.45 2.53012C4.78168 2.77677 4.17693 3.16968 3.68 3.68012C3.16743 4.1753 2.77418 4.78056 2.53 5.45012C2.23616 6.22747 2.07721 7.04927 2.06 7.88012C2 8.94012 2 9.28012 2 12.0001C2 14.7201 2 15.0601 2.06 16.1201C2.07721 16.951 2.23616 17.7728 2.53 18.5501C2.77418 19.2197 3.16743 19.8249 3.68 20.3201C4.17693 20.8306 4.78168 21.2235 5.45 21.4701C6.22734 21.764 7.04915 21.9229 7.88 21.9401C8.94 22.0001 9.28 22.0001 12 22.0001C14.72 22.0001 15.06 22.0001 16.12 21.9401C16.9508 21.9229 17.7727 21.764 18.55 21.4701C19.2196 21.2259 19.8248 20.8327 20.32 20.3201C20.8322 19.8227 21.2283 19.2183 21.48 18.5501C21.7652 17.7707 21.9206 16.9498 21.94 16.1201C21.94 15.0601 22 14.7201 22 12.0001C22 9.28012 22 8.94012 21.94 7.88012ZM20.14 16.0001C20.1327 16.6349 20.0178 17.2638 19.8 17.8601C19.6403 18.2953 19.3839 18.6885 19.05 19.0101C18.7256 19.3406 18.3332 19.5966 17.9 19.7601C17.3037 19.9779 16.6748 20.0928 16.04 20.1001C15.04 20.1501 14.67 20.1601 12.04 20.1601C9.41 20.1601 9.04 20.1601 8.04 20.1001C7.38089 20.1125 6.72459 20.011 6.1 19.8001C5.68578 19.6282 5.31136 19.3729 5 19.0501C4.66809 18.7289 4.41484 18.3353 4.26 17.9001C4.01586 17.2953 3.88044 16.6521 3.86 16.0001C3.86 15.0001 3.8 14.6301 3.8 12.0001C3.8 9.37012 3.8 9.00012 3.86 8.00012C3.86448 7.35118 3.98295 6.70807 4.21 6.10012C4.38605 5.67803 4.65627 5.30178 5 5.00012C5.30381 4.65629 5.67929 4.38322 6.1 4.20012C6.70955 3.98017 7.352 3.8652 8 3.86012C9 3.86012 9.37 3.80012 12 3.80012C14.63 3.80012 15 3.80012 16 3.86012C16.6348 3.8674 17.2637 3.98237 17.86 4.20012C18.3144 4.36877 18.7223 4.64297 19.05 5.00012C19.3777 5.3073 19.6338 5.68285 19.8 6.10012C20.0223 6.70906 20.1373 7.3519 20.14 8.00012C20.19 9.00012 20.2 9.37012 20.2 12.0001C20.2 14.6301 20.19 15.0001 20.14 16.0001ZM12 6.87012C10.9858 6.8721 9.99496 7.17465 9.15265 7.73954C8.31035 8.30443 7.65438 9.10632 7.26763 10.0439C6.88089 10.9814 6.78072 12.0126 6.97979 13.0071C7.17886 14.0015 7.66824 14.9147 8.38608 15.6311C9.10392 16.3475 10.018 16.8351 11.0129 17.0323C12.0077 17.2294 13.0387 17.1272 13.9755 16.7387C14.9123 16.3501 15.7129 15.6926 16.2761 14.8492C16.8394 14.0057 17.14 13.0143 17.14 12.0001C17.1413 11.3252 17.0092 10.6567 16.7512 10.0331C16.4933 9.40943 16.1146 8.84293 15.6369 8.36617C15.1592 7.88941 14.5919 7.5118 13.9678 7.25505C13.3436 6.9983 12.6749 6.86748 12 6.87012ZM12 15.3301C11.3414 15.3301 10.6976 15.1348 10.15 14.7689C9.60234 14.403 9.17552 13.8829 8.92348 13.2745C8.67144 12.666 8.6055 11.9964 8.73398 11.3505C8.86247 10.7045 9.17963 10.1112 9.64533 9.64546C10.111 9.17975 10.7044 8.8626 11.3503 8.73411C11.9963 8.60562 12.6659 8.67156 13.2743 8.9236C13.8828 9.17564 14.4029 9.60246 14.7688 10.1501C15.1347 10.6977 15.33 11.3415 15.33 12.0001C15.33 12.4374 15.2439 12.8704 15.0765 13.2745C14.9092 13.6785 14.6639 14.0456 14.3547 14.3548C14.0454 14.664 13.6784 14.9093 13.2743 15.0766C12.8703 15.244 12.4373 15.3301 12 15.3301Z"
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { iconVariants } from '../../variants'
|
||||
|
||||
import type { IconProps } from '../../icon'
|
||||
import { getIconAriaProps } from '../../utils'
|
||||
|
||||
export default function TripadvisorIcon({
|
||||
className,
|
||||
@@ -9,6 +10,8 @@ export default function TripadvisorIcon({
|
||||
...props
|
||||
}: IconProps) {
|
||||
const classNames = iconVariants({ className, color })
|
||||
const ariaProps = getIconAriaProps(props)
|
||||
|
||||
return (
|
||||
<svg
|
||||
className={classNames}
|
||||
@@ -18,6 +21,7 @@ export default function TripadvisorIcon({
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
{...props}
|
||||
{...ariaProps}
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
|
||||
Reference in New Issue
Block a user