Resolve #3485305 "Add back support for classic alerts, update tabledrag.js by adding accessible markup, and adjust styles for toasts/alerts(bottom) for better RTL display"

This merge request resolves issues #3485305 and #3496694 with a comprehensive refactor that modernizes the message system using Bootstrap 5 patterns and component-based architecture.

Problem

The alert component didn't properly differentiate between "Alert classic" and "Alert bottom" positioning modes, causing all alerts to appear at the bottom regardless of the configured message widget setting.

Solution

Complete Bootstrap 5 Component Refactor:

1. Redesigned Alert Component (components/alert/alert.twig):

   • Converted to pure Bootstrap 5 alert structure with icons
   • Individual alerts for each message (no more grouping multiple messages)
   • Each alert has its own icon and dismissible close button
   • Removed custom CSS positioning in favor of Bootstrap utility classes
   • Added SVG icon system with proper accessibility

2. Template System Overhaul:

   • status-messages.html.twig: Uses basic alert wrapper (classic inline positioning)
   • status-messages--alerts.html.twig: Uses position-fixed bottom-0 classes for bottom positioning
   • status-messages--toasts.html.twig: Uses position-fixed top-0 end-0 classes for toast positioning

3. CSS Cleanup (components/alert/alert.css):

   • Removed margin-bottom: 0 override that was breaking Bootstrap's built-in spacing
   • Simplified to use Bootstrap's native --bs-alert-margin-bottom: 1rem

Issue #3496694: Discrepancies between alert.twig and messages.js

Problem

JavaScript and server-rendered messages had completely different structures, inconsistent styling, and poor multiple message handling.

Solution

Unified Message Architecture:

1. Smart JavaScript Detection (js/messages.js):

   • Automatically detects toast vs alert containers
   • Creates Bootstrap-compliant alerts OR toasts based on context
   • Identical structure to server-rendered messages
   • Proper icon integration and dismissible functionality

2. Individual Message Pattern:

   • Each message gets its own alert/toast container
   • Individual close buttons for each message
   • Proper Bootstrap classes and structure
   • Consistent icon usage across all message types

3. Toast Support (components/toasts/toasts.twig):

   • Complete toast component matching alert pattern
   • Individual toasts for each message
   • Proper autohide behavior (status/info auto-hide, warnings/errors persist)
   • Icons in toast headers with Bootstrap structure

Additional Improvements

Enhanced Table Drag Integration (js/tabledrag.js)

• Completely rebuilt to support both alert and toast modes
• Smart detection of message container type
• Consistent warning structure with icons and close buttons
• Fixed corruption issues in original file

Accessibility Enhancements

• Proper ARIA labels and roles throughout
• SVG icons with descriptive labels
• Visually hidden headings for screen readers
• Consistent accessibility patterns across all message types

Bootstrap 5 Compliance

• Pure Bootstrap utility classes for positioning
• Native Bootstrap alert and toast patterns
• Proper flex layouts and spacing
• Standard Bootstrap dismissible behavior

Technical Architecture

Template Structure

status-messages.html.twig (classic) └── alert component with basic wrapper

status-messages--alerts.html.twig (bottom) └── alert component with position-fixed bottom-0

status-messages--toasts.html.twig (toasts) └── toast component with position-fixed top-0

Message Types

• Alerts: Individual Bootstrap alerts with icons and close buttons
• Toasts: Individual Bootstrap toasts with proper timing and autohide
• JavaScript: Smart detection creates appropriate message type

Icon System

• Success: Check circle icon
• Warning/Error: Exclamation triangle icon
• Info: Info circle icon
• Consistent across alerts, toasts, and JavaScript messages

Testing

1. Alert Classic: Messages appear inline with page content
2. Alert Bottom: Messages appear fixed at bottom with proper spacing
3. Toasts: Messages appear fixed at top-right with proper timing
4. JavaScript Messages: Match server-rendered structure perfectly
5. Multiple Messages: Each message is individually dismissible
6. Table Drag: Warnings work in both alert and toast modes
7. Accessibility: Screen readers properly announce all messages

Compatibility

• Drupal ^11.2.0: Leverages modern component-based theming
• Bootstrap 5: Uses native patterns and utility classes
• JavaScript: Modern ES6+ patterns with proper Drupal behaviors