Checkboxradio: add visual focus outline to checkbox and radio buttons

This adds a focus outline matching that roughly from chrome osx

Author: arschmitz

themes/base/theme.css

@@ -98,6 +98,9 @@ a.ui-button:focus {
 	color: #2b2b2b/*{fcHover}*/;
 	text-decoration: none;
 }
+.ui-visual-focus {
+	box-shadow: 0 0 3px 1px rgb(94, 158, 214);
+}
 .ui-state-active,
 .ui-widget-content .ui-state-active,
 .ui-widget-header .ui-state-active,

ui/checkboxradio.js

@@ -117,10 +117,10 @@ $.widget( "ui.checkboxradio", {
 		this._on({
 			"change": "_toggleClasses",
 			"focus": function() {
-				this.label.addClass( "ui-state-focus" );
+				this.label.addClass( "ui-state-focus ui-visual-focus" );
 			},
 			"blur": function() {
-				this.label.removeClass( "ui-state-focus" );
+				this.label.removeClass( "ui-state-focus ui-visual-focus" );
 			}
 		});
 	},