Accessiyes widget above chatbox

Hi @sarbel,

Thanks for reaching out, and good instinct with the z-index!

The reason your CSS has no effect is that the widget’s button is rendered inside a Shadow DOM. Styles added through your theme, the Customizer, or “Additional CSS” can’t cross into a shadow tree, so a rule like .cya11y-menu-btn { z-index: 99; } never reaches the actual button. That’s why nothing changes.

To lower the icon, you’ll need a small script that injects the style into the widget’s shadow root. The snippet below does exactly that, lowering only the floating icon while ensuring the accessibility menu still opens above everything else (including your chat box) when clicked.

You can add it via your theme’s functions.php file or using a plugin such as WPCode or Code Snippets:

add_action( 'wp_footer', function () { ?>
  <script>
  (function () {
    var ICON_Z = 9990; // must be lower than your chat widget's z-index (usually 100000+)
    function apply() {
      var host = document.getElementById('cya11y-container');
      if (!host || !host.shadowRoot) return false;

      // keep the host from capping the whole widget, so the open menu stays on top
      host.style.setProperty('position', 'static', 'important');
      host.style.setProperty('z-index', 'auto', 'important');

      // lower ONLY the floating icon/button (inside the shadow DOM)
      var ID = 'cya11y-icon-zfix';
      var s = host.shadowRoot.getElementById(ID);

      if (!s) {
        s = document.createElement('style');
        s.id = ID;
        host.shadowRoot.appendChild(s);
      }

      s.textContent = '.cya11y-widget-icon,.cya11y-menu-btn{z-index:' + ICON_Z + ' !important;}';
      return true;
    }

    if (!apply()) {
      var obs = new MutationObserver(function () {
        if (apply()) obs.disconnect();
      });

      obs.observe(document.documentElement, {
        childList: true,
        subtree: true
      });

      setTimeout(function () {
        obs.disconnect();
      }, 15000);
    }
  })();
  </script>
  <?php }, 100 );

A few notes:

• You can remove the .cya11y-menu-btn { z-index: 99; } CSS you added, as it isn’t affecting the actual button (due to the Shadow DOM limitation explained above).
• The value 9990 only needs to be lower than your chat widget’s z-index (most chat widgets use 100000 or higher) while remaining above your normal page content. If the chat box still appears behind the icon, simply lower the value further.
• This approach keeps the accessibility menu fully usable and displayed above the page content. Only the small floating launcher icon is moved behind the chat widget.

If the chat box still appears behind the icon after applying the snippet, let us know which chat plugin you’re using (and your site URL), and we’ll be happy to help fine-tune the z-index value.