I need to make the language switcher hover and click and fully accessible

This is the technical support forum for WPML - the multilingual WordPress plugin.

Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	-	9:00 – 18:00	9:00 – 18:00	9:00 – 18:00	9:00 – 18:00	9:00 – 18:00
-	-	-	-	-	-	-

Supporter timezone: America/Lima (GMT-05:00)

Tagged: Feature request

This topic contains 5 replies, has 2 voices.

Last updated by Andreas W. 1 year, 5 months ago.

Assisted by: Andreas W..

Author	Posts
January 2, 2024 at 3:20 pm #15143956
drewP-2	Hi! We have a site in progress and were audited by an accessibility consultant, which brought up this issue. We need to solve this before we can launch. I am trying to: Make the custom language switcher open on hover and click, while allowing screen readers to select the menu and sub-menu items with the keyboard using TAB, ENTER, ESC, and ARROWS. Link to a page where the issue can be seen: hidden link I expected to see: Focus behavior on the menu with the ability to focus sub-items as well and select them with the keyboard as well as escape out of the menu if desired. Instead, I got: Focus on the menu, which opened the menu with tab-index="0", but the sub-items do not have tab-index and click behavior does not work when the WPML setting is for dropdown in the WPML > Language settings. When I switch to "Dropdown Click" the menu and sub-items are not focusable with the keyboard at all... I referred to this past ticket (https://wpml.org/forums/topic/i-need-to-make-the-menu-language-switcher-clickable/), but it did not resolve my issue. Thanks!
January 2, 2024 at 3:34 pm #15143998
Andreas W. WPML Supporter since 12/2018 Languages: English (English ) Spanish (Español ) German (Deutsch ) Timezone: America/Lima (GMT-05:00)	Hello, I see it works in English but not in Hebrew. Could you please try to recreate this issue on the following test site with a simple example? One-Click-Login: hidden link Please leave me a short message, once you have been able to recreate the issue. Best regards Andreas
January 2, 2024 at 3:42 pm #15144047
drewP-2	Hi Andreas, Thank you for your reply. I have added the custom switcher to the header of this test site and you can see the behavior. It focuses and opens, but there is no way to make a selection of a sub-item with the keyboard. it also has no behavior if clicked. Just to be clear, I am asking for both hover and click with keyboard selection of items. hidden link Thanks again
January 2, 2024 at 5:21 pm #15144332
Andreas W. WPML Supporter since 12/2018 Languages: English (English ) Spanish (Español ) German (Deutsch ) Timezone: America/Lima (GMT-05:00)	I can recreate the issue even when using the default menu language switcher and the issue occurs in the site's default language as well. As soon I am on the dropdown and select the "Down" button the whole page scrolls, and I can not select a dropdown item. I see on your site we can select the dropdown item by pressing the tab again while on the dropdown. Did you implement this with custom code? Please answer this question and let me know how you achieved the behavior. I will further consult our product manager about this issue, as this might need to be considered as a feature request.
January 2, 2024 at 5:48 pm #15144383
drewP-2	We added some custom CSS for :hover and :focus to reveal more of the dropdown and styled it up a bit. But I am not able to select the dropdown item with TAB key.. (I am on Firefox if that matters). The first tab only opens the dropdown, but the following tabbing moves to the next element on the screen altogether. To add click behavior, I'm assuming, we'd need to add a JS event listener and combat the issue of CSS vs JS events. I attempted with toggling an "active" class on mouseenter, mouseleave, hover, and focus, but did not spend much time on it and still had some conflicts.
January 3, 2024 at 5:25 pm #15148252
Andreas W. WPML Supporter since 12/2018 Languages: English (English ) Spanish (Español ) German (Deutsch ) Timezone: America/Lima (GMT-05:00)	Thank you very much for your feedback. I have submitted a feature request to our team and I will contact you once I receive feedback.