Merge pull request #5907 from dfsmania/fix_accessibility_validations

Fix accessibility validations conflicting with Bootstrap

Author: puikinsh

src/scss/_accessibility.scss

@@ -159,12 +159,6 @@
 }
 
 .invalid-feedback {
-  display: block;
-  width: 100%;
-  margin-top: .25rem;
-  font-size: .875em;
-  color: var(--bs-danger);
-
   &[role="alert"] {
     font-weight: 600;
   }

src/ts/accessibility.ts

@@ -338,10 +338,13 @@ export class AccessibilityManager {
         }
       }
 
-      // Handle invalid states
-      htmlInput.addEventListener('invalid', () => {
-        this.handleFormError(htmlInput)
-      })
+      // Handle invalid state unless the element explicitly opts out via the
+      // 'disable-adminlte-validations' class.
+      if (!htmlInput.classList.contains('disable-adminlte-validations')) {
+        htmlInput.addEventListener('invalid', () => {
+          this.handleFormError(htmlInput)
+        })
+      }
     })
   }
 
@@ -354,7 +357,12 @@ export class AccessibilityManager {
       errorElement.id = errorId
       errorElement.className = 'invalid-feedback'
       errorElement.setAttribute('role', 'alert')
-      input.parentNode?.insertBefore(errorElement, input.nextSibling)
+
+      // Always append the error element as the last child of the parent.
+      // This prevents breaking layouts where inputs use Bootstrap's
+      // `.input-group-text` decorators, ensuring the error stays below
+      // the entire input group.
+      input.parentNode?.append(errorElement)
     }
 
     errorElement.textContent = input.validationMessage