Hi,
TranslatePress shortcode does render HTML, but as you mentioned doesn’t have the exact WCAG guidelines.
You can create a similar structure using something like this, just modify the template to suit your needs.
function trpc_language_switcher( $atts ){
ob_start();
global $TRP_LANGUAGE;
$shortcode_attributes = shortcode_atts( array(
'display' => 0,
), $atts );
$trp = TRP_Translate_Press::get_trp_instance();
$trp_languages = $trp->get_component( 'languages' );
$trp_settings = $trp->get_component( 'settings' );
$settings = $trp_settings->get_settings();
$url_converter = $trp->get_component( 'url_converter' );
if ( current_user_can(apply_filters( 'trp_translating_capability', 'manage_options' )) ){
$languages_to_display = $settings['translation-languages'];
}else{
$languages_to_display = $settings['publish-languages'];
}
$published_languages = $trp_languages->get_language_names( $languages_to_display );
$current_language = array();
$other_languages = array();
foreach( $published_languages as $code => $name ) {
if( $code == $TRP_LANGUAGE ) {
$current_language['code'] = $code;
$current_language['name'] = $name;
} else {
$other_languages[$code] = $name;
}
}
?>
<div class="trp-language-switcher trp-language-switcher-container" data-no-translation <?php echo ( isset( $_GET['trp-edit-translation'] ) && $_GET['trp-edit-translation'] == 'preview' ) ? 'data-trp-unpreviewable="trp-unpreviewable"' : '' ?>>
<div class="trp-ls-shortcode-current-language">
<a href="#" class="trp-ls-shortcode-disabled-language trp-ls-disabled-language" title="<?php echo esc_attr( $current_language['name'] ); ?>" onclick="event.preventDefault()">
<?php echo $current_language['name']; // WPCS: ok. ?>
</a>
</div>
<div class="trp-ls-shortcode-language">
<?php foreach ( $other_languages as $code => $name ){
?>
<a href="<?php echo esc_url( $url_converter->get_url_for_language($code, false) ); ?>" title="<?php echo esc_attr( $name ); ?>">
<?php echo $name; // WPCS: ok. ?>
</a>
<?php } ?>
</div>
<script type="application/javascript">
// some javascript if needed.
</script>
</div>
<?php
return ob_get_clean();
}
add_shortcode('custom-language-switcher', 'trpc_language_switcher');
Hello Cristian,
Thank you for your help.
I used the function you provided and changed the template to an accessible selector as available here in codepen: https://codepen.io/wyzykowski/pen/zWyEow
The code provided was not making the available options as link. Thus, I modified the code as follows:
<div class="trp-language-switcher trp-language-switcher-container" data-no-translation <?php echo ( isset( $_GET['trp-edit-translation'] ) && $_GET['trp-edit-translation'] == 'preview' ) ? 'data-trp-unpreviewable="trp-unpreviewable"' : '' ?>>
<label for="native" class="hidden">Select language</label>
<select class="dropdown" id="native" title="Select language" onchange="location = this.value;">
<option data-iso-country-code="<?php echo esc_attr( $current_language['code'] ); ?>" value="" aria-label="<?php echo esc_attr( $current_language['name'] ); ?> selected"> <a href="#" class="trp-ls-shortcode-disabled-language trp-ls-disabled-language" title="<?php echo esc_attr( $current_language['name'] ); ?>" onclick="event.preventDefault()">
<?php echo $current_language['name']; // WPCS: ok. ?>
</a></option>
<?php foreach ( $other_languages as $code => $name ){
?>
<option data-iso-country-code="<?php echo esc_attr( $code ); ?>" value="<?php echo esc_url( $url_converter->get_url_for_language($code, false) ); ?>" aria-label="<?php echo esc_attr( $name ); ?>"><a href="<?php echo esc_url( $url_converter->get_url_for_language($code, false) ); ?>" title="<?php echo esc_attr( $name ); ?>">
<?php echo $name; // WPCS: ok. ?>
</a></option>
<?php } ?>
</select>
</div>
Now when i see it in frontpage, I can change to second language and it works. Now when I again click the dropdown and chose the first language (which is now second language), it works however, it adds /#TRPLINKPROCESSED at the last of the site URL.
For example: http://localhost/nwcsite/page/0/#TRPLINKPROCESSED
What is causing this. Can you please help me with this. If this is solved then I would have created a fully accessible language selector for people with disabilities.
THank you in advance
Hi,
Please replace
$url_converter->get_url_for_language($code, false)
with
$url_converter->get_url_for_language($code, false, '')
That should solve it.
Thank you, Cristian. It is solved now. I now have a fully accessible WCAG compliant, language selector, on my website.
I just wish when you have some time, you could implement this natively in future updates of Translatepress. As making website accessible for all is everyone’s responsibility 🙂
Thank you
I’m glad that’s solved. Would you be so kind as to share the code via a https://gist.github.com/ ?
Perhaps we can include it in a future version.
