From cae2ac8a07e9c41ee0185aaf9567296e7bc42618 Mon Sep 17 00:00:00 2001
From: John Jago <jc@johnjago.com>
Date: Thu, 30 May 2024 16:12:52 -0500
Subject: [PATCH] docs(alerts): change some `sr-only` to be more descriptive

Although it appears the screen reader text describes an info icon in these instances, it would serve screen reader users better to have the type of alert read out to them, not the description of the icon, as they might not have any other indication of what type of alert it is.
---
 content/components/alerts.md | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/content/components/alerts.md b/content/components/alerts.md
index 81ddca7fa..1eb211fa3 100644
--- a/content/components/alerts.md
+++ b/content/components/alerts.md
@@ -55,7 +55,7 @@ You can also include a descriptive icon to complement the message inside the ale
   <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
     <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
   </svg>
-  <span class="sr-only">Info</span>
+  <span class="sr-only">Danger</span>
   <div>
     <span class="font-medium">Danger alert!</span> Change a few things up and try submitting again.
   </div>
@@ -64,7 +64,7 @@ You can also include a descriptive icon to complement the message inside the ale
   <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
     <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
   </svg>
-  <span class="sr-only">Info</span>
+  <span class="sr-only">Success</span>
   <div>
     <span class="font-medium">Success alert!</span> Change a few things up and try submitting again.
   </div>
@@ -73,7 +73,7 @@ You can also include a descriptive icon to complement the message inside the ale
   <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
     <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
   </svg>
-  <span class="sr-only">Info</span>
+  <span class="sr-only">Warning</span>
   <div>
     <span class="font-medium">Warning alert!</span> Change a few things up and try submitting again.
   </div>
@@ -107,7 +107,7 @@ Use this example to add a border accent to the alert component instead of just a
   <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
     <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
   </svg>
-  <span class="sr-only">Info</span>
+  <span class="sr-only">Danger</span>
   <div>
     <span class="font-medium">Danger alert!</span> Change a few things up and try submitting again.
   </div>
@@ -116,7 +116,7 @@ Use this example to add a border accent to the alert component instead of just a
   <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
     <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
   </svg>
-  <span class="sr-only">Info</span>
+  <span class="sr-only">Success</span>
   <div>
     <span class="font-medium">Success alert!</span> Change a few things up and try submitting again.
   </div>
@@ -125,7 +125,7 @@ Use this example to add a border accent to the alert component instead of just a
   <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
     <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
   </svg>
-  <span class="sr-only">Info</span>
+  <span class="sr-only">Warning</span>
   <div>
     <span class="font-medium">Warning alert!</span> Change a few things up and try submitting again.
   </div>
@@ -372,7 +372,7 @@ The following alert components can be used if you wish to disclose more informat
     <svg class="flex-shrink-0 w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
       <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
     </svg>
-    <span class="sr-only">Info</span>
+    <span class="sr-only">Danger</span>
     <h3 class="text-lg font-medium">This is a danger alert</h3>
   </div>
   <div class="mt-2 mb-4 text-sm">
@@ -395,7 +395,7 @@ The following alert components can be used if you wish to disclose more informat
     <svg class="flex-shrink-0 w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
       <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
     </svg>
-    <span class="sr-only">Info</span>
+    <span class="sr-only">Success</span>
     <h3 class="text-lg font-medium">This is a success alert</h3>
   </div>
   <div class="mt-2 mb-4 text-sm">
@@ -418,7 +418,7 @@ The following alert components can be used if you wish to disclose more informat
     <svg class="flex-shrink-0 w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
       <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
     </svg>
-    <span class="sr-only">Info</span>
+    <span class="sr-only">Warning</span>
     <h3 class="text-lg font-medium">This is a warning alert</h3>
   </div>
   <div class="mt-2 mb-4 text-sm">
@@ -765,4 +765,4 @@ const dismiss: DismissInterface = new Dismiss($targetEl, $triggerEl, options, in
 
 // programmatically hide it
 dismiss.hide();
-```
\ No newline at end of file
+```