Permalink
Browse files

Add keyboard accessibility to square control. Props @lessbloat

* use up, down, right, left on puck when focused
* multiply by 10 when using alt key
* default :focus styles for the puck
* keep :focus on the puck after clicking
* remove vendor prefixes in CSS
  • Loading branch information...
1 parent 810a86c commit cec6f9139d6a1fc9c4f2ba2fdf229c2fbc1df6d4 @mattwiebe mattwiebe committed Nov 19, 2012
Showing with 46 additions and 12 deletions.
  1. +6 −7 src/iris.css
  2. +39 −4 src/iris.js
  3. +1 −1 src/iris.min.css
View
@@ -40,9 +40,7 @@
.iris-picker .iris-square-inner,
.iris-picker .iris-palette {
border-radius: 3px;
- -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.4);
- -moz-box-shadow: inset 0 0 5px rgba(0,0,0,0.4);
- box-shadow: inset 0 0 5px rgba(0,0,0,0.4);
+ box-shadow: inset 0 0 5px rgba(0,0,0,0.4);
height: 100%;
width: 12.5%;
float: left;
@@ -112,7 +110,6 @@
top: -3px;
bottom: -3px;
border: 2px solid #fff;
- -webkit-border-radius: 3px;
border-radius: 3px;
}
.iris-picker .iris-slider-offset {
@@ -125,9 +122,7 @@
.iris-picker .iris-square-handle {
background: transparent;
border: 5px solid #aaa;
- -webkit-border-radius: 6px;
- -moz-border-radius: 50%;
- border-radius: 50%;
+ border-radius: 50%;
border-color: rgba(128,128,128,.5);
box-shadow:none;
width: 12px;
@@ -145,6 +140,10 @@
.iris-picker .iris-square-handle:hover {
border-color: #999;
}
+.iris-picker .iris-square-value:focus .iris-square-handle {
+ box-shadow: 0 0 2px rgba(0,0,0,.75);
+ opacity: .8;
+}
.iris-picker .iris-square-handle:hover::after {
border-color: #fff;
}
View
@@ -5,7 +5,7 @@
var gradientType = false;
var vendorPrefixes = ['-moz-', '-webkit-', '-o-', '-ms-' ];
// This is manually copied from iris.min.css until I can figure out how to do it without
- var _css = '.iris-picker{display:block;position:relative}.iris-error{background-color:#ffafaf}.iris-border{border-radius:3px;border:1px solid #aaa;width:200px;background-color:#fff}.iris-picker-inner{position:absolute;top:0;right:0;left:0;bottom:0}.iris-border .iris-picker-inner{top:10px;right:10px;left:10px;bottom:10px}.iris-picker .iris-square-inner{position:absolute;left:0;right:0;top:0;bottom:0}.iris-picker .iris-square,.iris-picker .iris-slider,.iris-picker .iris-square-inner,.iris-picker .iris-palette{border-radius:3px;-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.4);-moz-box-shadow:inset 0 0 5px rgba(0,0,0,0.4);box-shadow:inset 0 0 5px rgba(0,0,0,0.4);height:100%;width:12.5%;float:left;margin-right:5%}.iris-picker .iris-square{width:76%;margin-right:10%;position:relative}.iris-picker .iris-square-inner{width:auto;margin:0}.iris-ie-9 .iris-square,.iris-ie-9 .iris-slider,.iris-ie-9 .iris-square-inner,.iris-ie-9 .iris-palette{box-shadow:none;border-radius:0}.iris-ie-9 .iris-square,.iris-ie-9 .iris-slider,.iris-ie-9 .iris-palette{outline:1px solid rgba(0,0,0,.1)}.iris-ie-lt9 .iris-square,.iris-ie-lt9 .iris-slider,.iris-ie-lt9 .iris-square-inner,.iris-ie-lt9 .iris-palette{outline:1px solid #aaa}.iris-ie-lt9 .iris-square .ui-slider-handle{outline:1px solid #aaa;background-color:#fff;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"}.iris-ie-lt9 .iris-square .iris-square-handle{background:none;border:3px solid #fff;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"}.iris-picker .iris-strip{margin-right:0;position:relative}.iris-picker .iris-strip .ui-slider-handle{position:absolute;background:none;right:-3px;left:-3px;border:4px solid #aaa;border-width:4px 3px;width:auto;height:6px;border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.2);opacity:.9;z-index:5}.iris-strip .ui-slider-handle:before{content:" ";position:absolute;left:-2px;right:-2px;top:-3px;bottom:-3px;border:2px solid #fff;-webkit-border-radius:3px;border-radius:3px}.iris-picker .iris-slider-offset{position:absolute;top:11px;left:0;right:0;bottom:-3px}.iris-picker .iris-square-handle{background:transparent;border:5px solid #aaa;-webkit-border-radius:6px;-moz-border-radius:50%;border-radius:50%;border-color:rgba(128,128,128,.5);box-shadow:none;width:12px;height:12px;position:absolute;left:-10px;top:-10px;cursor:move;opacity:1;z-index:10}.iris-picker .ui-state-focus .iris-square-handle{opacity:.8}.iris-picker .iris-square-handle:hover{border-color:#999}.iris-picker .iris-square-handle:hover::after{border-color:#fff}.iris-picker .iris-square-handle::after{position:absolute;bottom:-4px;right:-4px;left:-4px;top:-4px;border:3px solid #f9f9f9;border-color:rgba(255,255,255,.8);border-radius:50%;content:" "}.iris-picker .iris-square-value{width:8px;height:8px;position:absolute}.iris-ie-lt9 .iris-square-value,.iris-mozilla .iris-square-value{width:1px;height:1px}.iris-palette-container{position:absolute;bottom:0;left:0;margin:0;padding:0}.iris-border .iris-palette-container{left:10px;bottom:10px}.iris-picker .iris-palette{margin:0;list-style-type:none;cursor:pointer}';
+ var _css = '.iris-picker{display:block;position:relative}.iris-error{background-color:#ffafaf}.iris-border{border-radius:3px;border:1px solid #aaa;width:200px;background-color:#fff}.iris-picker-inner{position:absolute;top:0;right:0;left:0;bottom:0}.iris-border .iris-picker-inner{top:10px;right:10px;left:10px;bottom:10px}.iris-picker .iris-square-inner{position:absolute;left:0;right:0;top:0;bottom:0}.iris-picker .iris-square,.iris-picker .iris-slider,.iris-picker .iris-square-inner,.iris-picker .iris-palette{border-radius:3px;box-shadow:inset 0 0 5px rgba(0,0,0,0.4);height:100%;width:12.5%;float:left;margin-right:5%}.iris-picker .iris-square{width:76%;margin-right:10%;position:relative}.iris-picker .iris-square-inner{width:auto;margin:0}.iris-ie-9 .iris-square,.iris-ie-9 .iris-slider,.iris-ie-9 .iris-square-inner,.iris-ie-9 .iris-palette{box-shadow:none;border-radius:0}.iris-ie-9 .iris-square,.iris-ie-9 .iris-slider,.iris-ie-9 .iris-palette{outline:1px solid rgba(0,0,0,.1)}.iris-ie-lt9 .iris-square,.iris-ie-lt9 .iris-slider,.iris-ie-lt9 .iris-square-inner,.iris-ie-lt9 .iris-palette{outline:1px solid #aaa}.iris-ie-lt9 .iris-square .ui-slider-handle{outline:1px solid #aaa;background-color:#fff;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"}.iris-ie-lt9 .iris-square .iris-square-handle{background:none;border:3px solid #fff;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"}.iris-picker .iris-strip{margin-right:0;position:relative}.iris-picker .iris-strip .ui-slider-handle{position:absolute;background:none;right:-3px;left:-3px;border:4px solid #aaa;border-width:4px 3px;width:auto;height:6px;border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.2);opacity:.9;z-index:5}.iris-strip .ui-slider-handle:before{content:" ";position:absolute;left:-2px;right:-2px;top:-3px;bottom:-3px;border:2px solid #fff;border-radius:3px}.iris-picker .iris-slider-offset{position:absolute;top:11px;left:0;right:0;bottom:-3px}.iris-picker .iris-square-handle{background:transparent;border:5px solid #aaa;border-radius:50%;border-color:rgba(128,128,128,.5);box-shadow:none;width:12px;height:12px;position:absolute;left:-10px;top:-10px;cursor:move;opacity:1;z-index:10}.iris-picker .ui-state-focus .iris-square-handle{opacity:.8}.iris-picker .iris-square-handle:hover{border-color:#999}.iris-picker .iris-square-value:focus .iris-square-handle{box-shadow:0 0 2px rgba(0,0,0,.75);opacity:.8}.iris-picker .iris-square-handle:hover::after{border-color:#fff}.iris-picker .iris-square-handle::after{position:absolute;bottom:-4px;right:-4px;left:-4px;top:-4px;border:3px solid #f9f9f9;border-color:rgba(255,255,255,.8);border-radius:50%;content:" "}.iris-picker .iris-square-value{width:8px;height:8px;position:absolute}.iris-ie-lt9 .iris-square-value,.iris-mozilla .iris-square-value{width:1px;height:1px}.iris-palette-container{position:absolute;bottom:0;left:0;margin:0;padding:0}.iris-border .iris-palette-container{left:10px;bottom:10px}.iris-picker .iris-palette{margin:0;list-style-type:none;cursor:pointer}';
// Bail for IE <= 7
if ( nonGradientIE && parseInt( $.browser.version, 10 ) <= 7 ) {
return $.fn.iris = $.noop;
@@ -492,10 +492,45 @@
var focusClass = 'ui-state-focus';
if (event.type === 'mousedown' ) {
self.picker.find( '.' + focusClass ).removeClass( focusClass ).blur();
- $(this).addClass( focusClass );
+ $(this).addClass( focusClass ).focus();
} else {
- $(this).removeClass( 'ui-state-focus' );
+ $(this).removeClass( focusClass );
+ }
+ }).on("keydown", function( event ) {
+ var container = controls.square,
+ draggable = controls.squareDrag,
+ position = draggable.position(),
+ distance = self.options.width / 100, // Distance in pixels the draggable should be moved: 1 "stop"
+ squareOffset, newPosition;
+
+ // make alt key go "10"
+ if ( event.altKey )
+ distance *= 10;
+
+ // Reposition if one of the directional keys is pressed
+ switch ( event.keyCode ) {
+ case 37: position.left -= distance; break; // Left
+ case 38: position.top -= distance; break; // Up
+ case 39: position.left += distance; break; // Right
+ case 40: position.top += distance; break; // Down
+ default: return true; // Exit and bubble
+ }
+
+ // Keep draggable within container
+ if (position.left >= 0 && position.top >= 0 &&
+ position.left + draggable.width() <= container.width() &&
+ position.top + draggable.height() <= container.height()) {
+ draggable.css(position);
}
+
+ squareOffset = container.offset();
+ newPosition = {
+ top: draggable.offset().top - squareOffset.top,
+ left: draggable.offset().left - squareOffset.left
+ };
+ self._squareDrag( event, { position: newPosition });
+
+ event.preventDefault();
});
// allow clicking on the square to move there and keep dragging
@@ -657,4 +692,4 @@
// add CSS
$('<style id="iris-css">' + _css + '</style>').appendTo( 'head' );
-}( jQuery ));
+}( jQuery ));
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.

0 comments on commit cec6f91

Please sign in to comment.