Accessibility:Possible to Make JS Dropdowns Keyboard Navigitable?

Correction…my bad…I had disabled JavaScript and the inputs didn’t appear so I thought they were generated via JavaScript.

I’ve added tabindex=’0′ to line 19 of frontend/templates/store-listings-below. I’m getting a similar result as above.

Any suggestions on making WP Store Locator keyboard accessible? Thanks for any help you can provide.

*Note: I tried disabling Javascript via Firefox and the labels for Search Radius, Results and Category filter are shown but with no dropdowns shown (visually nor to screen reader). Looking at the source code, there are <select, etc. tags.

Investigating further, it appears that the <select> dropdown boxes have display:none applied to them in styles.min.css.

#wpsl-search,...{
display: none;
}

Is there a reason why? With the CSS disabled, I can see and the NVDA screenreader can go through the list fine.

Thanks.

They are set to display:none, because the normal selects are only used to generate the JS based one. I will look into changing this and using JS to hide them, so if JS is not available they will show up anyway. But I think there was a problem with this, in a way that they where visible for a second and users saw the style being changed.

The current dropdown script is based on easydropdown, it grabs the values from the select and turns it into a group of
li items.

The easiest way to prevent the JS script from creating the custom dropdowns, is by removing the wpsl-dropdown class from the select items in the template code.

But since changing core files is generally a bad idea, you should copy the template you want to use, move it to your theme folder, and use this filter to define the new template.

Open the template file and remove class=”wpsl-dropdown” from both selects. You will have style the dropdown a bit to make it look good next to the search input field.

The category filter isn’t generated in the template file itself, so you will have to open the /frontend/class-frontend.php, search for function create_category_filter, copy the code inside that function.

In the template file that you moved to your theme folder, look for this code.

$output .= $this->create_category_filter();

Replace it with the code from inside the function create_category_filter, only replace all $category = with $output .=, and again remove the class=”wpsl-dropdown”.

The last step will be to add an extra CSS line to the styles.css in your theme folder that overwrite the display:none for the selects, and sets it to display:block

Thanks. I will try that.

Also another related question/clarification, what was the reasoning for using JS for the dropdown as opposed to default HTML generated? (It seems to be interfering with the accessibility of it. When I passed it through a screenreader, I also got it to read “list with no items”, which is doubly confusing.)

Here’s some info about accessbility and the select form element: https://webaim.org/techniques/forms/controls#select. https://www.w3.org/WAI/tutorials/forms/grouping/?course=#grouping-items-in-select-elements. In the plugin’s case though, I think the existing HTML code is sufficient (before the JS modification).

To open a select menu on focus, hold ALT + [Down Arrow]. To navigate through the list items, use the [Down Arrow] and [Up Arrow] keys.

Thanks.

The JS is used to allow a different style. You can ‘easily’ style normal input fields with CSS, but select fields are more complicated to get them look the same in all browsers and make them bigger.

All other HTML elements like the list of li elements that’s used now is easy to style. I will look into making it more accessible in a future update, but this won’t happen in 2.1, probably 2.2.

Thanks, Tijmen.

I tried your suggestion with overriding the templates; however, I’m having some trouble getting it to override. Not sure what I’m missing…

I tried overriding store-listings-below.php and removed the class=”wpsl-dropdown” from both selects as well as the code modification for the category filter. I tried several locations and even cleared my cache but no luck. I am using a custom child theme of Genesis. Any ideas?

I tried putting store-listings-below.php in the following locations:

/wordpress/wp-content/themes/mytheme/plugins/wp-store-locator/frontend/templates/

/wordpress/wp-content/themes/mytheme/plugins/wp-store-locator/frontend/

/wordpress/wp-content/themes/mytheme/plugins/wp-store-locator/

/wordpress/wp-content/themes/mytheme/plugins/

/wordpress/wp-content/themes/mytheme/

I even tried putting them within the Genesis theme folder

*Note: I also edited the default.php template. I couldn’t get that to override in /wordpress/wp-content/themes/mytheme/…either, as above.

You need to use this filter to define the location of your custom template.

The usage code on that page shows this for the path

get_template_directory() . '/' . 'wpsl-templates/custom.php'

So if add the code from the wpsl_templates usage section to your functions.php, create a wpsl-templates folder in your theme folder, and name the template file custom.php, then it will work.

Thanks. I tried but didn’t get it to work. As I’m using a Genesis child theme, I tried the following, but it’s still not overriding. The function does get called but template is not overridden. Not sure what I am missing.

'path' => get_stylesheet_directory_uri() . '/' . 'plugins/wp-store-locator/default.php',

I see I didn’t mention you also had to activate the custom template on the settings page…

Go to Store Locator > Settings, scroll down to the “User Experience” section, look for the “Store Locator template” dropdown, select the name of the custom template and save the changes.

The name that should show up is the value from the name field in this code example https://gist.github.com/tijmensmit/bd8b58383555b2374eb2#file-wpsl_templates-php.

Thanks. I still can’t seem to get it to override even after the seeting change…Not sure what’s the issue. The override function is definitely being called. I checked the path multiple times as well. I even tried clearing the cache.

Troubleshooting further, it looks like the filter custom function is called; however, the override template file is not being loaded.

OK–it’s resolved now. Thanks.

For those who encounter this issue, by default, template=”default” was added to the shortcode on the page I added “wpsl” shortcode. I manually removed that attribute and then the Settings for my custom template finally was used.