)
-ProfiledWithIcon.story = {
- name: 'Profiled with icon',
-}
-
export const ExternalWithIcon = () => (
@@ -101,10 +93,6 @@ export const ExternalWithIcon = () => (
)
-ExternalWithIcon.story = {
- name: 'External with icon',
-}
-
export const WithImagesLeft = () => (
(
)
-WithImagesLeft.story = {
- name: 'With images left',
-}
-
export const WithImagesTop = () => (
(
)
-WithImagesTop.story = {
- name: 'With images top',
-}
-
-export const CardWithAriaLabelAndAriaDescribedBy = () => (
-
-
-
}
- href=' '
- subTitle='Artikkel / 11. mai 2019'
- title='Dangerous Children'
- ariaLabel='Tittel - Artikkel 11. mai 2019'
- ariaDescribedBy='text'
- >
-
Explain something about something with something clever.
-
+export const CardWithAriaLabel = () => {
+ const title = 'Dangerous Children'
+ const subTitle = 'Artikkel / 11. mai 2019'
+ return (
+
+
+ }
+ href=' '
+ subTitle={subTitle}
+ title={title}
+ ariaLabel={`${title}, ${subTitle.replace(' /', ',')}`}
+ >
+ Explain something about something with something clever.
+
+
+
+ }
+ profiled
+ external
+ hrefText='Gå til url'
+ ariaLabel='Gå til url'
+ >
+ Explain something about something with something clever.
+
+
-
- }
- profiled
- external
- hrefText='Gå til url'
- ariaLabel='Gå til url'
- ariaDescribedBy='text'
- >
- Explain something about something with something clever.
-
-
-
-)
-
-CardWithAriaLabelAndAriaDescribedBy.story = {
- name: 'Card with ariaLabel and ariaDescribedBy',
+ )
}
export const DefaultProfiledCardMedTittel = () => (
@@ -199,10 +177,6 @@ export const DefaultProfiledCardMedTittel = () => (
)
-DefaultProfiledCardMedTittel.story = {
- name: '**Default/Profiled Card med tittel',
-}
-
export const DefaultProfiledCardWithoutTitleButWithHrefText = () => (
@@ -247,10 +221,6 @@ export const DefaultProfiledCardWithoutTitleButWithHrefText = () => (
)
-DefaultProfiledCardWithoutTitleButWithHrefText.story = {
- name: '**Default/Profiled Card without title, but with hrefText',
-}
-
export const CardWithImages = () => (
@@ -297,7 +267,3 @@ export const CardWithImages = () => (
)
-
-CardWithImages.story = {
- name: '**Card with images',
-}
diff --git a/src/components/Card/card.test.jsx b/src/components/Card/card.test.jsx
index fb04bae0..9c0dd204 100644
--- 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 (
+
+ ProfiledBox
+
+ )
+ expect(await screen.findByLabelText('Alternative profiledBox screen reader text')).toBeVisible()
+ })
})
diff --git a/src/components/Card/index.jsx b/src/components/Card/index.jsx
index bffab576..5f75b217 100644
--- 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,
}) => (