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.
81 lines
2.2 KiB
Ruby
81 lines
2.2 KiB
Ruby
require "rails_helper"
|
|
|
|
describe Layout::LocaleSwitcherComponent, type: :component do
|
|
let(:component) { Layout::LocaleSwitcherComponent.new }
|
|
|
|
before do
|
|
allow(request).to receive(:path_parameters).and_return(
|
|
Rails.application.routes.recognize_path("/")
|
|
)
|
|
end
|
|
|
|
context "with only one language" do
|
|
before { allow(I18n).to receive(:available_locales).and_return([:en]) }
|
|
|
|
it "doesn't render anything" do
|
|
render_inline component
|
|
|
|
expect(page.text).to be_empty
|
|
expect(page).not_to have_css ".locale"
|
|
end
|
|
end
|
|
|
|
context "with many languages" do
|
|
before { allow(I18n).to receive(:available_locales).and_return(%i[de en es fr nl]) }
|
|
|
|
it "renders a form to select the language" do
|
|
render_inline component
|
|
|
|
expect(page).to have_css "form"
|
|
expect(page).to have_select "Language:", options: %w[Deutsch English Español Français Nederlands]
|
|
expect(page).not_to have_css "ul"
|
|
end
|
|
|
|
it "selects the current locale" do
|
|
render_inline component
|
|
|
|
expect(page).to have_select "Language:", selected: "English"
|
|
end
|
|
|
|
context "missing language names" do
|
|
let!(:default_enforce) { I18n.enforce_available_locales }
|
|
|
|
before do
|
|
I18n.enforce_available_locales = false
|
|
allow(I18n).to receive(:available_locales).and_return(%i[de en es fr nl wl])
|
|
end
|
|
|
|
after { I18n.enforce_available_locales = default_enforce }
|
|
|
|
it "renders the locale key" do
|
|
render_inline component
|
|
|
|
expect(page).to have_select "Language:", with_options: ["wl"]
|
|
end
|
|
end
|
|
end
|
|
|
|
context "with a few languages" do
|
|
before do
|
|
allow(I18n).to receive(:available_locales).and_return(%i[en es fr])
|
|
end
|
|
|
|
it "renders a list of links" do
|
|
render_inline component
|
|
|
|
expect(page).to have_css "ul"
|
|
expect(page).to have_link "English", href: "/?locale=en"
|
|
expect(page).to have_link "Español", href: "/?locale=es"
|
|
expect(page).to have_link "Français", href: "/?locale=fr"
|
|
expect(page).not_to have_css "form"
|
|
end
|
|
|
|
it "marks the current locale" do
|
|
render_inline component
|
|
|
|
expect(page).to have_css "[aria-current]", count: 1
|
|
expect(page).to have_css "[aria-current]", exact_text: "English"
|
|
end
|
|
end
|
|
end
|