const el = document.createElement('a');
el.href = url;
el.className = 'search-modal__result';
el.setAttribute('role', 'option');
el.setAttribute('aria-labelledby', `search-modal__result-name-${i}`);
el.setAttribute('aria-describedby', `search-modal__result-description-${i}`);
el.setAttribute('aria-selected', 'false');

const iconEl = document.createElement('div');
iconEl.className = 'search-modal__result-icon';
iconEl.innerHTML = icon; // icon is trusted and safe

const contentEl = document.createElement('div');
contentEl.className = 'search-modal__result-content';

const nameEl = document.createElement('div');
nameEl.className = 'search-modal__result-name';
nameEl.id = `search-modal__result-name-${i}`;
nameEl.textContent = item.name; // use textContent for untrusted content

const descEl = document.createElement('div');
descEl.className = 'search-modal__result-description';
descEl.id = `search-modal__result-description-${i}`;
descEl.textContent = description; // use textContent for untrusted content

contentEl.append(nameEl, descEl);
el.append(iconEl, contentEl);
resultsElement.appendChild(el);

resultsElement.append(
  a(
    {
      href: url,
      className: "search-modal__result",
      role: "option",
      ariaLabelledby: `search-modal__result-name-${i}`,
      ariaDescribedby: `search-modal__result-description-${i}`,
      ariaSelected: "false",
    },
    [
      div({ className: "search-modal__result-icon", innerHTML: icon }),
      div({ className: "search-modal__result-content" }, [
        div(
          {
            id: `search-modal__result-name-${i}`,
            className: "search-modal__result-name",
          },
          item.name,
        ),
        div(
          {
            id: `search-modal__result-description-${i}`,
            className: "search-modal__result-description",
          },
          description,
        ),
      ]),
    ],
  ),
);