2.1.1 Keyboard (A) Device category links not accessible via keyboard

Use anchor elements for links instead of trying to build custom interactive components. All <a> elements MUST have an href attribute. To demonstrate, this is one of the links:

<div class="style__StyledNavigationChips-sc-h2fd9x-0 IhoCS dt_navigationChips clickable selected"
     data-qa="LST_DeviceCategory_smartphones">
  <article class="style__StyledIconWrapper-sc-h2fd9x-1 jAhAws">
    <div class="iconWrapper" role="image" aria-label="Handys">
      <div class="sc-imWYAI iYZqNY es_preloadImage">
        <img class="sc-kpDqfm bxTqZb dt_mainImage customStyle imgLoaded"
          alt="Handys"
          src="..."
          data-img="isSafari_false isSsr_undefined">
        <div class="sc-jXbUNg jYexhV dt_placeholderImage">
          <svg width="100%" height="100%" viewBox="0 0 121 242"
            fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="..."
              fill="#F3F3F3"></path>
          </svg>
        </div>
      </div>
    </div>
  </article>
  <div class="sc-YysOf esSDcz dt_typography variant_smallBold">
    Handys
  </div>
</div>

When it easily could be:

<nav aria-labelledby="heading-device-categories" id="menu-device-categories">
  <h2 id="heading-device-categories">Geräte-Kategorien</h2>
  <ul>
    <li><img alt="" src="..."><a href="">Handys</a>
    <li><img alt="" src="..."><a href="">Smartwatches</a>
    <li><img alt="" src="..."><a href="">Tablets</a>
    <li><img alt="" src="..."><a href="">Mobile Router</a>
    <li><img alt="" src="..."><a href="">Tastenhandys</a>
  </ul>
</nav>

for the whole navigation to be perfectly accessible. The clean semantic structure with the id on the navigation element allows for all necessary CSS selectors to be created from the id alone without the need of countless CSS classes.

Simple structured HTML outperforms in many ways.

Please also refer to observation 1.3.1 Info and Relationships – "Semantic HTML" for general remarks about the use of semantic HTML.