From 816621d0c70827cac40939223049ea66c0c1f1ee Mon Sep 17 00:00:00 2001 From: Jon Uhlmann Date: Tue, 15 Jan 2019 13:56:22 +0100 Subject: [PATCH 1/4] :sparkles: Add ability to localize the aria labels --- README.md | 11 ++++++++++- js/page-dots.js | 5 +++-- js/prev-next-button.js | 4 +++- 3 files changed, 16 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 76de7cac..392c41d8 100644 --- a/README.md +++ b/README.md @@ -139,9 +139,18 @@ var flky = new Flickity( '.gallery', { // watches the content of :after of the element // activates if #element:after { content: 'flickity' } - wrapAround: false + wrapAround: false, // at end of cells, wraps-around to first for infinite scrolling + l18nPageDot: 'Page dot %' + // Aria label for the page dots. `%` gets replaced with the slide number + + l18nPrevious: 'Previous', + // Aria label for the previous button + + l18nNext: 'Next' + // Aria label for the next button + }); ``` diff --git a/js/page-dots.js b/js/page-dots.js index ce1db204..52913685 100644 --- a/js/page-dots.js +++ b/js/page-dots.js @@ -85,7 +85,7 @@ PageDots.prototype.addDots = function( count ) { for ( var i = length; i < max; i++ ) { var dot = document.createElement('li'); dot.className = 'dot'; - dot.setAttribute( 'aria-label', 'Page dot ' + ( i + 1 ) ); + dot.setAttribute( 'aria-label', this.parent.options.l18nPageDot.replace('', i + 1) ); fragment.appendChild( dot ); newDots.push( dot ); } @@ -139,7 +139,8 @@ Flickity.PageDots = PageDots; // -------------------------- Flickity -------------------------- // utils.extend( Flickity.defaults, { - pageDots: true + pageDots: true, + l18nPageDot: 'Page dot %' }); Flickity.createMethods.push('_createPageDots'); diff --git a/js/prev-next-button.js b/js/prev-next-button.js index 612bb165..ea8c78cd 100644 --- a/js/prev-next-button.js +++ b/js/prev-next-button.js @@ -59,7 +59,7 @@ PrevNextButton.prototype._create = function() { // init as disabled this.disable(); - element.setAttribute( 'aria-label', this.isPrevious ? 'Previous' : 'Next' ); + element.setAttribute('aria-label', this.parent.options[this.isPrevious ? 'l18nPrevious' : 'l18nNext']); // create arrow var svg = this.createSVG(); @@ -178,6 +178,8 @@ PrevNextButton.prototype.destroy = function() { utils.extend( Flickity.defaults, { prevNextButtons: true, + l18nPrevious: 'Previous', + l18nNext: 'Next', arrowShape: { x0: 10, x1: 60, y1: 50, From cf7f7e85cccda376195dcb7122ae1ac05e5e43df Mon Sep 17 00:00:00 2001 From: Jon Uhlmann Date: Fri, 18 Jan 2019 10:51:53 +0100 Subject: [PATCH 2/4] :bug: Add missing replace string --- js/page-dots.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/page-dots.js b/js/page-dots.js index 52913685..db7b06e4 100644 --- a/js/page-dots.js +++ b/js/page-dots.js @@ -85,7 +85,7 @@ PageDots.prototype.addDots = function( count ) { for ( var i = length; i < max; i++ ) { var dot = document.createElement('li'); dot.className = 'dot'; - dot.setAttribute( 'aria-label', this.parent.options.l18nPageDot.replace('', i + 1) ); + dot.setAttribute( 'aria-label', this.parent.options.l18nPageDot.replace('%', i + 1) ); fragment.appendChild( dot ); newDots.push( dot ); } From 16c3c8213f49ba297f6d0871b89802dc5024b662 Mon Sep 17 00:00:00 2001 From: Jon Uhlmann Date: Thu, 24 Jan 2019 09:44:01 +0100 Subject: [PATCH 3/4] TASK: Ajust variable names --- README.md | 8 ++++---- js/page-dots.js | 6 ++++-- js/prev-next-button.js | 8 +++++--- 3 files changed, 13 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 392c41d8..394983dd 100644 --- a/README.md +++ b/README.md @@ -142,13 +142,13 @@ var flky = new Flickity( '.gallery', { wrapAround: false, // at end of cells, wraps-around to first for infinite scrolling - l18nPageDot: 'Page dot %' - // Aria label for the page dots. `%` gets replaced with the slide number + pageDotAriaLabel: 'Page dot %n' + // Aria label for the page dots. `%n` gets replaced with the slide number - l18nPrevious: 'Previous', + previousAriaLabel: 'Previous', // Aria label for the previous button - l18nNext: 'Next' + nextAriaLabel: 'Next' // Aria label for the next button }); diff --git a/js/page-dots.js b/js/page-dots.js index db7b06e4..27d9169b 100644 --- a/js/page-dots.js +++ b/js/page-dots.js @@ -81,11 +81,13 @@ PageDots.prototype.addDots = function( count ) { var newDots = []; var length = this.dots.length; var max = length + count; + var ariaLabel = this.parent.options.pageDotAriaLabel; for ( var i = length; i < max; i++ ) { var dot = document.createElement('li'); + var label = ariaLabel.replace( '%n', i + 1 ); dot.className = 'dot'; - dot.setAttribute( 'aria-label', this.parent.options.l18nPageDot.replace('%', i + 1) ); + dot.setAttribute( 'aria-label', label ); fragment.appendChild( dot ); newDots.push( dot ); } @@ -140,7 +142,7 @@ Flickity.PageDots = PageDots; utils.extend( Flickity.defaults, { pageDots: true, - l18nPageDot: 'Page dot %' + pageDotAriaLabel: 'Page dot %' }); Flickity.createMethods.push('_createPageDots'); diff --git a/js/prev-next-button.js b/js/prev-next-button.js index ea8c78cd..021f5a9d 100644 --- a/js/prev-next-button.js +++ b/js/prev-next-button.js @@ -59,7 +59,9 @@ PrevNextButton.prototype._create = function() { // init as disabled this.disable(); - element.setAttribute('aria-label', this.parent.options[this.isPrevious ? 'l18nPrevious' : 'l18nNext']); + var optionName = this.isPrevious ? 'previous' : 'next'; + var label = this.parent.options[ optionName + 'AriaLabel' ]; + element.setAttribute('aria-label', label); // create arrow var svg = this.createSVG(); @@ -178,8 +180,8 @@ PrevNextButton.prototype.destroy = function() { utils.extend( Flickity.defaults, { prevNextButtons: true, - l18nPrevious: 'Previous', - l18nNext: 'Next', + previousAriaLabel: 'Previous', + nextAriaLabel: 'Next', arrowShape: { x0: 10, x1: 60, y1: 50, From 491f65454b864a334f8ea4aa85a663f9a5b3eb1f Mon Sep 17 00:00:00 2001 From: Jon Uhlmann Date: Thu, 24 Jan 2019 09:46:49 +0100 Subject: [PATCH 4/4] TASK: Add missing n in pageDotAriaLabel --- js/page-dots.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/page-dots.js b/js/page-dots.js index 27d9169b..0540e2f9 100644 --- a/js/page-dots.js +++ b/js/page-dots.js @@ -142,7 +142,7 @@ Flickity.PageDots = PageDots; utils.extend( Flickity.defaults, { pageDots: true, - pageDotAriaLabel: 'Page dot %' + pageDotAriaLabel: 'Page dot %n' }); Flickity.createMethods.push('_createPageDots');