rheostat - npm Package Compare versions

Comparing version 1.1.2 to 2.0.0

CHANGELOG.md

@@ -8,2 +8,9 @@ # Change Log
 
+## [2.0.0] - 2016-08-22
+
+### Changed
+
+- A11y for tabbing between handles.
+- Changed slider handles from div to button.
+
 ## [1.1.2] - 2016-07-08
@@ -10,0 +17,0 @@

lib/algorithms/geometric.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports["default"] = {
+exports.default = {
   getPosition: function () {
@@ -9,0 +9,0 @@ function getPosition(x, min, max) {

lib/algorithms/linear.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports["default"] = {
+exports.default = {
   getPosition: function () {
@@ -9,0 +9,0 @@ function getPosition(value, min, max) {

lib/algorithms/log10.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports["default"] = {
+exports.default = {
   getPosition: function () {
@@ -9,0 +9,0 @@ function getPosition(value, min, max) {

lib/Slider.js

 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 Object.defineProperty(exports, "__esModule", {
@@ -34,3 +36,14 @@ value: true
 
-exports['default'] = _react2['default'].createClass({
+var Button = _react2.default.createClass({
+  displayName: 'Button',
+  render: function () {
+    function render() {
+      return _react2.default.createElement('button', _extends({}, this.props, { type: 'button' }));
+    }
+
+    return render;
+  }()
+});
+
+exports.default = _react2.default.createClass({
   displayName: 'Slider',
@@ -52,4 +65,2 @@
     handle: PropTypeReactComponent,
-    // the tab index to start each handler on
-    handleTabIndexStart: _react.PropTypes.number,
     // the maximum possible value
@@ -93,7 +104,6 @@ max: _react.PropTypes.number,
       return {
-        algorithm: _linear2['default'],
+        algorithm: _linear2.default,
         className: '',
         disabled: false,
-        handle: 'div',
-        handleTabIndexStart: 1,
+        handle: Button,
         max: SliderConstants.PERCENT_FULL,
@@ -333,4 +343,4 @@ min: SliderConstants.PERCENT_EMPTY,
           } else if (currentIndex > 0) {
-              proposedValue = snapPoints[currentIndex - 1];
-            }
+            proposedValue = snapPoints[currentIndex - 1];
+          }
         }
@@ -757,3 +767,2 @@ } else if (keyCode === SliderConstants.KEYS.HOME) {
       var Handle = _props5.handle;
-      var handleTabIndexStart = _props5.handleTabIndexStart;
       var max = _props5.max;
@@ -767,3 +776,3 @@ var min = _props5.min;
 
-      return _react2['default'].createElement(
+      return _react2.default.createElement(
         'div',
@@ -776,7 +785,7 @@ {
         },
-        _react2['default'].createElement('div', { className: 'rheostat-background' }),
+        _react2.default.createElement('div', { className: 'rheostat-background' }),
         this.state.handlePos.map(function (pos, idx) {
           var handleStyle = orientation === 'vertical' ? { top: String(pos) + '%', position: 'absolute' } : { left: String(pos) + '%', position: 'absolute' };
 
-          return _react2['default'].createElement(Handle, {
+          return _react2.default.createElement(Handle, {
             'aria-valuemax': _this8.getMaxValue(idx),
@@ -794,3 +803,3 @@ 'aria-valuemin': _this8.getMinValue(idx),
             style: handleStyle,
-            tabIndex: handleTabIndexStart + idx
+            tabIndex: 0
           });
@@ -803,3 +812,3 @@ }),
 
-          return _react2['default'].createElement(ProgressBar, {
+          return _react2.default.createElement(ProgressBar, {
             className: 'rheostat-progress',
@@ -814,3 +823,3 @@ key: idx,
 
-          return _react2['default'].createElement(
+          return _react2.default.createElement(
             PitComponent,
@@ -817,0 +826,0 @@ { key: n, style: pitStyle },

package.json

 {
   "name": "rheostat",
-  "version": "1.1.2",
+  "version": "2.0.0",
   "description": "Rheostat is a www, mobile, and accessible slider component built with React",
@@ -5,0 +5,0 @@ "main": "lib/Slider.js",

README.md

@@ -29,9 +29,2 @@ # Rheostat
 
-The tab index to start the first handle on, by default 1. Successive handles will have a tabIndex
-of consecutive increasing order.
-
-```js
-  handleTabIndexStart: PropTypes.number
-```
-
 Custom React component overrides for both the handles, and the "progress" bar.
@@ -38,0 +31,0 @@

src/Slider.jsx

@@ -16,2 +16,8 @@ import * as SliderConstants from './constants/SliderConstants';
 
+const Button = React.createClass({
+  render() {
+    return <button {...this.props} type="button" />;
+  },
+});
+
 export default React.createClass({
@@ -32,4 +38,2 @@ propTypes: {
     handle: PropTypeReactComponent,
-    // the tab index to start each handler on
-    handleTabIndexStart: PropTypes.number,
     // the maximum possible value
@@ -75,4 +79,3 @@ max: PropTypes.number,
       disabled: false,
-      handle: 'div',
-      handleTabIndexStart: 1,
+      handle: Button,
       max: SliderConstants.PERCENT_FULL,
@@ -588,3 +591,2 @@ min: SliderConstants.PERCENT_EMPTY,
       handle: Handle,
-      handleTabIndexStart,
       max,
@@ -625,3 +627,3 @@ min,
               style={handleStyle}
-              tabIndex={handleTabIndexStart + idx}
+              tabIndex={0}
             />
@@ -628,0 +630,0 @@ );

test/algorithms/geometric-test.js

@@ -24,3 +24,3 @@ import { assert } from 'chai';
 
-  it('should handle the minimum end of the range correctly', () => {
+  it('should handle the maximum end of the range correctly', () => {
     const min = casual.integer(0, 899);
@@ -27,0 +27,0 @@ const max = casual.integer(900, 1000);

No alert changes

Improved metrics

Total package byte prevSize

710160

increased by0.02%

Lines of code

2086

increased by0.34%

Worsened metrics

Number of lines in readme file

127

decreased by-5.22%

No dependency changes