Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
add aria support
  • Loading branch information
leongersen committed May 28, 2017
1 parent d0e1965 commit 5659c0e
Show file tree
Hide file tree
Showing 8 changed files with 64 additions and 12 deletions.
1 change: 1 addition & 0 deletions Gruntfile.js
Expand Up @@ -15,6 +15,7 @@ module.exports = function(grunt) {
'src/js/scope_start.js',
'src/js/structure.js',
'src/js/tooltips.js',
'src/js/aria.js',
'src/js/pips.js',
'src/js/scope_helpers.js',
'src/js/scope_events.js',
Expand Down
1 change: 1 addition & 0 deletions concat.php
Expand Up @@ -10,6 +10,7 @@
require 'src/js/scope_start.js';
require 'src/js/structure.js';
require 'src/js/tooltips.js';
require 'src/js/aria.js';
require 'src/js/pips.js';
require 'src/js/scope_helpers.js';
require 'src/js/scope_events.js';
Expand Down
23 changes: 23 additions & 0 deletions src/js/aria.js
@@ -0,0 +1,23 @@

function aria ( ) {

bindEvent('update', function ( values, handleNumber, unencoded, tap, positions ) {

// Update Aria Values for all handles, as a change in one changes min and max values for the next.
scope_HandleNumbers.forEach(function( handleNumber ){

var handle = scope_Handles[handleNumber];

var min = checkHandlePosition(scope_Locations, handleNumber, 0, true, true, true);
var max = checkHandlePosition(scope_Locations, handleNumber, 100, true, true, true);

var now = positions[handleNumber];
var text = options.ariaFormat.to(unencoded[handleNumber]);

handle.children[0].setAttribute('aria-valuemin', min.toFixed(1));
handle.children[0].setAttribute('aria-valuemax', max.toFixed(1));
handle.children[0].setAttribute('aria-valuenow', now.toFixed(1));
handle.children[0].setAttribute('aria-valuetext', text);
});
});
}
4 changes: 4 additions & 0 deletions src/js/helpers.js
@@ -1,4 +1,8 @@

function isValidFormatter ( entry ) {
return typeof entry === 'object' && typeof entry.to === 'function' && typeof entry.from === 'function';
}

function removeElement ( el ) {
el.parentElement.removeChild(el);
}
Expand Down
31 changes: 23 additions & 8 deletions src/js/options.js
Expand Up @@ -15,6 +15,16 @@
return value !== undefined && value.toFixed(2);
}, 'from': Number };

function validateFormat ( entry ) {

// Any object with a to and from method is supported.
if ( isValidFormatter(entry) ) {
return true;
}

throw new Error("noUiSlider (" + VERSION + "): 'format' requires 'to' and 'from' methods.");
}

function testStep ( parsed, entry ) {

if ( !isNumeric( entry ) ) {
Expand Down Expand Up @@ -283,16 +293,14 @@
}
}

function testFormat ( parsed, entry ) {
function testAriaFormat ( parsed, entry ) {
parsed.ariaFormat = entry;
validateFormat(entry);
}

function testFormat ( parsed, entry ) {
parsed.format = entry;

// Any object with a to and from method is supported.
if ( typeof entry.to === 'function' && typeof entry.from === 'function' ) {
return true;
}

throw new Error("noUiSlider (" + VERSION + "): 'format' requires 'to' and 'from' methods.");
validateFormat(entry);
}

function testCssPrefix ( parsed, entry ) {
Expand Down Expand Up @@ -344,6 +352,7 @@
padding: 0,
animate: true,
animationDuration: 300,
ariaFormat: defaultFormatter,
format: defaultFormatter
};

Expand All @@ -362,6 +371,7 @@
'limit': { r: false, t: testLimit },
'padding': { r: false, t: testPadding },
'behaviour': { r: true, t: testBehaviour },
'ariaFormat': { r: false, t: testAriaFormat },
'format': { r: false, t: testFormat },
'tooltips': { r: false, t: testTooltips },
'cssPrefix': { r: false, t: testCssPrefix },
Expand Down Expand Up @@ -412,6 +422,11 @@
'useRequestAnimationFrame': true
};

// AriaFormat defaults to regular format, if any.
if ( options.format && !options.ariaFormat ) {
options.ariaFormat = options.format;
}

// Run all options through a testing mechanism to ensure correct
// input. It should be noted that options might get modified to
// be handled properly. E.g. wrapping integers in arrays.
Expand Down
8 changes: 5 additions & 3 deletions src/js/scope.js
@@ -1,6 +1,6 @@

// Split out the handle positioning logic so the Move event can use it, too
function checkHandlePosition ( reference, handleNumber, to, lookBackward, lookForward ) {
function checkHandlePosition ( reference, handleNumber, to, lookBackward, lookForward, getValue ) {

// For sliders with multiple handles, limit movement to the other handle.
// Apply the margin option by adding it to the handle positions.
Expand Down Expand Up @@ -48,7 +48,7 @@
to = limit(to);

// Return false if handle can't move
if ( to === reference[handleNumber] ) {
if ( to === reference[handleNumber] && !getValue ) {
return false;
}

Expand Down Expand Up @@ -101,7 +101,7 @@
// Test suggested values and apply margin, step.
function setHandle ( handleNumber, to, lookBackward, lookForward ) {

to = checkHandlePosition(scope_Locations, handleNumber, to, lookBackward, lookForward);
to = checkHandlePosition(scope_Locations, handleNumber, to, lookBackward, lookForward, false);

if ( to === false ) {
return false;
Expand Down Expand Up @@ -398,4 +398,6 @@
tooltips();
}

aria();

return scope_Self;
2 changes: 1 addition & 1 deletion src/js/scope_helpers.js
Expand Up @@ -167,7 +167,7 @@

handleNumbers.forEach(function(handleNumber, o) {

var to = checkHandlePosition(proposals, handleNumber, proposals[handleNumber] + proposal, b[o], f[o]);
var to = checkHandlePosition(proposals, handleNumber, proposals[handleNumber] + proposal, b[o], f[o], false);

// Stop if one of the handles can't move.
if ( to === false ) {
Expand Down
6 changes: 6 additions & 0 deletions src/js/structure.js
Expand Up @@ -7,6 +7,12 @@

handle.setAttribute('data-handle', handleNumber);

// https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
// 0 = focusable and reachable
handle.setAttribute('tabindex', '0');
handle.setAttribute('role', 'slider');
handle.setAttribute('aria-orientation', options.ort ? 'vertical' : 'horizontal');

if ( handleNumber === 0 ) {
addClass(handle, options.cssClasses.handleLower);
}
Expand Down

0 comments on commit 5659c0e

Please sign in to comment.