language selector

According to the Web Content Accessibility Guidelines (WCAG), it is highly reccomended to use a label together with the value modificator.
table of content

component variations

default

Open on blank page
Bosch Global
<div class="m-language-selector">
  <div class="a-link -icon">
    <a href="https://www.bosch.com/websites-worldwide/" target="_blank">
      <i class="a-icon boschicon-bosch-ic-globe"></i>
      <span>Bosch Global</span>
    </a>
  </div>
  <div class="a-dropdown">
    <select id="demo" aria-label="here goes the aria label for the dropwdown">
      <option value='"Deutsch"'>Deutsch</option>
      <option value='"English"'>English</option>
      <option value='"Französisch"'>Französisch</option>
      <option value='"中国人"'>中国人</option>
      <option value='"русский"'>русский</option>
      <option value='"עברית"'>עברית</option>
      <option value='"العربية"'>العربية</option>
    </select>
  </div>
</div>

additional content

styles SCSS

.m-language-selector {
  display: flex;

  .a-link {
    color: var(--plain__enabled__front__default);

    // Styling for coloring the link and the globe
    &:hover {
      color: var(--minor-accent__enabled__front__hovered);
      text-decoration: none;
    }

    a {
      align-items: center;
      text-decoration: none;
    }

    a > i + span {
      padding-left: 1.75rem;
    }
  }

  .a-dropdown {
    margin-left: 0.75rem;
    height: auto;

    select {
      padding-left: 0.375rem;
      padding-right: 1.625rem;
      height: 1.75em;
      margin-top: -0.5em;

      &:focus-visible {
        border: 0;
        box-shadow: 0 0 0 3px var(--background);
        outline: 3px solid var(--plain__enabled__front__default);
        outline-offset: 3px;
      }
    }

    &::after {
      top: 0;
      right: 0.125rem;
    }
  }
}