From 4cdd2f5874035928a1e5bf6f1ca32b91e0912f00 Mon Sep 17 00:00:00 2001
From: Ed Horsford <mail@edwardhorsford.com>
Date: Tue, 11 Jun 2024 13:37:19 +0100
Subject: [PATCH] Add visually hidden text to summary list examples (#233)

* Add visually hidden text to summary list examples

* Add implimentation notes

* Fix className
---
 .../SummaryList.stories.tsx                   | 46 +++++++++++++++++--
 1 file changed, 42 insertions(+), 4 deletions(-)

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
+ *  <a href="#">
+ *   Change
+ *   <span className="nhsuk-u-visually-hidden">
+ *     {' '}name
+ *   </span>
+ * </a>
+ * ```
+ */
+
+
 const meta: Meta<typeof SummaryList> = {
   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 = {
         <SummaryList.Key>Name</SummaryList.Key>
         <SummaryList.Value>Sarah Philips</SummaryList.Value>
         <SummaryList.Actions>
-          <a href="stories#">Change</a>
+          <a href="#">
+            Change<span className="nhsuk-u-visually-hidden"> name</span>
+          </a>
         </SummaryList.Actions>
       </SummaryList.Row>
       <SummaryList.Row>
         <SummaryList.Key>Date of birth</SummaryList.Key>
         <SummaryList.Value>5 January 1978</SummaryList.Value>
         <SummaryList.Actions>
-          <a href="stories#">Change</a>
+          <a href="#">
+            Change<span className="nhsuk-u-visually-hidden"> date of birth</span>
+          </a>
         </SummaryList.Actions>
       </SummaryList.Row>
       <SummaryList.Row>
@@ -49,7 +74,9 @@ export const Standard: Story = {
           SE23 6FH
         </SummaryList.Value>
         <SummaryList.Actions>
-          <a href="stories#">Change</a>
+          <a href="#">
+            Change<span className="nhsuk-u-visually-hidden"> contact information</span>
+          </a>
         </SummaryList.Actions>
       </SummaryList.Row>
       <SummaryList.Row>
@@ -59,13 +86,24 @@ export const Standard: Story = {
           <BodyText>sarah.phillips@example.com</BodyText>
         </SummaryList.Value>
         <SummaryList.Actions>
-          <a href="stories#">Change</a>
+          <a href="#">
+            Change<span className="nhsuk-u-visually-hidden"> contact details</span>
+          </a>
         </SummaryList.Actions>
       </SummaryList.Row>
     </SummaryList>
   ),
+  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 }) => (