Re-implement aria-label for Card component

MIM-1936
statisticsnorway · Aug 8, 2024 · c4ea173 · c4ea173
1 parent 813cb65
commit c4ea173
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 65 deletions.
diff --git a/src/components/Card/card.story.jsx b/src/components/Card/card.story.jsx
@@ -48,10 +48,6 @@ export const DefaultWithIcon = () => (
   </div>
 )
 
-DefaultWithIcon.story = {
-  name: 'Default with icon',
-}
-
 export const Profiled = () => (
   <div style={{ width: '800px', display: 'flex', justifyContent: 'center' }}>
     <div style={{ marginRight: '10px', width: '400px' }}>
@@ -82,10 +78,6 @@ export const ProfiledWithIcon = () => (
   </div>
 )
 
-ProfiledWithIcon.story = {
-  name: 'Profiled with icon',
-}
-
 export const ExternalWithIcon = () => (
   <div style={{ width: '800px', display: 'flex', justifyContent: 'center' }}>
     <div style={{ marginRight: '10px', width: '400px' }}>
@@ -101,10 +93,6 @@ export const ExternalWithIcon = () => (
   </div>
 )
 
-ExternalWithIcon.story = {
-  name: 'External with icon',
-}
-
 export const WithImagesLeft = () => (
   <div>
     <Card
@@ -119,10 +107,6 @@ export const WithImagesLeft = () => (
   </div>
 )
 
-WithImagesLeft.story = {
-  name: 'With images left',
-}
-
 export const WithImagesTop = () => (
   <div style={{ width: '380px' }}>
     <Card
@@ -137,43 +121,37 @@ export const WithImagesTop = () => (
   </div>
 )
 
-WithImagesTop.story = {
-  name: 'With images top',
-}
-
-export const CardWithAriaLabelAndAriaDescribedBy = () => (
-  <div style={{ width: '800px', display: 'flex', justifyContent: 'center' }}>
-    <div style={{ marginRight: '10px', width: '380px' }}>
-      <Card
-        imagePlacement='top'
-        image={<img src='/16x9.png' alt='testImage' />}
-        href=' '
-        subTitle='Artikkel / 11. mai 2019'
-        title='Dangerous Children'
-        ariaLabel='Tittel - Artikkel 11. mai 2019'
-        ariaDescribedBy='text'
-      >
-        <Text>Explain something about something with something clever.</Text>
-      </Card>
+export const CardWithAriaLabel = () => {
+  const title = 'Dangerous Children'
+  const subTitle = 'Artikkel / 11. mai 2019'
+  return (
+    <div style={{ width: '800px', display: 'flex', justifyContent: 'center' }}>
+      <div style={{ marginRight: '10px', width: '380px' }}>
+        <Card
+          imagePlacement='top'
+          image={<img src='/16x9.png' alt='testImage' aria-hidden='true' />}
+          href=' '
+          subTitle={subTitle}
+          title={title}
+          ariaLabel={`${title}, ${subTitle.replace(' /', ',')}`}
+        >
+          <Text>Explain something about something with something clever.</Text>
+        </Card>
+      </div>
+      <div style={{ width: '400px' }}>
+        <Card
+          href=' '
+          icon={<Globe size={120} aria-hidden='true' />}
+          profiled
+          external
+          hrefText='Gå til url'
+          ariaLabel='Gå til url'
+        >
+          <Text>Explain something about something with something clever.</Text>
+        </Card>
+      </div>
     </div>
-    <div style={{ width: '400px' }}>
-      <Card
-        href=' '
-        icon={<Globe size={120} />}
-        profiled
-        external
-        hrefText='Gå til url'
-        ariaLabel='Gå til url'
-        ariaDescribedBy='text'
-      >
-        <Text>Explain something about something with something clever.</Text>
-      </Card>
-    </div>
-  </div>
-)
-
-CardWithAriaLabelAndAriaDescribedBy.story = {
-  name: 'Card with ariaLabel and ariaDescribedBy',
+  )
 }
 
 export const DefaultProfiledCardMedTittel = () => (
@@ -199,10 +177,6 @@ export const DefaultProfiledCardMedTittel = () => (
   </div>
 )
 
-DefaultProfiledCardMedTittel.story = {
-  name: '**Default/Profiled Card med tittel',
-}
-
 export const DefaultProfiledCardWithoutTitleButWithHrefText = () => (
   <div style={{ width: '1200px', display: 'flex', justifyContent: 'center' }}>
     <div style={{ width: '380px', marginLeft: '10px' }}>
@@ -247,10 +221,6 @@ export const DefaultProfiledCardWithoutTitleButWithHrefText = () => (
   </div>
 )
 
-DefaultProfiledCardWithoutTitleButWithHrefText.story = {
-  name: '**Default/Profiled Card without title, but with hrefText',
-}
-
 export const CardWithImages = () => (
   <div style={{ width: '800px', display: 'flex', justifyContent: 'center', flexDirection: 'column' }}>
     <div>
@@ -297,7 +267,3 @@ export const CardWithImages = () => (
     </div>
   </div>
 )
-
-CardWithImages.story = {
-  name: '**Card with images',
-}
diff --git a/src/components/Card/index.jsx b/src/components/Card/index.jsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import { ArrowRight, Download, ExternalLink } from 'react-feather'
 
 const Card = ({
+  ariaLabel,
   children,
   className,
   external,
@@ -18,7 +19,10 @@ const Card = ({
   title,
 }) => (
   <div className={`ssb-card${className ? ` ${className}` : ''}`}>
-    <div className={`clickable ${imagePlacement === 'left' ? 'left-orientation' : 'top-orientation'}`}>
+    <div
+      className={`clickable ${imagePlacement === 'left' ? 'left-orientation' : 'top-orientation'}`}
+      aria-label={ariaLabel}
+    >
       {image && <div className='card-image'>{image}</div>}
 
       <div
@@ -91,6 +95,7 @@ Card.defaultProps = {
 }
 
 Card.propTypes = {
+  ariaLabel: PropTypes.string,
   children: PropTypes.node.isRequired,
   className: PropTypes.string,
   downloadText: PropTypes.string,