diff --git a/package.json b/package.json index 5e709a1e..9c0f43fb 100644 --- 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 index d19c45c6..b75caa3e 100644 --- a/src/components/Card/README.md +++ b/src/components/Card/README.md @@ -107,7 +107,7 @@ - +
@@ -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 index 7c94d7b9..d14d36d0 100644 --- a/src/components/Card/card.story.jsx +++ b/src/components/Card/card.story.jsx @@ -48,10 +48,6 @@ export const DefaultWithIcon = () => (
) -DefaultWithIcon.story = { - name: 'Default with icon', -} - export const Profiled = () => (
@@ -82,10 +78,6 @@ export const ProfiledWithIcon = () => (
) -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 ( +
+
+ +
+
+ +
-
- } - 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, }) => (
-
+
{image &&
{image}
}