/* ================================================
   DEVEXPRESS ACCESSIBILITY FIXES
   ================================================ */

/*
 * Fix for DevExpress components that add aria-hidden="true" on focusable elements
 * This violates WCAG 2.1 accessibility guidelines
 * 
 * Console error: "Blocked aria-hidden on an element because its descendant retained focus"
 * Reference: https://w3c.github.io/aria/#aria-hidden
 */

/* Remove aria-hidden from focusable DevExpress buttons */
.dxbl-btn[aria-hidden="true"]:focus,
.dxbl-btn[aria-hidden="true"]:focus-visible,
.dxbl-btn[aria-hidden="true"][tabindex]:not([tabindex="-1"]),
.dxbl-btn[aria-hidden="true"]:not([disabled]):not([aria-disabled="true"]) {
    /* Override aria-hidden with CSS when element can receive focus */
    speak: auto;
}

/* Ensure focusable DevExpress components are accessible to screen readers */
.dxbl-btn[aria-hidden="true"]:focus,
.dxbl-btn[aria-hidden="true"]:focus-within {
    /* Force visibility to assistive technology when focused */
    clip: unset !important;
    clip-path: unset !important;
    height: auto !important;
    width: auto !important;
    overflow: visible !important;
    position: static !important;
}

/* Fix for DevExpress grid components */
.dx-datagrid [aria-hidden="true"]:focus,
.dx-treelist [aria-hidden="true"]:focus,
.dxbl-grid [aria-hidden="true"]:focus {
    speak: auto;
}

/* Fix for DevExpress toolbar buttons */
.dxbl-toolbar-item[aria-hidden="true"]:focus,
.dxbl-toolbar-item[aria-hidden="true"] button:focus {
    speak: auto;
}

/* Fix for DevExpress popup and modal components */
.dx-popup [aria-hidden="true"]:focus,
.dx-overlay [aria-hidden="true"]:focus,
.dxbl-popup [aria-hidden="true"]:focus {
    speak: auto;
}

/* Fix for DevExpress form components */
.dx-texteditor [aria-hidden="true"]:focus,
.dx-checkbox [aria-hidden="true"]:focus,
.dx-selectbox [aria-hidden="true"]:focus,
.dxbl-editor [aria-hidden="true"]:focus {
    speak: auto;
}

/* Additional fixes for button tools specifically mentioned in console error */
.dxbl-btn-tool[aria-hidden="true"]:focus,
.dxbl-btn-tool[aria-hidden="true"]:focus-visible {
    speak: auto;
}

/* ================================================
   IMPROVED FOCUS INDICATORS
   ================================================ */

/* Enhanced focus indicators for better accessibility */
.dxbl-btn:focus,
.dxbl-btn:focus-visible {
    outline: 2px solid #0078d4 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(0, 120, 212, 0.2) !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .dxbl-btn:focus,
    .dxbl-btn:focus-visible {
        outline: 3px solid currentColor !important;
        outline-offset: 2px !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .dxbl-btn,
    .dx-datagrid,
    .dxbl-grid {
        transition: none !important;
        animation: none !important;
    }
}

/* ================================================
   SCREEN READER IMPROVEMENTS
   ================================================ */

/* Ensure buttons have proper labels for screen readers */
.dxbl-btn[aria-hidden="true"]:not([aria-label]):not([title]) {
    /* If a button has aria-hidden but no label, try to make it more accessible */
    position: relative;
}

.dxbl-btn[aria-hidden="true"]:not([aria-label]):not([title])::after {
    content: "Button";
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Fix for empty buttons that might not be accessible */
.dxbl-btn:empty:not([aria-label]):not([title]) {
    /* Ensure empty buttons have some indication of their purpose */
    min-width: 32px;
    min-height: 32px;
}

/* ================================================
   KEYBOARD NAVIGATION FIXES
   ================================================ */

/* Ensure hidden elements don't interfere with keyboard navigation */
[aria-hidden="true"][tabindex="0"],
[aria-hidden="true"]:focus {
    /* Elements with aria-hidden should not be focusable */
    /* This CSS attempts to work around the DevExpress issue */
    position: relative !important;
    clip: unset !important;
    width: auto !important;
    height: auto !important;
}

/* Skip links for better navigation */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: #000;
    color: #fff;
    padding: 8px;
    text-decoration: none;
    border-radius: 4px;
    z-index: 10000;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 6px;
}

/* ================================================
   DEVEXPRESS SPECIFIC COMPONENT FIXES
   ================================================ */

/* Grid accessibility improvements */
.dxbl-grid [role="grid"] {
    /* Ensure grid has proper ARIA roles */
    outline: none;
}

.dxbl-grid [role="gridcell"]:focus {
    outline: 2px solid #0078d4;
    outline-offset: -2px;
}

/* Loading panel accessibility */
.dx-loadpanel-content {
    /* Ensure loading panels are announced to screen readers */
    role: "status";
    aria-live: "polite";
}

/* Popup accessibility */
.dx-popup-wrapper {
    /* Ensure popups trap focus properly */
    isolation: isolate;
}

/* Form editor improvements */
.dxbl-editor:focus-within {
    outline: 2px solid #0078d4;
    outline-offset: 1px;
}

/* ================================================
   JAVASCRIPT ACCESSIBILITY HOOKS
   ================================================ */

/*
 * These styles provide hooks for JavaScript accessibility fixes
 * that might be needed to fully resolve DevExpress issues
 */

/* Mark elements that need JavaScript accessibility fixes */
.dxbl-btn[aria-hidden="true"]:focus {
    /* This style helps identify problematic elements for JS fixes */
    --needs-aria-fix: true;
}

/* ================================================
   NOTES FOR DEVELOPERS
   ================================================ */

/*
 * IMPORTANT NOTES:
 * 
 * 1. This CSS file addresses the DevExpress accessibility issues reported in console:
 *    "Blocked aria-hidden on an element because its descendant retained focus"
 * 
 * 2. The root cause is DevExpress components adding aria-hidden="true" to elements
 *    that can still receive focus, which violates WCAG guidelines.
 * 
 * 3. These CSS fixes attempt to work around the issue, but the ideal solution
 *    would be for DevExpress to fix their component library.
 * 
 * 4. For a complete fix, consider:
 *    - Upgrading DevExpress to latest version (may have fixes)
 *    - Using custom JavaScript to remove problematic aria-hidden attributes
 *    - Implementing custom focus management
 * 
 * 5. Test with screen readers (NVDA, JAWS, VoiceOver) after applying fixes.
 * 
 * 6. Consider using the 'inert' attribute instead of aria-hidden for truly
 *    hidden elements in modern browsers.
 */