Skip to content

I
i20rzslider
Commit 7a3b398b authored by Valentin Hervieu's avatar Valentin Hervieu
Browse files
Options

Add aria role and aria-value attributes

parent c812f4dd
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 103 additions and 31 deletions
dist/rzslider.js
View file @ 7a3b398b
......@@ -51,6 +51,7 @@
ticksValuesTooltip: null,
vertical: false,
selectionBarColor: null,
keyboardSupport: true,
scale: 1,
onStart: null,
onChange: null,
......@@ -310,6 +311,7 @@
self.updateLowHandle(self.valueToOffset(self.scope.rzSliderModel));
self.updateSelectionBar();
self.updateTicksScale();
self.updateAriaAttributes();
if (self.range) {
self.updateCmbLabel();
......@@ -323,6 +325,7 @@
self.updateSelectionBar();
self.updateTicksScale();
self.updateCmbLabel();
self.updateAriaAttributes();
}, self.options.interval);
this.scope.$on('rzSliderForceRender', function() {
......@@ -614,14 +617,43 @@
},
/**
* Adds accessibility atributes
* Adds accessibility attributes
*
* Run only once during initialization
*
* @returns {undefined}
*/
addAccessibility: function() {
this.sliderElem.attr("role", "slider");
this.minH.attr('role', 'slider');
this.updateAriaAttributes();
if (this.options.keyboardSupport)
this.minH.attr('tabindex', '0');
if (this.options.vertical)
this.minH.attr('aria-orientation', 'vertical');
if (this.range) {
this.maxH.attr('role', 'slider');
if (this.options.keyboardSupport)
this.maxH.attr('tabindex', '0');
if (this.options.vertical)
this.maxH.attr('aria-orientation', 'vertical');
}
},
/**
* Updates aria attributes according to current values
*/
updateAriaAttributes: function() {
this.minH.attr('aria-valuenow', this.scope.rzSliderModel);
this.minH.attr('aria-valuetext', this.customTrFn(this.scope.rzSliderModel));
this.minH.attr('aria-valuemin', this.minValue);
this.minH.attr('aria-valuemax', this.maxValue);
if (this.range) {
this.maxH.attr('aria-valuenow', this.scope.rzSliderHigh);
this.maxH.attr('aria-valuetext', this.customTrFn(this.scope.rzSliderHigh));
this.maxH.attr('aria-valuemin', this.minValue);
this.maxH.attr('aria-valuemax', this.maxValue);
}
},
/**
......@@ -1126,9 +1158,11 @@
this.ticks.on('touchstart', angular.bind(this, this.onStart, null, null));
this.ticks.on('touchstart', angular.bind(this, this.onMove, this.ticks));
this.minH.on('focus', angular.bind(this, this.onPointerFocus, this.minH, 'rzSliderModel'))
if (this.range) {
this.maxH.on('focus', angular.bind(this, this.onPointerFocus, this.maxH, 'rzSliderHigh'));
if (this.options.keyboardSupport) {
this.minH.on('focus', angular.bind(this, this.onPointerFocus, this.minH, 'rzSliderModel'))
if (this.range) {
this.maxH.on('focus', angular.bind(this, this.onPointerFocus, this.maxH, 'rzSliderHigh'));
}
}
},
......@@ -1172,7 +1206,9 @@
}
pointer.addClass('rz-active');
pointer[0].focus();
if (this.options.keyboardSupport)
pointer[0].focus();
ehMove = angular.bind(this, this.dragging.active ? this.onDragMove : this.onMove, pointer);
ehEnd = angular.bind(this, this.onEnd, ehMove);
......@@ -1221,29 +1257,26 @@
onEnd: function(ehMove, event) {
var moveEventName = this.getEventNames(event).moveEvent;
//this.minH.removeClass('rz-active');
//this.maxH.removeClass('rz-active');
if (!this.options.keyboardSupport) {
this.minH.removeClass('rz-active');
this.maxH.removeClass('rz-active');
this.tracking = '';
}
this.dragging.active = false;
$document.off(moveEventName, ehMove);
this.scope.$emit('slideEnded');
//this.tracking = '';
this.dragging.active = false;
this.callOnEnd();
},
onPointerFocus: function(pointer, ref, event) {
//if (this.tracking === ref) return;
this.tracking = ref;
console.info('focused', ref);
pointer.one('blur', angular.bind(this, this.onPointerBlur, pointer));
pointer.on('keydown', angular.bind(this, this.onKeyboardEvent));
pointer.addClass('rz-active');
},
onPointerBlur: function(pointer, event) {
console.info('blured', this.tracking);
pointer.off('keydown');
this.tracking = '';
pointer.removeClass('rz-active');
......@@ -1386,6 +1419,7 @@
switched = true;
this.scope[this.tracking] = this.scope.rzSliderHigh;
this.updateHandles(this.tracking, this.maxH.rzsp);
this.updateAriaAttributes();
this.tracking = 'rzSliderHigh';
this.minH.removeClass('rz-active');
this.maxH.addClass('rz-active');
......@@ -1394,6 +1428,7 @@
switched = true;
this.scope[this.tracking] = this.scope.rzSliderModel;
this.updateHandles(this.tracking, this.minH.rzsp);
this.updateAriaAttributes();
this.tracking = 'rzSliderModel';
this.maxH.removeClass('rz-active');
this.minH.addClass('rz-active');
......@@ -1404,6 +1439,7 @@
if (this.scope[this.tracking] !== newValue) {
this.scope[this.tracking] = newValue;
this.updateHandles(this.tracking, newOffset);
this.updateAriaAttributes();
valueChanged = true;
}
......
dist/rzslider.min.js
View file @ 7a3b398b
This diff is collapsed.
src/rzslider.js
View file @ 7a3b398b
......@@ -51,6 +51,7 @@
ticksValuesTooltip: null,
vertical: false,
selectionBarColor: null,
keyboardSupport: true,
scale: 1,
onStart: null,
onChange: null,
......@@ -310,6 +311,7 @@
self.updateLowHandle(self.valueToOffset(self.scope.rzSliderModel));
self.updateSelectionBar();
self.updateTicksScale();
self.updateAriaAttributes();
if (self.range) {
self.updateCmbLabel();
......@@ -323,6 +325,7 @@
self.updateSelectionBar();
self.updateTicksScale();
self.updateCmbLabel();
self.updateAriaAttributes();
}, self.options.interval);
this.scope.$on('rzSliderForceRender', function() {
......@@ -614,14 +617,43 @@
},
/**
* Adds accessibility atributes
* Adds accessibility attributes
*
* Run only once during initialization
*
* @returns {undefined}
*/
addAccessibility: function() {
this.sliderElem.attr("role", "slider");
this.minH.attr('role', 'slider');
this.updateAriaAttributes();
if (this.options.keyboardSupport)
this.minH.attr('tabindex', '0');
if (this.options.vertical)
this.minH.attr('aria-orientation', 'vertical');
if (this.range) {
this.maxH.attr('role', 'slider');
if (this.options.keyboardSupport)
this.maxH.attr('tabindex', '0');
if (this.options.vertical)
this.maxH.attr('aria-orientation', 'vertical');
}
},
/**
* Updates aria attributes according to current values
*/
updateAriaAttributes: function() {
this.minH.attr('aria-valuenow', this.scope.rzSliderModel);
this.minH.attr('aria-valuetext', this.customTrFn(this.scope.rzSliderModel));
this.minH.attr('aria-valuemin', this.minValue);
this.minH.attr('aria-valuemax', this.maxValue);
if (this.range) {
this.maxH.attr('aria-valuenow', this.scope.rzSliderHigh);
this.maxH.attr('aria-valuetext', this.customTrFn(this.scope.rzSliderHigh));
this.maxH.attr('aria-valuemin', this.minValue);
this.maxH.attr('aria-valuemax', this.maxValue);
}
},
/**
......@@ -1126,9 +1158,11 @@
this.ticks.on('touchstart', angular.bind(this, this.onStart, null, null));
this.ticks.on('touchstart', angular.bind(this, this.onMove, this.ticks));
this.minH.on('focus', angular.bind(this, this.onPointerFocus, this.minH, 'rzSliderModel'))
if (this.range) {
this.maxH.on('focus', angular.bind(this, this.onPointerFocus, this.maxH, 'rzSliderHigh'));
if (this.options.keyboardSupport) {
this.minH.on('focus', angular.bind(this, this.onPointerFocus, this.minH, 'rzSliderModel'))
if (this.range) {
this.maxH.on('focus', angular.bind(this, this.onPointerFocus, this.maxH, 'rzSliderHigh'));
}
}
},
......@@ -1172,7 +1206,9 @@
}
pointer.addClass('rz-active');
pointer[0].focus();
if (this.options.keyboardSupport)
pointer[0].focus();
ehMove = angular.bind(this, this.dragging.active ? this.onDragMove : this.onMove, pointer);
ehEnd = angular.bind(this, this.onEnd, ehMove);
......@@ -1221,29 +1257,26 @@
onEnd: function(ehMove, event) {
var moveEventName = this.getEventNames(event).moveEvent;
//this.minH.removeClass('rz-active');
//this.maxH.removeClass('rz-active');
if (!this.options.keyboardSupport) {
this.minH.removeClass('rz-active');
this.maxH.removeClass('rz-active');
this.tracking = '';
}
this.dragging.active = false;
$document.off(moveEventName, ehMove);
this.scope.$emit('slideEnded');
//this.tracking = '';
this.dragging.active = false;
this.callOnEnd();
},
onPointerFocus: function(pointer, ref, event) {
//if (this.tracking === ref) return;
this.tracking = ref;
console.info('focused', ref);
pointer.one('blur', angular.bind(this, this.onPointerBlur, pointer));
pointer.on('keydown', angular.bind(this, this.onKeyboardEvent));
pointer.addClass('rz-active');
},
onPointerBlur: function(pointer, event) {
console.info('blured', this.tracking);
pointer.off('keydown');
this.tracking = '';
pointer.removeClass('rz-active');
......@@ -1386,6 +1419,7 @@
switched = true;
this.scope[this.tracking] = this.scope.rzSliderHigh;
this.updateHandles(this.tracking, this.maxH.rzsp);
this.updateAriaAttributes();
this.tracking = 'rzSliderHigh';
this.minH.removeClass('rz-active');
this.maxH.addClass('rz-active');
......@@ -1394,6 +1428,7 @@
switched = true;
this.scope[this.tracking] = this.scope.rzSliderModel;
this.updateHandles(this.tracking, this.minH.rzsp);
this.updateAriaAttributes();
this.tracking = 'rzSliderModel';
this.maxH.removeClass('rz-active');
this.minH.addClass('rz-active');
......@@ -1404,6 +1439,7 @@
if (this.scope[this.tracking] !== newValue) {
this.scope[this.tracking] = newValue;
this.updateHandles(this.tracking, newOffset);
this.updateAriaAttributes();
valueChanged = true;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment