Fix(web-react): Use alt and <title> in UNSTABLE_PartnerLogo and…

… `UNSTABLE_ProductLogo` Use the `alt` attribute and `<title>` tag to make the inside images accessible.
lmc-eu · Sep 19, 2024 · 1f0eb2b · 1f0eb2b
1 parent 169a75a
commit 1f0eb2b
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 39 deletions.
diff --git 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</title>
     <rect width="200" height="100" x="10" y="10" rx="20" ry="20" fill="#fff" />
   </svg>
 </UNSTABLE_PartnerLogo>
 ```
 
-ℹ️ 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
@@ -5,6 +5,7 @@ import UNSTABLE_PartnerLogo from '../UNSTABLE_PartnerLogo';
 
 const logo = (
   <svg width="108" height="40" viewBox="0 0 108 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <title>Partner Logo</title>
     <g clipPath="url(#clip0_20364_10)">
       <path
         d="M26.1095 0.567627H7.76627C3.81354 0.567627 0.607956 3.77233 0.607956 7.72399V26.2858C0.607956 30.2374 3.81354 33.4422 7.76627 33.4422H14.2669C14.9581 33.4422 15.9871 33.6211 16.8596 33.8067C17.2935 33.8984 17.6805 33.9901 17.9624 34.0594C18.1033 34.0929 18.2152 34.122 18.2935 34.1421C18.3315 34.1511 18.3628 34.16 18.3829 34.1645C18.3919 34.1667 18.3986 34.169 18.4031 34.169C18.4098 34.169 18.4187 34.1734 18.4299 34.1779C18.4545 34.1869 18.4903 34.2003 18.5373 34.2159C18.6312 34.2495 18.7699 34.3009 18.9467 34.3635C19.3001 34.491 19.8057 34.6744 20.4186 34.898C21.6445 35.3431 23.2976 35.9424 25.0089 36.5619C28.4292 37.8031 32.071 39.127 32.9635 39.4624L33.2655 39.5765V7.72399C33.2655 3.77233 30.0599 0.567627 26.1072 0.567627H26.1095Z"

diff --git a/...es/web-react/src/components/UNSTABLE_PartnerLogo/stories/UNSTABLE_PartnerLogo.stories.tsx b/...es/web-react/src/components/UNSTABLE_PartnerLogo/stories/UNSTABLE_PartnerLogo.stories.tsx
@@ -26,6 +26,7 @@ const meta: Meta<typeof UNSTABLE_PartnerLogo> = {
     hasSafeAreaDisabled: false,
     children: (
       <svg width="108" height="40" viewBox="0 0 108 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <title>Partner Logo</title>
         <g clipPath="url(#clip0_20364_10)">
           <path
             d="M26.1095 0.567627H7.76627C3.81354 0.567627 0.607956 3.77233 0.607956 7.72399V26.2858C0.607956 30.2374 3.81354 33.4422 7.76627 33.4422H14.2669C14.9581 33.4422 15.9871 33.6211 16.8596 33.8067C17.2935 33.8984 17.6805 33.9901 17.9624 34.0594C18.1033 34.0929 18.2152 34.122 18.2935 34.1421C18.3315 34.1511 18.3628 34.16 18.3829 34.1645C18.3919 34.1667 18.3986 34.169 18.4031 34.169C18.4098 34.169 18.4187 34.1734 18.4299 34.1779C18.4545 34.1869 18.4903 34.2003 18.5373 34.2159C18.6312 34.2495 18.7699 34.3009 18.9467 34.3635C19.3001 34.491 19.8057 34.6744 20.4186 34.898C21.6445 35.3431 23.2976 35.9424 25.0089 36.5619C28.4292 37.8031 32.071 39.127 32.9635 39.4624L33.2655 39.5765V7.72399C33.2655 3.77233 30.0599 0.567627 26.1072 0.567627H26.1095Z"

diff --git a/packages/web-react/src/components/UNSTABLE_ProductLogo/README.md b/packages/web-react/src/components/UNSTABLE_ProductLogo/README.md
@@ -8,8 +8,8 @@ The ProductLogo component is used to display the logo of the product.
 ```jsx
 import { UNSTABLE_ProductLogo } from '@spirit/web-react';
 
-<UNSTABLE_ProductLogo aria-label="Logo of the product">
-  <!-- Logo go here -->
+<UNSTABLE_ProductLogo>
+  <!-- Logo goes here -->
 </UNSTABLE_ProductLogo>;
 ```
 
@@ -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';
 
-<UNSTABLE_ProductLogo isInverted aria-label="Logo of the product">
-  <!-- Inverted logo go here -->
+<UNSTABLE_ProductLogo isInverted>
+  <!-- Inverted logo goes here -->
 </UNSTABLE_ProductLogo>;
 ```
 
@@ -33,28 +33,27 @@ The content of the ProductLogo component can be an image or svg.
 ### Image
 
 ```jsx
-<UNSTABLE_ProductLogo aria-label="Logo of the product">
-  <img src="path-to-logo" alt="Product Logo" height="60px" width="120px" aria-hidden="true" />
+<UNSTABLE_ProductLogo>
+  <img src="path-to-logo" alt="Product Logo" height="60" width="120" />
 </UNSTABLE_ProductLogo>
 ```
 
-ℹ️ 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 `<title>` 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
@@ -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</title>
     <g clipPath="url(#clip0_19404_2964)">
       <path
         fillRule="evenodd"
@@ -68,8 +69,6 @@ export const defaultSvgLogo = (
   </svg>
 );
 
-const ProductLogoDefault = () => (
-  <UNSTABLE_ProductLogo aria-label="Logo of the JobBoard">{defaultSvgLogo}</UNSTABLE_ProductLogo>
-);
+const ProductLogoDefault = () => <UNSTABLE_ProductLogo>{defaultSvgLogo}</UNSTABLE_ProductLogo>;
 
 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
@@ -3,6 +3,7 @@ import UNSTABLE_ProductLogo from '../UNSTABLE_ProductLogo';
 
 export const invertedSvgLogo = (
   <svg width="178" height="44" viewBox="0 0 178 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <title>JobBoard logo</title>
     <g clipPath="url(#clip0_19404_2967)">
       <path
         fillRule="evenodd"
@@ -55,10 +56,6 @@ export const invertedSvgLogo = (
   </svg>
 );
 
-const ProductLogoDefault = () => (
-  <UNSTABLE_ProductLogo isInverted aria-label="Logo of the JobBoard">
-    {invertedSvgLogo}
-  </UNSTABLE_ProductLogo>
-);
+const ProductLogoDefault = () => <UNSTABLE_ProductLogo isInverted>{invertedSvgLogo}</UNSTABLE_ProductLogo>;
 
 export default ProductLogoDefault;