Menu: combine button and a (class="ecl-menu__link") into a single button

[cstrobbe]

Each menu in the menu bar currently has two tab stops: one for the link and one for the button, but only the button opens the menu. This pattern deviates from what keyboard users (including screen reader users) know from desktop applications, which is not ideal. I would suggest getting rid of the <a href="/component-library/example#bc1mr" class="ecl-menu__link" data-ecl-menu-link="" style="width: 100%;">Principles, countries, history</a> (to take the first example) and moving its text content into the button:

<button class="ecl-button ecl-button--primary ecl-menu__button-caret" type="button" data-ecl-menu-caret="" >
  Principles, countries, history
  <span class="ecl-button__container">
    <svg class="ecl-icon ecl-icon--xs ecl-icon--rotate-180 ecl-button__icon ecl-button__icon--after" focusable="false" aria-hidden="true" data-ecl-icon="">...</svg>
  </span>
</button>

This way, you have only one tab stop per menu, which is the pattern users are familiar with, and you can get rid of the aria-label on the button. I assume you can also use CSS to change the SVG up arrow into a down arrow and vice versa depending on whether the menu is open or not. (I don't know whether you want the button text before the span or inside it, but I'm sure you do.)