1f10afac64
As mentioned in commit 5214d89c8, using the `change` event of a `select`
field to automatically change location is really annoying for keyboard
users, since the event will trigger when pressing the down key to
navigate through the options or when typing a key to start searching for
an option. This might cause a lot of frustration.
Most multilanguage CONSUL sites enable between 2 and 4 languages. In
these cases, it's easier to just display the list of languages to
simplify the selection.
This way in this situation we also make it clear which languages are
available. If we use a `<select>` tag, users will have to open it in
order to check whether the site is available in their preferred
language.
This is also useful when the current language uses characters users
don't recognize; users will recognize their own language in the list of
available languages, while it might be harder to recognize the language
selector allows them to switch to a different language.
In this case, we're also hiding the label because a list of links with
language names is usually self explanatory for sighted users. We're
still providing it for screen reader users so they immediately know the
list allows them to change the language and if they don't need to do so
they can quickly skip it.
15 lines
548 B
Plaintext
15 lines
548 B
Plaintext
<div class="locale">
|
|
<% if many_locales? %>
|
|
<form class="locale-form">
|
|
<label class="inline-block" for="locale-switcher"><%= label %></label>
|
|
<select class="js-location-changer locale-switcher inline-block" name="locale-switcher" id="locale-switcher">
|
|
<%= options_for_select(language_options, current_path_with_query_params(locale: I18n.locale)) %>
|
|
</select>
|
|
</form>
|
|
<% else %>
|
|
<p id="<%= label_id %>"><%= label %></p>
|
|
|
|
<%= link_list(*language_links, "aria-labelledby": label_id) %>
|
|
<% end %>
|
|
</div>
|