Skip to main content

Patterns

Text Controller

The Text Controller Component contains two elements: a language menu and a text sizer. When JavaScript is enabled, it has two primary states: expanded language options and collapsed language options. All language options are visible at page landing, but for all page visits afterwords, it collapses and gives the option of expanding to show the language options menu again. The current language switcher on ACCESS NYC is displayed through the WordPress Multilingual Plugin (WPML).

<div class="c-text-controller"><button aria-controls="aria-c-text-controller__options" aria-expanded="false" class="c-text-controller__toggle mb-1 btn-link" data-js="toggle" type="button"><svg class="icon icon-ui-settings">
      <use xlink:href="#icon-ui-settings"></use>
    </svg><span class="c-text-controller__title-full">Translate &amp; Adjust Text</span><span class="c-text-controller__title-short">Translate Text</span></button>
  <div aria-hidden="true" class="c-text-controller__options hidden" id="aria-c-text-controller__options">
    <div class="c-text-controller__languages">
      <div class="wpml-ls-statics-shortcode_actions wpml-ls wpml-ls-legacy-list-horizontal">
        <ul>
          <li class="wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-en wpml-ls-current-language wpml-ls-first-item wpml-ls-item-legacy-list-horizontal"><a class="wpml-ls-link" href="#"><span class="wpml-ls-native">English</span></a></li>
          <li class="wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-es wpml-ls-item-legacy-list-horizontal"><a class="wpml-ls-link" href="#"><span class="wpml-ls-native">Español</span></a></li>
          <li class="wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-ru wpml-ls-item-legacy-list-horizontal"><a class="wpml-ls-link" href="#"><span class="wpml-ls-native">Русский</span></a></li>
          <li class="wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-ko wpml-ls-item-legacy-list-horizontal"><a class="wpml-ls-link" href="#"><span class="wpml-ls-native">한국어</span></a></li>
          <li class="wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-ar wpml-ls-item-legacy-list-horizontal"><a class="wpml-ls-link" href="#"><span class="wpml-ls-native">العربية</span></a></li>
          <li class="wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-ht wpml-ls-item-legacy-list-horizontal"><a class="wpml-ls-link" href="#"><span class="wpml-ls-native">Kreyol</span></a></li>
          <li class="wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-zh-hant wpml-ls-item-legacy-list-horizontal"><a class="wpml-ls-link" href="#"><span class="wpml-ls-native">繁體中文</span></a></li>
          <li class="wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-fr wpml-ls-item-legacy-list-horizontal"><a class="wpml-ls-link" href="#"><span class="wpml-ls-native">Français</span></a></li>
          <li class="wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-pl wpml-ls-item-legacy-list-horizontal"><a class="wpml-ls-link" href="#"><span class="wpml-ls-native">polski</span></a></li>
          <li class="wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-ur wpml-ls-item-legacy-list-horizontal"><a class="wpml-ls-link" href="#"><span class="wpml-ls-native">اردو</span></a></li>
          <li class="wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-bn wpml-ls-last-item wpml-ls-item-legacy-list-horizontal"><a class="wpml-ls-link" href="#"><span class="wpml-ls-native">বাংলা</span></a></li>
        </ul>
      </div>
    </div>
    <div class="c-text-controller__sizer"><span class="c-text-controller__sizer-text">Adjust text size</span><button class="c-text-controller__sizer-btn btn-text js-text-larger"><svg class="icon icon-ui-plus-circle">
          <use xlink:href="#icon-ui-plus-circle"></use>
        </svg>
        <div class="sr-only">Larger</div>
      </button><button class="c-text-controller__sizer-btn btn-text js-text-smaller"><svg class="icon icon-ui-minus-circle">
          <use xlink:href="#icon-ui-minus-circle"></use>
        </svg>
        <div class="sr-only">Smaller</div>
      </button></div>
  </div>
</div>