CMS-542: Add urgency level name to advisory icon

bcgov · Dec 27, 2024 · e8861b5 · e8861b5
1 parent d7f9fd7
commit e8861b5
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 7 deletions.
diff --git a/src/gatsby/src/components/advisories/advisoryLegend.js b/src/gatsby/src/components/advisories/advisoryLegend.js
@@ -33,7 +33,7 @@ const AdvisoryLegend = () => {
                 <div className="d-flex align-items-center me-3">
                   <img
                     src={legendItem.icon}
-                    alt="advisory status icon"
+                    alt={`${legendItem.label} urgency`}
                     className="advisory-status-icon"
                   />
                 </div>

diff --git a/src/gatsby/src/components/advisories/advisoryList.js b/src/gatsby/src/components/advisories/advisoryList.js
@@ -52,7 +52,7 @@ const AdvisoryList = ({ advisories, parkInfoHash }) => {
         break;
       case "yellow":
         capColor = "Yellow";
-        level = "Moderate";
+        level = "Medium";
         break;
       case "blue":
         capColor = "Blue";
@@ -64,14 +64,12 @@ const AdvisoryList = ({ advisories, parkInfoHash }) => {
         break;
     }
 
-    // alertMsg to use for aria-label on date circle, for screen readers
+    // alertMsg to use for aria-label on urgency level icon, for screen readers
     if (capColor === "Grey") {
       advisory.alertMsg = "Grey Advisory - Informational Advisory"
     } else {
-      advisory.alertMsg = capColor + " Advisory - " + level + " Urgency"; // eg Red alert - high urgency
+      advisory.alertMsg = level + " urgency"; // eg High urgency
     }
-
-
   }
 
   const processAdvisories = (a) => {

diff --git a/src/gatsby/src/components/park/advisoryDetails.js b/src/gatsby/src/components/park/advisoryDetails.js
@@ -139,7 +139,7 @@ export default function AdvisoryDetails({ advisories, parkType, parkAccessStatus
                   <div className="d-flex align-items-center">
                     <img
                       src={advisory.alertIcon}
-                      alt="advisory status icon"
+                      alt={`${advisory.urgency.urgency} urgency`}
                       className="advisory-status-icon"
                     ></img>
                     <HtmlContent className="accordion-header">{advisory.title}</HtmlContent>