Mim 1936 card aria label (#1231)

* Re-implement aria-label for Card component MIM-1936 * Update documentation for Card (aria-label) * Add aria-label jest test for Card * Bump @statisticsnorway/ssb-component-library from 2.2.5 to 2.2.6
statisticsnorway · Aug 9, 2024 · f429664 · f429664
1 parent 813cb65
commit f429664
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 68 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@statisticsnorway/ssb-component-library",
-  "version": "2.2.5",
+  "version": "2.2.6",
   "description": "Component library for SSB (Statistics Norway)",
   "main": "lib/bundle.js",
   "scripts": {

diff --git a/src/components/Card/README.md b/src/components/Card/README.md
@@ -107,15 +107,14 @@
   </a>
 </div>
 
-<!-- External card with ariaLabel and ariaDescribedBy -->
+<!-- External card with ariaLabel -->
 <div class="ssb-card">
   <a
     href=" "
     class="clickable top-orientation"
     target="_blank"
     rel="noreferrer"
     aria-label="Gå til url"
-    aria-describedby="ssb-card-text"
   >
     <div class="card-content profiled external">
       <div class="card-icon">
@@ -190,3 +189,4 @@ Available props:
 | subTitle       | string                 | Smaller text over title                           |
 | title          | string                 | Card title                                        |
 | external       | bool                   | Change icon from ArrowRight to ExternalLink       |
+| ariaLabel      | string                 | Optional aria-label text for screen readers       |
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/card.test.jsx b/src/components/Card/card.test.jsx
@@ -77,4 +77,12 @@ describe('Card component', () => {
     )
     expect(await screen.findByText('Handling')).toBeVisible()
   })
+  test('Has aria-label', async () => {
+    render (
+      <Card href='' ariaLabel="Alternative profiledBox screen reader text">
+        ProfiledBox
+      </Card>
+    )
+    expect(await screen.findByLabelText('Alternative profiledBox screen reader text')).toBeVisible()
+  })
 })
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,