From 77d7bf570bc5d04ae576f8cb27a02d1d8c83cb6a Mon Sep 17 00:00:00 2001
From: Roy Johnson <roy.e.johnson@rice.edu>
Date: Wed, 14 May 2025 10:02:06 -0500
Subject: [PATCH] CORE-980: fix email error message

[CORE-980]
Add alert role and id to error message
Add aria-invalid and aria-errormessage to the field
Remove <b> tags (that don't work) from messages
---
 app/assets/stylesheets/controls/_card.scss      |  2 +-
 config/locales/activerecord.en.yml              |  4 ++--
 config/locales/activerecord.pl.yml              |  4 ++--
 vendor/assets/javascripts/bootstrap-editable.js | 10 ++++++++--
 4 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/app/assets/stylesheets/controls/_card.scss b/app/assets/stylesheets/controls/_card.scss
index 0e8885db6..b87cde900 100644
--- a/app/assets/stylesheets/controls/_card.scss
+++ b/app/assets/stylesheets/controls/_card.scss
@@ -135,7 +135,7 @@
   section,
   .warning,
   .form-group {
-    & + *:not(.footer):not(.alert):not(.warning):not(.errors) {
+    & + *:not(.footer):not(.alert):not(.warning):not(.errors):not(.help-block) {
       margin-top: $os-section-spacing;
     }
   }
diff --git a/config/locales/activerecord.en.yml b/config/locales/activerecord.en.yml
index 2a95fd64c..556e7d94d 100644
--- a/config/locales/activerecord.en.yml
+++ b/config/locales/activerecord.en.yml
@@ -132,8 +132,8 @@ en:
           attributes:
             # Marking &email_address for reference later.
             value: &email_addres_validations
-              invalid: <b>%{value}</b> is not a valid email address
-              missing_mx_records: <b>%{value}</b> is not a valid email address
+              invalid: "%{value} is not a valid email address"
+              missing_mx_records: "%{value} is not a valid email address"
               too_many_dots: This email has too many dots in a row
               ends_with_dot: An email cannot end with a dot
               contains_tick: An email should not contain a tick (`)
diff --git a/config/locales/activerecord.pl.yml b/config/locales/activerecord.pl.yml
index e63d6eacd..046033117 100644
--- a/config/locales/activerecord.pl.yml
+++ b/config/locales/activerecord.pl.yml
@@ -135,8 +135,8 @@ pl:
         email_address:
           attributes:
             value: &email_address_validations
-              invalid: <b>%{value}</b> nie jest poprawnym adresem e-mail
-              missing_mx_records: <b>%{value}</b> nie jest poprawnym adresem e-mail
+              invalid: "%{value} nie jest poprawnym adresem e-mail"
+              missing_mx_records: "%{value} nie jest poprawnym adresem e-mail"
               too_many_dots: Adres e-mail ma zbyt wiele kropek pod rząd
               ends_with_dot: Adres e-mail nie może kończyć się kropką
               contains_tick: Adres e-mail nie może zawierać znaku „`”
diff --git a/vendor/assets/javascripts/bootstrap-editable.js b/vendor/assets/javascripts/bootstrap-editable.js
index 14a47467b..4ecbb8a53 100755
--- a/vendor/assets/javascripts/bootstrap-editable.js
+++ b/vendor/assets/javascripts/bootstrap-editable.js
@@ -181,7 +181,9 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
 
             if(msg === false) {
                 $group.removeClass($.fn.editableform.errorGroupClass);
-                $block.removeClass($.fn.editableform.errorBlockClass).empty().hide(); 
+                $block.removeClass($.fn.editableform.errorBlockClass).empty().hide();
+                // Customized by OpenStax for accessibility
+                $group.find('input').removeAttr('aria-invalid aria-errormessage');
             } else {
                 //convert newline to <br> for more pretty error display
                 if(msg) {
@@ -193,6 +195,9 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
                 }
                 $group.addClass($.fn.editableform.errorGroupClass);
                 $block.addClass($.fn.editableform.errorBlockClass).html(msg).show();
+                // Customized by OpenStax for accessibility
+                $group.find('input').attr('aria-errormessage', $block.attr('id'))
+                    .attr('aria-invalid', 'true');
             }
         },
 
@@ -617,7 +622,8 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
     $.fn.editableform.template = '<form class="form-inline editableform">'+
     '<div class="control-group">' + 
     '<label><div class="editable-input"></div><div class="editable-buttons"></div></div>'+
-    '<div class="editable-error-block"></div>' + 
+    // Customized by OpenStax for accessibility
+    '<div class="editable-error-block" role="alert" id="editable-alert"></div>' + 
     '</label>' + 
     '</form>';