From 1af4ab1f26447f5622636dbd8ead541efbc1b3da Mon Sep 17 00:00:00 2001
From: Ed Horsford <mail@edwardhorsford.com>
Date: Tue, 11 Jun 2024 10:39:28 +0100
Subject: [PATCH] Add visually hidden text to summary list examples

---
 .../SummaryList.stories.tsx                   | 23 +++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/stories/Content Presentation/SummaryList.stories.tsx b/stories/Content Presentation/SummaryList.stories.tsx
index 6758b19a..1b3fe488 100644
--- a/stories/Content Presentation/SummaryList.stories.tsx	
+++ b/stories/Content Presentation/SummaryList.stories.tsx	
@@ -29,14 +29,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 class="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 class="nhsuk-u-visually-hidden"> date of birth</span>
+          </a>
         </SummaryList.Actions>
       </SummaryList.Row>
       <SummaryList.Row>
@@ -49,7 +53,9 @@ export const Standard: Story = {
           SE23 6FH
         </SummaryList.Value>
         <SummaryList.Actions>
-          <a href="stories#">Change</a>
+          <a href="#">
+            Change<span class="nhsuk-u-visually-hidden"> contact information</span>
+          </a>
         </SummaryList.Actions>
       </SummaryList.Row>
       <SummaryList.Row>
@@ -59,11 +65,20 @@ export const Standard: Story = {
           <BodyText>sarah.phillips@example.com</BodyText>
         </SummaryList.Value>
         <SummaryList.Actions>
-          <a href="stories#">Change</a>
+          <a href="#">
+            Change<span class="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 = {