From ea52e489d3a284aa1d3439219062b2687d0e416e Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Sat, 25 May 2024 02:21:00 +0800
Subject: [PATCH] Improve screen reader accessibility for required guestbook
 form fields

---
 src/assets/js/comments.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/assets/js/comments.js b/src/assets/js/comments.js
index ebaa3ab1..48ef052a 100644
--- a/src/assets/js/comments.js
+++ b/src/assets/js/comments.js
@@ -77,7 +77,10 @@ registerNamespace("GW.Controls", function (ns)
                 <span id="${this.idKey}-title" class="comment-form-title">${this.titleText}</span>
                 <div class="input-horizontal-flex">
                     <div class="input-vertical">
-                        <label for="${this.idKey}-dispName">Display name*</label>
+                        <label for="${this.idKey}-dispName">
+                            Display name<span aria-hidden="true">*</span>
+                            <span class="visually-hidden">(Required)</span>
+                        </label>
                         <input id="${this.idKey}-dispName" type="text" maxlength="1000" required="true">
                     </div>
                     <div class="input-vertical">
@@ -95,7 +98,10 @@ registerNamespace("GW.Controls", function (ns)
                 </div>
                 <div class="comment-box-container">
                     <div class="input-vertical">
-                        <label for="${this.idKey}-comment">Comment*</label>
+                        <label for="${this.idKey}-comment">
+                            Comment<span aria-hidden="true">*</span>
+                            <span class="visually-hidden">(Required)</span>
+                        </label>
                         <textarea  id="${this.idKey}-comment"
                                     minlength="1"
                                     maxlength="1000"