aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/components/atoms/buttons/button-link.stories.tsx13
-rw-r--r--src/components/atoms/buttons/button-link.tsx4
-rw-r--r--src/components/atoms/buttons/buttons.module.scss2
-rw-r--r--src/components/molecules/layout/card.fixture.tsx19
-rw-r--r--src/components/molecules/layout/card.stories.tsx51
-rw-r--r--src/components/molecules/layout/card.test.tsx33
-rw-r--r--src/components/molecules/layout/card.tsx14
-rw-r--r--src/components/organisms/layout/cards-list.tsx3
8 files changed, 90 insertions, 49 deletions
diff --git a/src/components/atoms/buttons/button-link.stories.tsx b/src/components/atoms/buttons/button-link.stories.tsx
index d06aff3..22d13f6 100644
--- a/src/components/atoms/buttons/button-link.stories.tsx
+++ b/src/components/atoms/buttons/button-link.stories.tsx
@@ -24,6 +24,19 @@ export default {
required: false,
},
},
+ 'aria-labelledby': {
+ control: {
+ type: null,
+ },
+ description: 'One or more ids that refer to an accessible label.',
+ table: {
+ category: 'Accessibility',
+ },
+ type: {
+ name: 'string',
+ required: false,
+ },
+ },
children: {
control: {
type: 'text',
diff --git a/src/components/atoms/buttons/button-link.tsx b/src/components/atoms/buttons/button-link.tsx
index 64e0afd..989f737 100644
--- a/src/components/atoms/buttons/button-link.tsx
+++ b/src/components/atoms/buttons/button-link.tsx
@@ -8,6 +8,10 @@ export type ButtonLinkProps = {
*/
'aria-label'?: string;
/**
+ * One or more ids that refer to the accessible label.
+ */
+ 'aria-labelledby'?: string;
+ /**
* The button link body.
*/
children: ReactNode;
diff --git a/src/components/atoms/buttons/buttons.module.scss b/src/components/atoms/buttons/buttons.module.scss
index 2444bb1..b702544 100644
--- a/src/components/atoms/buttons/buttons.module.scss
+++ b/src/components/atoms/buttons/buttons.module.scss
@@ -21,6 +21,8 @@
&--square,
&--circle {
+ min-width: fit-content;
+ min-height: fit-content;
padding: var(--spacing-xs);
aspect-ratio: 1 / 1;
}
diff --git a/src/components/molecules/layout/card.fixture.tsx b/src/components/molecules/layout/card.fixture.tsx
new file mode 100644
index 0000000..f96cc43
--- /dev/null
+++ b/src/components/molecules/layout/card.fixture.tsx
@@ -0,0 +1,19 @@
+export const cover = {
+ alt: 'A picture',
+ height: 480,
+ src: 'http://placeimg.com/640/480',
+ width: 640,
+};
+
+export const id = 'nam';
+
+export const meta = {
+ author: 'Possimus',
+ thematics: ['Autem', 'Eos'],
+};
+
+export const tagline = 'Ut rerum incidunt';
+
+export const title = 'Alias qui porro';
+
+export const url = '/an-existing-url';
diff --git a/src/components/molecules/layout/card.stories.tsx b/src/components/molecules/layout/card.stories.tsx
index 0ad42c0..87051a9 100644
--- a/src/components/molecules/layout/card.stories.tsx
+++ b/src/components/molecules/layout/card.stories.tsx
@@ -1,5 +1,6 @@
import { ComponentMeta, ComponentStory } from '@storybook/react';
import Card from './card';
+import { cover, id, meta, tagline, title, url } from './card.fixture';
/**
* Card - Storybook Meta
@@ -47,6 +48,16 @@ export default {
required: false,
},
},
+ id: {
+ control: {
+ type: 'text',
+ },
+ description: 'The card id.',
+ type: {
+ name: 'string',
+ required: true,
+ },
+ },
meta: {
description: 'The card metadata (a publication date for example).',
table: {
@@ -108,25 +119,15 @@ export default {
const Template: ComponentStory<typeof Card> = (args) => <Card {...args} />;
-const cover = {
- alt: 'A picture',
- height: 480,
- src: 'http://placeimg.com/640/480',
- width: 640,
-};
-
-const meta = {
- thematics: ['Autem', 'Eos'],
-};
-
/**
* Card Stories - Default
*/
export const Default = Template.bind({});
Default.args = {
- title: 'Veritatis dicta quod',
+ id,
+ title,
titleLevel: 2,
- url: '#',
+ url,
};
/**
@@ -135,9 +136,10 @@ Default.args = {
export const WithCover = Template.bind({});
WithCover.args = {
cover,
- title: 'Veritatis dicta quod',
+ id,
+ title,
titleLevel: 2,
- url: '#',
+ url,
};
/**
@@ -145,10 +147,11 @@ WithCover.args = {
*/
export const WithMeta = Template.bind({});
WithMeta.args = {
+ id,
meta,
- title: 'Veritatis dicta quod',
+ title,
titleLevel: 2,
- url: '#',
+ url,
};
/**
@@ -156,10 +159,11 @@ WithMeta.args = {
*/
export const WithTagline = Template.bind({});
WithTagline.args = {
- tagline: 'Ullam accusantium ipsa',
- title: 'Veritatis dicta quod',
+ id,
+ tagline,
+ title,
titleLevel: 2,
- url: '#',
+ url,
};
/**
@@ -168,9 +172,10 @@ WithTagline.args = {
export const WithAll = Template.bind({});
WithAll.args = {
cover,
+ id,
meta,
- tagline: 'Ullam accusantium ipsa',
- title: 'Veritatis dicta quod',
+ tagline,
+ title,
titleLevel: 2,
- url: '#',
+ url,
};
diff --git a/src/components/molecules/layout/card.test.tsx b/src/components/molecules/layout/card.test.tsx
index d481f6c..1023aeb 100644
--- a/src/components/molecules/layout/card.test.tsx
+++ b/src/components/molecules/layout/card.test.tsx
@@ -1,49 +1,36 @@
import { render, screen } from '@tests/utils';
import Card from './card';
-
-const cover = {
- alt: 'A picture',
- height: 480,
- src: 'http://placeimg.com/640/480',
- width: 640,
-};
-
-const meta = {
- author: 'Possimus',
- thematics: ['Autem', 'Eos'],
-};
-
-const tagline = 'Ut rerum incidunt';
-
-const title = 'Alias qui porro';
-
-const url = '/an-existing-url';
+import { cover, id, meta, tagline, title, url } from './card.fixture';
describe('Card', () => {
it('renders a title wrapped in h2 element', () => {
- render(<Card title={title} titleLevel={2} url={url} />);
+ render(<Card id={id} title={title} titleLevel={2} url={url} />);
expect(
screen.getByRole('heading', { level: 2, name: title })
).toBeInTheDocument();
});
it('renders a link to another page', () => {
- render(<Card title={title} titleLevel={2} url={url} />);
+ render(<Card id={id} title={title} titleLevel={2} url={url} />);
expect(screen.getByRole('link')).toHaveAttribute('href', url);
});
it('renders a cover', () => {
- render(<Card title={title} titleLevel={2} url={url} cover={cover} />);
+ render(
+ <Card id={id} title={title} titleLevel={2} url={url} cover={cover} />
+ );
expect(screen.getByRole('img', { name: cover.alt })).toBeInTheDocument();
});
it('renders a tagline', () => {
- render(<Card title={title} titleLevel={2} url={url} tagline={tagline} />);
+ render(
+ <Card id={id} title={title} titleLevel={2} url={url} tagline={tagline} />
+ );
expect(screen.getByText(tagline)).toBeInTheDocument();
});
it('renders some meta', () => {
- render(<Card title={title} titleLevel={2} url={url} meta={meta} />);
+ render(<Card id={id} title={title} titleLevel={2} url={url} meta={meta} />);
expect(screen.getByText(meta.author)).toBeInTheDocument();
});
});
diff --git a/src/components/molecules/layout/card.tsx b/src/components/molecules/layout/card.tsx
index 7bbd040..c48bc18 100644
--- a/src/components/molecules/layout/card.tsx
+++ b/src/components/molecules/layout/card.tsx
@@ -22,6 +22,10 @@ export type CardProps = {
*/
coverFit?: ResponsiveImageProps['objectFit'];
/**
+ * The card id.
+ */
+ id: string;
+ /**
* The card meta.
*/
meta?: MetaData;
@@ -52,6 +56,7 @@ const Card: FC<CardProps> = ({
className = '',
cover,
coverFit = 'cover',
+ id,
meta,
tagline,
title,
@@ -59,7 +64,11 @@ const Card: FC<CardProps> = ({
url,
}) => {
return (
- <ButtonLink target={url} className={`${styles.wrapper} ${className}`}>
+ <ButtonLink
+ aria-labelledby={`${id}-heading`}
+ target={url}
+ className={`${styles.wrapper} ${className}`}
+ >
<article className={styles.article}>
<header className={styles.header}>
{cover && (
@@ -71,8 +80,9 @@ const Card: FC<CardProps> = ({
)}
<Heading
alignment="center"
- level={titleLevel}
className={styles.title}
+ id={`${id}-heading`}
+ level={titleLevel}
>
{title}
</Heading>
diff --git a/src/components/organisms/layout/cards-list.tsx b/src/components/organisms/layout/cards-list.tsx
index 1feddd0..dd05e59 100644
--- a/src/components/organisms/layout/cards-list.tsx
+++ b/src/components/organisms/layout/cards-list.tsx
@@ -55,9 +55,10 @@ const CardsList: FC<CardsListProps> = ({
value: (
<Card
key={id}
+ className={styles.card}
coverFit={coverFit}
+ id={id}
titleLevel={titleLevel}
- className={styles.card}
{...card}
/>
),
generated by cgit v1.2.3 (git 2.39.1) at 2025-10-27 04:26:23 +0000