SOLVED: Bricks remove spaces from Splide i18n options

Bugs
1

I try to use i18n options to translate few Splide slider elements.
I create custom slider.

"i18n": {
   "prev": "Previous Slide",
   "next": "Next Slide",
   "carousel": "News Slides Slider",
   "slide": "Some Slide",
   "carousel": "Some Carousel"
  }

These text contains words separated by space.
Bricks remove all spaces, and creates: PreviousSlide, NextSlide, NewsSlidesSlider, SomeSlide, SomeCarousel

"prev":"**PreviousSlide**",	"next":"**NextSlide**","carousel":"**NewsSlidesSlider**","slide":"**SomeSlide**","carousel":"**SomeCarousel**"},

I think, this is not Splide problem.
Text pasted to Splide scripts are without spaces.
I need improve accessibility and I need Splide elements labels into website language.

2

Hi Marek,
Thanks so much for your report!

I reproduced the issue and added it to the bug tracker.

Best regards,
timmse

3

Thanks for quick response.
Temporary solution below.
Tested on screen reader NVDA and works fine.

First, add nbsp to translations:

"i18n": {
    "prev": "Previous   slide",
    "next": "Next   slide",
    "first": "First   slide",
    "last": "Last   slide",
    "slideX": "Go   to   slide   %s",
    "pageX": "Go   to    page   %s",
    "play": "Run   slideshow",
    "pause": "Pause   slideshow",
    "carousel": "Slideshow   roledescription",
    "select": "Chose   slide   to   pokazania",
    "slide": "Slide   roledescription",
    "slideLabel": "Slide   %s   from   %s"
  },

'use strict';

document.addEventListener( 'DOMContentLoaded', function( event ) {

	setTimeout( () => {

		const splideSliders = document.querySelectorAll( 'div.splide' );

		if ( splideSliders.length > 0 ) {

			splideSliders.forEach( splideSlider => {

				if ( splideSlider.getAttribute( 'aria-label' ) !== null ) {

					splideSlider.setAttribute( 'aria-label', splideSlider.getAttribute( 'aria-label' ).replace( /\s+/g, ' ' ) );
				}

				const splideAriaLabels = document.querySelectorAll( `#${splideSlider.id} [aria-label]` );

				if ( splideAriaLabels.length > 0 ) {

					splideAriaLabels.forEach( splideAriaLabel => {

						splideAriaLabel.setAttribute( 'aria-label', splideAriaLabel.getAttribute( 'aria-label' ).replace( /\s+/g, ' ' ) );
					});
				}


				if ( splideSlider.getAttribute( 'aria-roledescription' ) !== null ) {

					splideSlider.setAttribute( 'aria-roledescription', splideSlider.getAttribute( 'aria-roledescription' ).replace( /\s+/g, ' ' ) );
				}

				const splideAriaRoleDescriptions = document.querySelectorAll( `#${splideSlider.id} [aria-roledescription]` );

				if ( splideAriaRoleDescriptions.length > 0 ) {

					splideAriaRoleDescriptions.forEach( splideAriaRoleDescription => {

						splideAriaRoleDescription.setAttribute( 'aria-roledescription', splideAriaRoleDescription.getAttribute( 'aria-roledescription' ).replace( /\s+/g, ' ' ) );
					});
				}

			});
		}

	}, 500 );

});
4

Please, look at this feature request: SplideJS improve accessibility WCAG

5

We’ve addressed this in Bricks 2.3.3, now available as a one-click update in your WordPress Dashboard.

Please read the changelog entry before updating, and let us know if you experience any issues.

6

Hullo.

What’s the preferred way to translate splide slider labels (arrows, pager etc)?

I see translation files are included, but they don’t look to be in use…