Expandable Card: expanding cards in HTML, CSS & JS

With your AI

Just ask.

Say it to your AI. It gets the exact code below, not its best guess, and knows where it goes.

Show my services as a row of Kodza Expandable Cards.

Not plugged in yet?

claude mcp add -t http kodza https://kodza.dev/api/mcp

Also in Codex, Cursor and VS Code.

kodza-expandable-card.html

<div class="kodza-expand">
  <article class="kodza-expand__card is-open">
    <h3 class="kodza-expand__heading">
      <button class="kodza-expand__toggle" type="button" aria-expanded="true">
        <span class="kodza-expand__index">01</span>
        <span class="kodza-expand__title">Install</span>
      </button>
    </h3>
    <div class="kodza-expand__panel">
      <p>One file, no npm, no build step. Copy it, paste it, refresh. That's the whole tutorial.</p>
    </div>
  </article>
  <article class="kodza-expand__card">
    <h3 class="kodza-expand__heading">
      <button class="kodza-expand__toggle" type="button" aria-expanded="false">
        <span class="kodza-expand__index">02</span>
        <span class="kodza-expand__title">Tweak</span>
      </button>
    </h3>
    <div class="kodza-expand__panel">
      <p>Every color, size and timing is a CSS variable. Rebrand it in thirty seconds, no fork needed.</p>
    </div>
  </article>
  <article class="kodza-expand__card">
    <h3 class="kodza-expand__heading">
      <button class="kodza-expand__toggle" type="button" aria-expanded="false">
        <span class="kodza-expand__index">03</span>
        <span class="kodza-expand__title">Ship</span>
      </button>
    </h3>
    <div class="kodza-expand__panel">
      <p>It works in WordPress, Webflow or a plain HTML page. Then go home early.</p>
    </div>
  </article>
</div>

kodza-expandable-card.css

/* Kodza License: free to use, client work included. Not to resell or redistribute, ported or not: https://kodza.dev/docs/#print-license */
/* Kodza — Expandable Card
   A row of cards where one is always open: click another and it widens while the others
   step back, then its text rises line by line. Stacked on small screens.
   The open card is inverted (ink on light pages, white on dark ones).
   Everything is tuned with the --kz-expand-* variables. */
.kodza-expand {
  --kz-expand-bg: #ffffff;
  --kz-expand-fg: #0a0a0a;
  --kz-expand-muted: rgba(10, 10, 10, 0.62);
  --kz-expand-border: rgba(10, 10, 10, 0.1);
  --kz-expand-open-bg: #0a0a0a;
  --kz-expand-open-fg: #ffffff;
  --kz-expand-open-muted: rgba(255, 255, 255, 0.68);
  --kz-expand-height: 300px;
  --kz-expand-grow: 2.6;
  --kz-expand-radius: 16px;
  --kz-expand-pad: 28px;
  --kz-expand-duration: 0.75s;
  --kz-expand-ease: cubic-bezier(0.76, 0, 0.24, 1);
  --kz-expand-text-ease: cubic-bezier(0.16, 1, 0.3, 1);

  display: flex;
  gap: 12px;
  height: var(--kz-expand-height);
}

.kodza-expand__card {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  overflow: hidden;
  padding: var(--kz-expand-pad);
  border-radius: var(--kz-expand-radius);
  background: var(--kz-expand-bg);
  box-shadow: inset 0 0 0 1px var(--kz-expand-border);
  color: var(--kz-expand-fg);
  isolation: isolate;
  /* The text changes color as the ink passes it: early when it drains, late when it rises */
  transition:
    flex-grow var(--kz-expand-duration) var(--kz-expand-ease),
    color 0.15s ease calc(var(--kz-expand-duration) * 0.25);
}

.kodza-expand__card.is-open {
  flex-grow: var(--kz-expand-grow);
  color: var(--kz-expand-open-fg);
  transition:
    flex-grow var(--kz-expand-duration) var(--kz-expand-ease),
    color 0.15s ease calc(var(--kz-expand-duration) * 0.55);
}

/* The open card fills with ink from the bottom, rather than fading through grey */
.kodza-expand__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--kz-expand-open-bg);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform var(--kz-expand-duration) var(--kz-expand-ease);
}

.kodza-expand__card.is-open::before {
  transform: none;
}

.kodza-expand__heading {
  margin: 0;
  font: inherit;
}

/* The button covers the whole card: click anywhere on it */
.kodza-expand__toggle {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.kodza-expand__toggle::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.kodza-expand__toggle:focus-visible {
  outline: none;
}

.kodza-expand__card:has(.kodza-expand__toggle:focus-visible) {
  outline: 2px solid var(--kz-expand-fg);
  outline-offset: 3px;
}

.kodza-expand__index {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  color: var(--kz-expand-muted);
  transition: color 0.15s ease calc(var(--kz-expand-duration) * 0.25);
}

.kodza-expand__card.is-open .kodza-expand__index {
  color: var(--kz-expand-open-muted);
  transition-delay: calc(var(--kz-expand-duration) * 0.55);
}

.kodza-expand__title {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* The text is set at the width it will have once the card is open (--kz-expand-text, measured
   by the script), so it never reflows while the card widens. It leaves at once when a card closes. */
.kodza-expand__panel {
  width: var(--kz-expand-text, auto);
  max-width: 360px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s ease, visibility 0s linear 0.3s;
}

.kodza-expand__card.is-open .kodza-expand__panel {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.4s ease calc(var(--kz-expand-duration) * 0.5), visibility 0s;
}

/* With the script, the text rises line by line from behind a mask instead */
.kodza-expand.is-ready .kodza-expand__card.is-open .kodza-expand__panel {
  transition: visibility 0s;
}

.kodza-expand__line {
  display: block;
  overflow: hidden;
}

.kodza-expand__line > span {
  display: block;
  transform: translateY(110%);
  transition: transform 0.25s ease-in;
}

.kodza-expand__card.is-open .kodza-expand__line > span {
  transform: none;
  transition: transform 0.8s var(--kz-expand-text-ease) calc(var(--kz-expand-duration) * 0.45 + var(--kz-line, 0) * 90ms);
}

.kodza-expand__panel p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--kz-expand-open-muted);
}

@media (max-width: 640px) {
  .kodza-expand {
    flex-direction: column;
    height: auto;
  }

  .kodza-expand__card {
    display: grid;
    flex: none;
    grid-template-rows: auto 0fr;
    gap: 0;
    transition:
      grid-template-rows var(--kz-expand-duration) var(--kz-expand-ease),
      color 0.15s ease calc(var(--kz-expand-duration) * 0.25);
  }

  .kodza-expand__card.is-open {
    grid-template-rows: auto 1fr;
    transition:
      grid-template-rows var(--kz-expand-duration) var(--kz-expand-ease),
      color 0.15s ease calc(var(--kz-expand-duration) * 0.55);
  }

  .kodza-expand__panel {
    max-width: none;
    overflow: hidden;
  }

  .kodza-expand__panel p {
    padding-top: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kodza-expand__card,
  .kodza-expand__card::before,
  .kodza-expand__index,
  .kodza-expand__panel,
  .kodza-expand__line > span {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* Theming example — on a dark background:
.dark-section .kodza-expand {
  --kz-expand-bg: #161616;
  --kz-expand-fg: #f2f2f0;
  --kz-expand-muted: rgba(242, 242, 240, 0.62);
  --kz-expand-border: rgba(255, 255, 255, 0.12);
  --kz-expand-open-bg: #ffffff;
  --kz-expand-open-fg: #0a0a0a;
  --kz-expand-open-muted: rgba(10, 10, 10, 0.68);
}
*/

/* kodza-guard adb5172deda8 — generated by Kodza, do not edit.
   Theme guard: keeps a site's own CSS (WordPress themes, Bootstrap, CSS resets…) off this
   component. :not(#_) is always true and weighs as much as an id, so these lines win over
   theme rules made of classes and tags. Customise the component through its --kz-* variables. */

/* What the browser gives, where the component sets it only in some states: at the lowest weight, so its own rules below put it back */

:where(.kodza-expand__card):not(#_) {
  outline: revert;
  outline-offset: revert;
}

:where(.kodza-expand__toggle):not(#_) {
  outline: revert;
}

:where(.kodza-expand__panel p:where(:not([class*="kodza-"]):not(.kodza-expand__panel [class*="kodza-"] *))):not(#_) {
  padding-top: revert;
}

/* What the browser gives, on everything the component leaves to it */

.kodza-expand:not(#_),
.kodza-expand__index:not(#_),
.kodza-expand__title:not(#_),
.kodza-expand__panel:not(#_),
.kodza-expand__line:not(#_),
.kodza-expand__line span:where(:not([class*="kodza-"])):not(#_) {
  box-sizing: revert;
}

.kodza-expand__card:not(#_) {
  border: revert;
  margin: revert;
  text-decoration: revert;
  list-style: revert;
  box-sizing: revert;
  float: revert;
  appearance: revert;
  max-width: revert;
  max-height: revert;
  font-family: revert;
  font-size: revert;
  font-weight: revert;
  font-style: revert;
  line-height: revert;
  letter-spacing: revert;
  text-transform: revert;
  text-underline-offset: revert;
  text-align: revert;
  text-indent: revert;
  text-shadow: revert;
  vertical-align: revert;
}

.kodza-expand__heading:not(#_) {
  border: revert;
  padding: revert;
  border-radius: revert;
  outline: revert;
  text-decoration: revert;
  transition: revert;
  list-style: revert;
  box-sizing: revert;
  float: revert;
  position: revert;
  background-color: revert;
  background-image: revert;
  box-shadow: revert;
  outline-offset: revert;
  appearance: revert;
  max-width: revert;
  max-height: revert;
  color: revert;
  letter-spacing: revert;
  text-transform: revert;
  text-underline-offset: revert;
  text-align: revert;
  text-indent: revert;
  text-shadow: revert;
  vertical-align: revert;
}

.kodza-expand__toggle:not(#_) {
  margin: revert;
  border-radius: revert;
  text-decoration: revert;
  transition: revert;
  list-style: revert;
  box-sizing: revert;
  float: revert;
  position: revert;
  box-shadow: revert;
  outline-offset: revert;
  appearance: revert;
  max-width: revert;
  max-height: revert;
  letter-spacing: revert;
  text-transform: revert;
  text-underline-offset: revert;
  text-indent: revert;
  text-shadow: revert;
  vertical-align: revert;
  white-space: revert;
  min-height: revert;
}

.kodza-expand__panel p:where(:not([class*="kodza-"]):not(.kodza-expand__panel [class*="kodza-"] *)):not(#_) {
  border: revert;
  border-radius: revert;
  outline: revert;
  text-decoration: revert;
  transition: revert;
  list-style: revert;
  box-sizing: revert;
  float: revert;
  position: revert;
  padding-right: revert;
  padding-bottom: revert;
  padding-left: revert;
  background-color: revert;
  background-image: revert;
  box-shadow: revert;
  outline-offset: revert;
  appearance: revert;
  max-width: revert;
  max-height: revert;
  font-family: revert;
  font-weight: revert;
  font-style: revert;
  letter-spacing: revert;
  text-transform: revert;
  text-underline-offset: revert;
  text-align: revert;
  text-indent: revert;
  text-shadow: revert;
  vertical-align: revert;
}

.kodza-expand__heading:not(#_):where(:not([hidden])),
.kodza-expand__panel p:where(:not([class*="kodza-"]):not(.kodza-expand__panel [class*="kodza-"] *)):not(#_):where(:not([hidden])) {
  display: revert;
}

.kodza-expand__heading:not(#_):where([hidden]),
.kodza-expand__panel p:where(:not([class*="kodza-"]):not(.kodza-expand__panel [class*="kodza-"] *)):not(#_):where([hidden]) {
  display: none;
}

.kodza-expand__card:not(#_)::before,
.kodza-expand__toggle:not(#_)::after {
  box-sizing: revert;
}

/* The component's own rules, one step stronger: real buttons and fields, what it sets on tags themes style (links, lists, headings, images…), and the root width (a theme may narrow it, never widen it) */

.kodza-expand__card:not(#_) {
  position: relative;
  display: flex;
  padding: var(--kz-expand-pad);
  border-radius: var(--kz-expand-radius);
  background: var(--kz-expand-bg);
  box-shadow: inset 0 0 0 1px var(--kz-expand-border);
  color: var(--kz-expand-fg);
  transition: flex-grow var(--kz-expand-duration) var(--kz-expand-ease),
    color 0.15s ease calc(var(--kz-expand-duration) * 0.25);
}

.kodza-expand__card.is-open:not(#_) {
  color: var(--kz-expand-open-fg);
  transition: flex-grow var(--kz-expand-duration) var(--kz-expand-ease),
    color 0.15s ease calc(var(--kz-expand-duration) * 0.55);
}

.kodza-expand__heading:not(#_) {
  margin: 0;
  font: inherit;
}

.kodza-expand__toggle:not(#_) {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.kodza-expand__toggle:not(#_)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.kodza-expand__toggle:focus-visible:not(#_) {
  outline: none;
}

.kodza-expand__card:has(.kodza-expand__toggle:focus-visible):not(#_) {
  outline: 2px solid var(--kz-expand-fg);
  outline-offset: 3px;
}

.kodza-expand__panel p:not(#_) {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--kz-expand-open-muted);
}

@media (max-width: 640px) {
  .kodza-expand__card:not(#_) {
    display: grid;
    transition: grid-template-rows var(--kz-expand-duration) var(--kz-expand-ease),
        color 0.15s ease calc(var(--kz-expand-duration) * 0.25);
  }
}

@media (max-width: 640px) {
  .kodza-expand__card.is-open:not(#_) {
    transition: grid-template-rows var(--kz-expand-duration) var(--kz-expand-ease),
        color 0.15s ease calc(var(--kz-expand-duration) * 0.55);
  }
}

@media (max-width: 640px) {
  .kodza-expand__panel p:not(#_) {
    padding-top: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kodza-expand__card:not(#_) {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

kodza-expandable-card.js

// Kodza License: free to use, client work included. Not to resell or redistribute, ported or not: https://kodza.dev/docs/#print-license
// Kodza — Expandable Card
// Keeps exactly one card open per group, and tells screen readers which one it is.
// Each text is cut into lines at the width it will have once its card is open,
// so it can rise line by line and never reflows while the card widens.
(() => {
  const SELECTOR = '.kodza-expand';
  // One instance. Everything it starts is tied to `signal`, so kodza:destroy stops it all
  function mount(root, signal) {
    const cards = [...root.querySelectorAll('.kodza-expand__card')];
    if (!cards.length) return;

    // Plain text only: a paragraph with links or markup keeps its fade
    const texts = new Map();
    root.querySelectorAll('.kodza-expand__panel p').forEach((p) => {
      if (!p.children.length) texts.set(p, p.textContent.trim().split(/\s+/));
    });

    const split = (p, words) => {
      p.textContent = '';
      const spans = words.map((word) => {
        const span = document.createElement('span');
        span.textContent = `${word} `;
        p.append(span);
        return span;
      });
      const lines = [];
      spans.forEach((span) => {
        const last = lines[lines.length - 1];
        if (last && last.top === span.offsetTop) last.words.push(span.textContent);
        else lines.push({ top: span.offsetTop, words: [span.textContent] });
      });
      p.textContent = '';
      lines.forEach((line, i) => {
        const outer = document.createElement('span');
        const inner = document.createElement('span');
        outer.className = 'kodza-expand__line';
        inner.textContent = line.words.join('').trim();
        inner.style.setProperty('--kz-line', i);
        outer.append(inner);
        p.append(outer, ' ');
      });
    };

    // The width of an open card's text: what is left once the closed cards took their share
    let measured = -1;
    const layout = () => {
      const style = getComputedStyle(root);
      const card = getComputedStyle(cards[0]);
      let width = root.clientWidth;
      if (style.flexDirection !== 'column') {
        const grow = parseFloat(style.getPropertyValue('--kz-expand-grow')) || 2.6;
        width = ((width - (parseFloat(style.columnGap) || 0) * (cards.length - 1)) * grow) / (grow + cards.length - 1);
      }
      width = Math.max(0, Math.floor(width - parseFloat(card.paddingLeft) - parseFloat(card.paddingRight)));
      if (width === measured) return;
      measured = width;
      root.style.setProperty('--kz-expand-text', `${width}px`);
      texts.forEach((words, p) => split(p, words));
    };

    const open = (card) => {
      cards.forEach((other) => {
        const isOpen = other === card;
        other.classList.toggle('is-open', isOpen);
        other.querySelector('.kodza-expand__toggle')?.setAttribute('aria-expanded', String(isOpen));
      });
    };

    cards.forEach((card) => card.querySelector('.kodza-expand__toggle')?.addEventListener('click', () => open(card), { signal }));
    open(cards.find((card) => card.classList.contains('is-open')) || cards[0]);
    layout();
    const observer = new ResizeObserver(layout);
    observer.observe(root);
    signal.addEventListener('abort', () => observer.disconnect());
    document.fonts?.ready.then(() => {
      if (signal.aborted) return;
      measured = -1;
      layout();
    });
  }

  // Kodza lifecycle, the same in every component: `kodza:init` starts the instances inside
  // event.detail.root (the whole page by default), `kodza:destroy` stops them and puts their
  // markup back. For themes and apps that swap content without a page load.
  const instances = new WeakMap();
  const find = (scope = document) => [scope, ...scope.querySelectorAll(SELECTOR)].filter((el) => el.matches?.(SELECTOR));
  const init = (scope) => find(scope).forEach((root) => {
    if (root.classList.contains('is-ready')) return; // already running, maybe from another copy of this script
    const controller = new AbortController();
    instances.set(root, { controller, html: root.innerHTML, attrs: [...root.attributes].map((a) => [a.name, a.value]) });
    mount(root, controller.signal);
    root.classList.add('is-ready');
  });
  const destroy = (scope) => find(scope).forEach((root) => {
    const instance = instances.get(root);
    if (!instance) return;
    instances.delete(root);
    instance.controller.abort();
    [...root.attributes].forEach((a) => root.removeAttribute(a.name));
    instance.attrs.forEach(([name, value]) => root.setAttribute(name, value));
    root.innerHTML = instance.html;
  });
  document.addEventListener('kodza:init', (event) => init(event.detail?.root));
  document.addEventListener('kodza:destroy', (event) => destroy(event.detail?.root));
  init();
  // Loaded in <head>, the script runs before the markup exists: once more when it is parsed
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => init(), { once: true });
})();

ExpandableCard.tsx

'use client';
// Kodza — Expandable Card, for React. From https://kodza.dev/components/expandable-card/
// Kodza License: free to use, client work included. Not to resell or redistribute, ported or not: https://kodza.dev/docs/#print-license
// Next to this file: expandable-card.css and expandable-card.js, the component's CSS and JS from Kodza, as they are.
// Yours to edit: the markup is plain JSX below.
// The script changes this markup once React has rendered it (it adds layers, splits text, moves
// nodes), so React must not patch it afterwards. When a prop changes, the key gives React a fresh
// element: kodza:destroy stops the script on the old one, kodza:init starts it on the new one.
import { useRef, useEffect, type ComponentPropsWithoutRef, type ComponentRef, type CSSProperties } from 'react';
import './expandable-card.css';

export type ExpandableCardProps = Omit<ComponentPropsWithoutRef<'div'>, "children" | "vars"> & {
  /** Settings, as CSS variables on the root */
  vars?: {
    /** default: #ffffff */
    "--kz-expand-bg"?: string | number;
    /** default: #0a0a0a */
    "--kz-expand-fg"?: string | number;
    /** default: rgba(10, 10, 10, 0.62) */
    "--kz-expand-muted"?: string | number;
    /** default: rgba(10, 10, 10, 0.1) */
    "--kz-expand-border"?: string | number;
    /** default: #0a0a0a */
    "--kz-expand-open-bg"?: string | number;
    /** default: #ffffff */
    "--kz-expand-open-fg"?: string | number;
    /** default: rgba(255, 255, 255, 0.68) */
    "--kz-expand-open-muted"?: string | number;
    /** default: 300px */
    "--kz-expand-height"?: string | number;
    /** default: 2.6 */
    "--kz-expand-grow"?: string | number;
    /** default: 16px */
    "--kz-expand-radius"?: string | number;
    /** default: 28px */
    "--kz-expand-pad"?: string | number;
    /** default: 0.75s */
    "--kz-expand-duration"?: string | number;
    /** default: cubic-bezier(0.76, 0, 0.24, 1) */
    "--kz-expand-ease"?: string | number;
    /** default: cubic-bezier(0.16, 1, 0.3, 1) */
    "--kz-expand-text-ease"?: string | number;
  };
  className?: string;
};

export function ExpandableCard({ vars, className, style, ...rest }: ExpandableCardProps) {
  const ref = useRef<ComponentRef<'div'>>(null);
  const classes = ["kodza-expand", className].filter(Boolean).join(' ');
  // Everything the markup is made of: when it changes, React gets a fresh element (see the top)
  const key = JSON.stringify([classes, vars, style, rest]);

  // Starts the script on this element once React has rendered it, stops it when it goes
  useEffect(() => {
    const root = ref.current;
    let live = true;
    // @ts-ignore: a plain script, no types to find
    import('./expandable-card.js').then(() => {
      if (live) document.dispatchEvent(new CustomEvent('kodza:init', { detail: { root } }));
    });
    return () => {
      live = false;
      document.dispatchEvent(new CustomEvent('kodza:destroy', { detail: { root } }));
    };
  }, [key]);

  return (
    <div key={key} {...rest} className={classes} style={{ ...vars, ...style } as CSSProperties} ref={ref}>
      <article className="kodza-expand__card is-open">
        <h3 className="kodza-expand__heading">
          <button className="kodza-expand__toggle" type="button" aria-expanded="true">
            <span className="kodza-expand__index">01</span>
            {' '}
            <span className="kodza-expand__title">Install</span>
          </button>
        </h3>
        <div className="kodza-expand__panel">
          <p>One file, no npm, no build step. Copy it, paste it, refresh. That's the whole tutorial.</p>
        </div>
      </article>
      <article className="kodza-expand__card">
        <h3 className="kodza-expand__heading">
          <button className="kodza-expand__toggle" type="button" aria-expanded="false">
            <span className="kodza-expand__index">02</span>
            {' '}
            <span className="kodza-expand__title">Tweak</span>
          </button>
        </h3>
        <div className="kodza-expand__panel">
          <p>Every color, size and timing is a CSS variable. Rebrand it in thirty seconds, no fork needed.</p>
        </div>
      </article>
      <article className="kodza-expand__card">
        <h3 className="kodza-expand__heading">
          <button className="kodza-expand__toggle" type="button" aria-expanded="false">
            <span className="kodza-expand__index">03</span>
            {' '}
            <span className="kodza-expand__title">Ship</span>
          </button>
        </h3>
        <div className="kodza-expand__panel">
          <p>It works in WordPress, Webflow or a plain HTML page. Then go home early.</p>
        </div>
      </article>
    </div>
  );
}

Checked

Checked before you paste.

Robots poked at it before you did. Every component goes through the same checks, and again each time it changes.

What ranLast run Oct 21, 2026

Accessibilityaxe-core 4.10.2: the WCAG 2.1 A and AA rules, plus best practices. 0 issues

KeyboardThe Tab key gets there, and the focus ring shows when it does. Passed

Reduced motionTurn on reduced motion and what moved just appears. Nothing loops. Passed

Light and darkThe same checks on both themes, contrast included. Passed

WordPressPasted into Twenty Twenty-Five, Twenty Twenty-One, Astra, Blocksy, GeneratePress, Hello Elementor, Kadence and OceanWP. Nothing to flag. 8 / 8 themes

Robots checked this. A human with VoiceOver hasn't yet.