/**
 * Make Twenty20 before/after sliders keyboard and screen-reader accessible.
 * Adds role="slider", tabindex, aria labels, arrow-key control and a focus ring.
 */
function csv_twenty20_accessibility() {
    if ( is_admin() ) {
        return;
    }

    // Focus ring.
    echo '<style id="csv-twenty20-a11y-css">
    .twentytwenty-handle:focus-visible {
        outline: 3px solid #005fcc;
        outline-offset: 3px;
        box-shadow: 0 0 0 6px #fff;
    }
    </style>';

    // Slider behaviour. Nowdoc so PHP doesn't try to parse the JavaScript.
    $js = <<<'JS'
(function () {
  function titleFor(container, index) {
    var row = container.closest('.su-row');
    var prev = row && row.previousElementSibling;
    return (prev && prev.classList.contains('sub-title'))
      ? prev.textContent.trim() : 'Smile comparison ' + index;
  }

  function init(container, label) {
    if (container.dataset.a11yReady) return;
    var handle = container.querySelector('.twentytwenty-handle');
    var before = container.querySelector('img.twentytwenty-before');
    var after = container.querySelector('img.twentytwenty-after');
    if (!handle || !before || !after) return;
    container.dataset.a11yReady = '1';

    handle.setAttribute('tabindex', '0');
    handle.setAttribute('role', 'slider');
    handle.setAttribute('aria-label', 'Before and after: ' + label);
    handle.setAttribute('aria-orientation', 'horizontal');
    handle.setAttribute('aria-valuemin', '0');
    handle.setAttribute('aria-valuemax', '100');

    before.alt = 'Before: ' + label;
    after.alt = 'After: ' + label;

    function currentPct() {
      var w = container.offsetWidth;
      var left = parseFloat(handle.style.left);
      if (!w || isNaN(left)) return 50;
      return Math.max(0, Math.min(100, Math.round(left / w * 100)));
    }

    function announce(pct) {
      handle.setAttribute('aria-valuenow', pct);
      handle.setAttribute('aria-valuetext', pct + '% before, ' + (100 - pct) + '% after');
    }

    var keyboardPct = null;

    function setPct(pct) {
      pct = Math.max(0, Math.min(100, pct));
      keyboardPct = pct;
      var w = container.offsetWidth, h = container.offsetHeight;
      var x = w * pct / 100;
      handle.style.left = x + 'px';
      before.style.clip = 'rect(0px,' + x + 'px,' + h + 'px,0px)';
      after.style.clip = 'rect(0px,' + w + 'px,' + h + 'px,' + x + 'px)';
      announce(pct);
    }

    handle.addEventListener('keydown', function (e) {
      var pct = currentPct(), step = e.shiftKey ? 10 : 5, next = null;
      switch (e.key) {
        case 'ArrowLeft': case 'ArrowDown': next = pct - step; break;
        case 'ArrowRight': case 'ArrowUp': next = pct + step; break;
        case 'PageDown': next = pct - 10; break;
        case 'PageUp': next = pct + 10; break;
        case 'Home': next = 0; break;
        case 'End': next = 100; break;
      }
      if (next !== null) { e.preventDefault(); setPct(next); }
    });

    // Keep aria values in sync when mouse/touch drag moves the handle.
    new MutationObserver(function () { announce(currentPct()); })
      .observe(handle, { attributes: true, attributeFilter: ['style'] });

    // Plugin resets on resize; restore the keyboard position.
    window.addEventListener('resize', function () {
      setTimeout(function () { if (keyboardPct !== null) setPct(keyboardPct); }, 150);
    });

    announce(currentPct());
  }

  function scan() {
    var containers = document.querySelectorAll('.twentytwenty-container');
    if (!containers.length) return;

    var titles = [], totals = {}, seen = {};
    containers.forEach(function (c, i) {
      var t = titleFor(c, i + 1);
      titles.push(t);
      totals[t] = (totals[t] || 0) + 1;
    });

    containers.forEach(function (c, i) {
      var t = titles[i];
      seen[t] = (seen[t] || 0) + 1;
      var label = totals[t] > 1 ? t + ' (' + seen[t] + ' of ' + totals[t] + ')' : t;
      init(c, label);
    });
  }

  window.addEventListener('load', function () {
    scan();
    setTimeout(scan, 1000);
  });
})();
JS;

    echo '<script id="csv-twenty20-a11y-js">' . $js . '</script>';
}
add_action( 'wp_footer', 'csv_twenty20_accessibility', 99 );<?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet type="text/xsl" href="//cookstreetvillagedental.com/wp-content/plugins/wordpress-seo/css/main-sitemap.xsl"?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
	<sitemap>
		<loc>https://cookstreetvillagedental.com/page-sitemap.xml</loc>
		<lastmod>2026-10-16T13:39:47+00:00</lastmod>
	</sitemap>
</sitemapindex>
<!-- XML Sitemap generated by Yoast SEO -->