Les filtres

<div class="filters">
  <!-- search : un repère de recherche autour des filtres -->
  <search>
    <!-- Filtres : un groupe de boutons radio,
         le nombre de recettes dans chaque libellé -->
    <fieldset>
      <legend>Catégorie</legend>
      <label>
        <input
          type="radio"
          name="category"
          value="all"
          checked>
        <span>Toutes</span> (5)
      </label>
      <label>
        <input
          type="radio"
          name="category"
          value="starter">
        <span>Entrées</span> (2)
      </label>
      <label>
        <input
          type="radio"
          name="category"
          value="main">
        <span>Plats</span> (2)
      </label>
      <label>
        <input
          type="radio"
          name="category"
          value="dessert">
        <span>Desserts</span> (2)
      </label>
    </fieldset>
  </search>
  <!-- Zone de statut : masquée tant que le script n'a pas tourné -->
  <p
    class="filters__total"
    role="status"
    hidden>
    <span>5 recettes</span>
    <span class="visually-hidden">, toutes catégories</span>
  </p>
  <!-- Résultats : chaque recette liste ses catégories,
       séparées par des espaces -->
  <ul>
    <li data-categories="starter">…</li>
    <li data-categories="starter main">…</li>
    <li data-categories="main">…</li>
    <li data-categories="dessert">…</li>
    <li data-categories="dessert">…</li>
  </ul>
</div>

<script>
  // Compteur : réécrit à chaque choix,
  // le lecteur d'écran le lit après le filtre
  const filters = document.querySelector('.filters');
  const total = filters.querySelector('[role="status"]');
  const [count, category] = total.children;
  total.hidden = false;
  filters.addEventListener('change', (e) => {
    const value = e.target.value;
    const selector = value === 'all' ? 'li' : `li[data-categories~="${value}"]`;
    const n = filters.querySelectorAll(selector).length;
    count.textContent = n > 1 ? `${n} recettes` : `${n} recette`;
    category.textContent = value === 'all'
      ? ', toutes catégories'
      : `, catégorie ${e.target.nextElementSibling.textContent}`;
  });
</script>

/* Une règle par catégorie.
   ~= trouve un mot dans une liste séparée par des espaces */
.filters:has(input[value="starter"]:checked)
  li:not([data-categories~="starter"]),
.filters:has(input[value="main"]:checked)
  li:not([data-categories~="main"]),
.filters:has(input[value="dessert"]:checked)
  li:not([data-categories~="dessert"]) {
  display: none;
}

/* Texte lu par le lecteur d'écran, absent de l'écran (sr-only) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}