From 4ab9f620ec62edddf5d8b7d64bb158bba371a603 Mon Sep 17 00:00:00 2001 From: Adam Kudrna Date: Tue, 17 Sep 2024 20:22:36 +0200 Subject: [PATCH] Fix(web-react): Use `alt` and `` in `UNSTABLE_PartnerLogo` and `UNSTABLE_ProductLogo` Use the `alt` attribute and `<title>` tag to make the inside images accessible. --- .../components/UNSTABLE_PartnerLogo/README.md | 34 +++++++++---------- .../demo/PartnerLogoDemoFactory.tsx | 1 + .../stories/UNSTABLE_PartnerLogo.stories.tsx | 1 + .../components/UNSTABLE_ProductLogo/README.md | 25 +++++++------- .../demo/ProductLogoDefault.tsx | 5 ++- .../demo/ProductLogoInverted.tsx | 7 ++-- 6 files changed, 34 insertions(+), 39 deletions(-) diff --git a/packages/web-react/src/components/UNSTABLE_PartnerLogo/README.md b/packages/web-react/src/components/UNSTABLE_PartnerLogo/README.md index f4bea048b3..492526294e 100644 --- a/packages/web-react/src/components/UNSTABLE_PartnerLogo/README.md +++ b/packages/web-react/src/components/UNSTABLE_PartnerLogo/README.md @@ -8,8 +8,8 @@ PartnerLogo is a component designed to display the partner's logo (e.g. advertis ```jsx import { UNSTABLE_PartnerLogo } from '@lmc-eu/spirit-web-react'; -<UNSTABLE_PartnerLogo aria-label="Logo of the partner"> - <!-- Logo go here --> +<UNSTABLE_PartnerLogo> + <!-- Logo goes here --> </UNSTABLE_PartnerLogo> ``` @@ -18,14 +18,14 @@ import { UNSTABLE_PartnerLogo } from '@lmc-eu/spirit-web-react'; The PartnerLogo component is available in [sizes][dictionary-size]. ```jsx -<UNSTABLE_PartnerLogo size="small" aria-label="Logo of the partner"> - <!-- Logo go here --> +<UNSTABLE_PartnerLogo size="small"> + <!-- Logo goes here --> </UNSTABLE_PartnerLogo> -<UNSTABLE_PartnerLogo size="medium" aria-label="Logo of the partner"> - <!-- Logo go here --> +<UNSTABLE_PartnerLogo size="medium"> + <!-- Logo goes here --> </UNSTABLE_PartnerLogo> -<UNSTABLE_PartnerLogo size="large" aria-label="Logo of the partner"> - <!-- Logo go here --> +<UNSTABLE_PartnerLogo size="large"> + <!-- Logo goes here --> </UNSTABLE_PartnerLogo> ``` @@ -34,8 +34,8 @@ The PartnerLogo component is available in [sizes][dictionary-size]. The PartnerLogo component can be displayed without the safe area (padding). Use `hasSafeAreaDisabled` prop to disable safe area around logo. ```jsx -<UNSTABLE_PartnerLogo aria-label="Logo of the partner" hasSafeAreaDisabled> - <!-- Logo go here --> +<UNSTABLE_PartnerLogo hasSafeAreaDisabled> + <!-- Logo goes here --> </UNSTABLE_PartnerLogo> ``` @@ -46,27 +46,25 @@ The content of the PartnerLogo component can be an image or svg. ### Image ```jsx -<UNSTABLE_PartnerLogo aria-label="Logo of the partner"> - <img src="path-to-logo" alt="Partner Logo" aria-hidden="true" /> +<UNSTABLE_PartnerLogo> + <img src="path-to-logo" alt="Partner Logo" /> </UNSTABLE_PartnerLogo> ``` -ℹī¸ Don't forget to add the `aria-label` attribute for accessible title. -The image should have an `alt` attribute set and can be aria-hidden, because the `aria-label` -attribute is set on the container. +👉 To make the logo accessible, the image should have an `alt` attribute, or, if using inline SVG, the `<title>` element +should be present. ### SVG ```jsx -<UNSTABLE_PartnerLogo aria-label="Logo of the partner"> +<UNSTABLE_PartnerLogo> <svg width="300" height="130"> + <title>Partner Logo ``` -ℹī¸ Don't forget to add the `aria-label` attribute for accessible title. - ## API | Name | Type | Default | Required | Description | diff --git a/packages/web-react/src/components/UNSTABLE_PartnerLogo/demo/PartnerLogoDemoFactory.tsx b/packages/web-react/src/components/UNSTABLE_PartnerLogo/demo/PartnerLogoDemoFactory.tsx index 53f6d0f0ce..73fe7a03a9 100644 --- a/packages/web-react/src/components/UNSTABLE_PartnerLogo/demo/PartnerLogoDemoFactory.tsx +++ b/packages/web-react/src/components/UNSTABLE_PartnerLogo/demo/PartnerLogoDemoFactory.tsx @@ -5,6 +5,7 @@ import UNSTABLE_PartnerLogo from '../UNSTABLE_PartnerLogo'; const logo = ( + Partner Logo = { hasSafeAreaDisabled: false, children: ( + Partner Logo - + + ; ``` @@ -21,8 +21,8 @@ It is necessary to insert the appropriate inverted logo variant as a children. ```jsx import { UNSTABLE_ProductLogo } from '@spirit/web-react'; - - + + ; ``` @@ -33,28 +33,27 @@ The content of the ProductLogo component can be an image or svg. ### Image ```jsx - - + + Product Logo ``` -ℹī¸ Don't forget to add the `aria-label` attribute for accessible title. -The image should have an `alt` attribute set and can be aria-hidden, because the `aria-label` -attribute is set on the container. To reduce the unexpected layout shifts, it is strongly recommended -to specify the `height` and `width` of the embedded image. +👉 To make the logo accessible, the image should have an `alt` attribute, or, if using inline SVG, the `` element +should be present. + +👉 To avoid unexpected layout shifts, it is strongly recommended to specify the `width` and `height` of the embedded +image. ### SVG ```jsx -<UNSTABLE_ProductLogo aria-label="Logo of the product"> +<UNSTABLE_ProductLogo> <svg width="300" height="130"> <rect width="200" height="100" x="10" y="10" rx="20" ry="20" fill="#fff" /> </svg> </UNSTABLE_ProductLogo> ``` -ℹī¸ Don't forget to add the `aria-label` attribute for accessible title. - ## API | Name | Type | Default | Required | Description | diff --git a/packages/web-react/src/components/UNSTABLE_ProductLogo/demo/ProductLogoDefault.tsx b/packages/web-react/src/components/UNSTABLE_ProductLogo/demo/ProductLogoDefault.tsx index d3e55ea0f9..e06e87a564 100644 --- a/packages/web-react/src/components/UNSTABLE_ProductLogo/demo/ProductLogoDefault.tsx +++ b/packages/web-react/src/components/UNSTABLE_ProductLogo/demo/ProductLogoDefault.tsx @@ -3,6 +3,7 @@ import UNSTABLE_ProductLogo from '../UNSTABLE_ProductLogo'; export const defaultSvgLogo = ( <svg width="178" height="44" viewBox="0 0 178 44" fill="none" xmlns="http://www.w3.org/2000/svg"> + <title>Product logo ); -const ProductLogoDefault = () => ( - {defaultSvgLogo} -); +const ProductLogoDefault = () => {defaultSvgLogo}; export default ProductLogoDefault; diff --git a/packages/web-react/src/components/UNSTABLE_ProductLogo/demo/ProductLogoInverted.tsx b/packages/web-react/src/components/UNSTABLE_ProductLogo/demo/ProductLogoInverted.tsx index 388b22218a..72c2436ac8 100644 --- a/packages/web-react/src/components/UNSTABLE_ProductLogo/demo/ProductLogoInverted.tsx +++ b/packages/web-react/src/components/UNSTABLE_ProductLogo/demo/ProductLogoInverted.tsx @@ -3,6 +3,7 @@ import UNSTABLE_ProductLogo from '../UNSTABLE_ProductLogo'; export const invertedSvgLogo = ( + JobBoard logo ); -const ProductLogoDefault = () => ( - - {invertedSvgLogo} - -); +const ProductLogoDefault = () => {invertedSvgLogo}; export default ProductLogoDefault;