diff --git a/stories/Content Presentation/SummaryList.stories.tsx b/stories/Content Presentation/SummaryList.stories.tsx
index 6758b19a..c519dc50 100644
--- a/stories/Content Presentation/SummaryList.stories.tsx
+++ b/stories/Content Presentation/SummaryList.stories.tsx
@@ -3,6 +3,25 @@ import React from 'react';
import { SummaryList, BodyText } from '../../src';
import { Meta, StoryObj } from '@storybook/react';
+
+/**
+ * ## Implementation notes
+ *
+ * When providing action links, you must include visually hidden text. This means a screen reader user will hear a meaningful action, like "Change name" or "Change date of birth".'
+ *
+ * Example of an action link:
+ *
+ * ```jsx
+ *
+ * Change
+ *
+ * {' '}name
+ *
+ *
+ * ```
+ */
+
+
const meta: Meta = {
title: 'Content Presentation/SummaryList',
component: SummaryList,
@@ -15,6 +34,8 @@ SummaryList.Key.displayName = 'SummaryList.Key';
SummaryList.Value.displayName = 'SummaryList.Value';
SummaryList.Actions.displayName = 'SummaryList.Actions';
+
+
export const Standard: Story = {
argTypes: {
noBorder: {
@@ -29,14 +50,18 @@ export const Standard: Story = {
Name
Sarah Philips
- Change
+
+ Change name
+
Date of birth
5 January 1978
- Change
+
+ Change date of birth
+
@@ -49,7 +74,9 @@ export const Standard: Story = {
SE23 6FH
- Change
+
+ Change contact information
+
@@ -59,13 +86,24 @@ export const Standard: Story = {
sarah.phillips@example.com
- Change
+
+ Change contact details
+
),
+ parameters: {
+ docs: {
+ description: {
+ story: 'Change links must include visually hidden text. This means a screen reader user will hear a meaningful action, like "Change name" or "Change date of birth".'
+ }
+ }
+ }
};
+
+
export const SummaryListWithoutActions: Story = {
args: { noBorder: false },
render: ({ noBorder }) => (