<!-- Instead of… -->
<span aria-label="Vegetarian">
	🌱
</span>

<!-- You could do… -->
<span aria-hidden="true">🌱</span>
<span class="visually-hidden">Vegetarian</span>

<!-- In some cases -->
  <!-- It might be more appropriate to expose these like images… -->
<span role="img" aria-label="Vegetarian">
	🌱
</span>
<span role="img" aria-label="Kaomoji table flip">
	(╯°□°)╯︵ ┻━┻
</span>

function buttonClickHandler(container, list) {
    const listHeight = list.getBoundingClientRect().height;
  // this refers to the button
    const buttonIsExpanded = this.getAttribute('aria-expanded') === 'false';

    // Toggle aria-expanded when click occurs
    this.setAttribute('aria-expanded', !buttonIsExpanded ? 'false' : 'true');

    // change the text of the link based on the data attr being expanded or not
    this.textContent = !buttonIsExpanded
      ? 'See all module items'
      : 'See less module items';

    // change the html class name
    if (container.classList.contains('shortlist')) {
      container.classList.replace('shortlist', 'longlist');
      container.style.maxHeight = `${listHeight}px`;
    } else {
      container.classList.replace('longlist', 'shortlist');
      container.style.maxHeight = '13rem';
    }
  }