diff --git a/src/templates/bootstrap4/input/form.ejs b/src/templates/bootstrap4/input/form.ejs
index 266ca6694..256b5e6f4 100644
--- a/src/templates/bootstrap4/input/form.ejs
+++ b/src/templates/bootstrap4/input/form.ejs
@@ -34,7 +34,12 @@
 <span aria-live="assertive" id="{{ctx.instance.id}}-liveRegion" class="sr-only" ref="liveRegion"></span>
 {% } %}
 {% if (ctx.suffix) { %}
-  <div class="input-group-append" ref="suffix">
+  <div class="input-group-append"
+    ref="suffix"
+    {% if (ctx.readOnly) { %}
+    role="presentation"
+    {% } %}
+    >
     <span class="input-group-text">
       {% if(ctx.suffix instanceof HTMLElement){ %}
         {{ ctx.t(ctx.suffix.outerHTML, { _userInput: true }) }}
diff --git a/src/templates/bootstrap5/input/form.ejs b/src/templates/bootstrap5/input/form.ejs
index 599d2af54..15e03ef9b 100644
--- a/src/templates/bootstrap5/input/form.ejs
+++ b/src/templates/bootstrap5/input/form.ejs
@@ -41,7 +41,12 @@
 <span aria-live="assertive" id="{{ctx.instance.id}}-liveRegion" class="visually-hidden" ref="liveRegion"></span>
 {% } %}
 {% if (ctx.suffix) { %}
-  <div class="input-group-text" ref="suffix">
+  <div class="input-group-text" 
+    ref="suffix"
+    {% if (ctx.readOnly) { %}
+    role="presentation"
+    {% } %}
+    >
     {% if(ctx.suffix instanceof HTMLElement){ %}
       {{ ctx.t(ctx.suffix.outerHTML, { _userInput: true }) }}
     {% } else{ %}
@@ -53,7 +58,7 @@
   </div>
 {% } %}
 {% if (ctx.component.showCharCount || ctx.component.showWordCount) { %}
-<div class="form-text {{ctx.component.description ? float-end : text-end">
+<div class="form-text {{ctx.component.description ? 'float-end' : 'text-end'}}">
   {% if (ctx.component.showCharCount) { %}
   <span class="text-muted" ref="charcount" aria-live="polite"></span>
   {% } %}