revert changes to color:transparent

app/assets/javascripts/enhancedTextbox.js

@@ -23,7 +23,7 @@
           <div class='textbox-highlight-wrapper' />
         `)
         .after(this.$background = $(`
-          <div class="textbox-highlight-background" aria-hidden="true" />
+          <div class="textbox-highlight-background" aria-hidden="true" role="presentation"/>
         `))
         .on("input", this.update);
 
@@ -37,7 +37,7 @@
       this.initialHeight = visibleTextbox.height();
 
       this.$background.css({
-        'border-width': this.$textbox.css('border-width')
+        'border-width': this.$textbox.css('border-width'),
       });
 
       visibleTextbox.remove();
@@ -73,16 +73,10 @@
     );
 
     this.update = () => {
-      const isEmpty = this.$textbox.val().trim() === "";
 
-      if (isEmpty) {
-          this.$background.html(
-              this.highlightPlaceholders ? this.contentReplaced() : this.contentEscaped()
-          );
-          this.$background.show();
-      } else {
-          this.$background.hide();
-      }
+      this.$background.html(
+        this.highlightPlaceholders ? this.contentReplaced() : this.contentEscaped()
+      );
 
       this.resize();
 

app/assets/sass/uswds/_uswds-theme-custom-styles.scss

@@ -133,6 +133,7 @@ td.table-empty-message {
    line-height: 1.2;
    padding: units(1);
    font-family: family("sans");
+   color: black;
 }
 
 .usa-dark-background .pill-item__label {
@@ -604,12 +605,18 @@ details form {
   }
 
    &-background {
+      position: absolute;
+      top: 0;
+      left: 0;
       pointer-events: none;
+      color: black;
       white-space: pre-wrap;
       overflow-wrap: break-word;
       word-wrap: break-word;
       border: 2px solid transparent;
       padding-bottom: units(3);
+      z-index: 10;
+      opacity: 0;
 
     // transparent borders become visible in high contrast modes so set to match background
     @media (-ms-high-contrast: active), (forced-colors: active) {