The filters

<div class="filters">
  <!-- search: a search landmark around the filters -->
  <search>
    <!-- Filters: a group of radio buttons,
         the number of recipes in each label -->
    <fieldset>
      <legend>Category</legend>
      <label>
        <input
          type="radio"
          name="category"
          value="all"
          checked>
        <span>All</span> (5)
      </label>
      <label>
        <input
          type="radio"
          name="category"
          value="starter">
        <span>Starters</span> (2)
      </label>
      <label>
        <input
          type="radio"
          name="category"
          value="main">
        <span>Mains</span> (2)
      </label>
      <label>
        <input
          type="radio"
          name="category"
          value="dessert">
        <span>Desserts</span> (2)
      </label>
    </fieldset>
  </search>
  <!-- Status area: hidden until the script has run -->
  <p
    class="filters__total"
    role="status"
    hidden>
    <span>5 recipes</span>
    <span class="visually-hidden">, all categories</span>
  </p>
  <!-- Results: each recipe lists its categories,
       separated by spaces -->
  <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>
  // Counter: rewritten on each choice,
  // the screen reader reads it after the filter
  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 ? '1 recipe' : `${n} recipes`;
    category.textContent = value === 'all'
      ? ', all categories'
      : `, category: ${e.target.nextElementSibling.textContent}`;
  });
</script>

/* One rule per category.
   ~= finds a word in a space-separated list */
.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;
}

/* Text read by screen readers, absent from the screen (sr-only) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}