CORE-980: fix email error message (#1640)

[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

Co-authored-by: Michael Volo <[email protected]>

Author: RoyEJohnson

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;
     }
   }

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 (`)

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 „`”

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>';