Home›Support›English Support›[Escalated to 2nd Tier] I need to make the language switcher hover and click and fully accessible
[Escalated to 2nd Tier] 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.
WordPress 6.7 has introduced a new issue that impact translations, please update WooCommerce and WPML to the latest versions before you report issues. More about this here - https://wpml.org/errata/php-error-wp-6-7-notice-function-_load_textdomain_just_in_time-was-called/
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 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.
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.
