Add focus highlight to radio buttons and checkboxes

Signed-off-by: Matthias Becker <becker.matthias@gmail.com>
nextcloud · Nov 22, 2016 · 99005eb · 99005eb
1 parent 150b86a
commit 99005eb
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 0 deletions.
diff --git a/apps/theming/lib/Controller/ThemingController.php b/apps/theming/lib/Controller/ThemingController.php
@@ -347,6 +347,15 @@ public function getStylesheet() {
 				'opacity: 0.4;' .
 				'color: '.$textColor.';'.
 				"}\n";
+
+			$responseCss .= 'input[type="text"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="time"]:focus, input[type="date"]:focus, textarea:focus, select:focus, button:focus, .button:focus, input[type="submit"]:focus, input[type="button"]:focus, #quota:focus, .pager li a:focus { '.
+							'	border: 1px solid ' . $color . ";" .
+							"}\n";
+
+			$responseCss .= 'input[type="submit"]:focus, input[type="button"]:focus, select:focus, button:focus, .button:focus {' .
+				            ' color: ' . $color. ';'.
+							"}\n";
+
 			$responseCss .= '.ui-widget-header { border: 1px solid ' . $color . '; background: '. $color . '; color: #ffffff;' . "}\n";
 			$responseCss .= '.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {' .
 				'border: 1px solid ' . $color . ';' .

diff --git a/apps/theming/tests/Controller/ThemingControllerTest.php b/apps/theming/tests/Controller/ThemingControllerTest.php
@@ -456,6 +456,15 @@ public function testGetStylesheetWithOnlyColor() {
 			'opacity: 0.4;' .
 			'color: #ffffff;'.
 			"}\n";
+
+		$expectedData .= 'input[type="text"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="time"]:focus, input[type="date"]:focus, textarea:focus, select:focus, button:focus, .button:focus, input[type="submit"]:focus, input[type="button"]:focus, #quota:focus, .pager li a:focus { '.
+			'	border: 1px solid ' . $color . ";" .
+			"}\n";
+
+		$expectedData .= 'input[type="submit"]:focus, input[type="button"]:focus, select:focus, button:focus, .button:focus {' .
+			' color: ' . $color. ';'.
+			"}\n";
+
 		$expectedData .= '.ui-widget-header { border: 1px solid ' . $color . '; background: '. $color . '; color: #ffffff;' . "}\n";
 		$expectedData .= '.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {' .
 			'border: 1px solid ' . $color . ';' .
@@ -544,6 +553,13 @@ public function testGetStylesheetWithOnlyColorInvert() {
 			'opacity: 0.4;' .
 			'color: #000000;'.
 			"}\n";
+		$expectedData .= 'input[type="text"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="time"]:focus, input[type="date"]:focus, textarea:focus, select:focus, button:focus, .button:focus, input[type="submit"]:focus, input[type="button"]:focus, #quota:focus, .pager li a:focus { '.
+			'	border: 1px solid ' . $color . ";" .
+			"}\n";
+
+		$expectedData .= 'input[type="submit"]:focus, input[type="button"]:focus, select:focus, button:focus, .button:focus {' .
+			' color: ' . $color. ';'.
+			"}\n";
 		$expectedData .= '.ui-widget-header { border: 1px solid ' . $color . '; background: '. $color . '; color: #ffffff;' . "}\n";
 		$expectedData .= '.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {' .
 			'border: 1px solid ' . $color . ';' .
@@ -719,6 +735,13 @@ public function testGetStylesheetWithAllCombined() {
 			'opacity: 0.4;' .
 			'color: #ffffff;'.
 			"}\n";
+		$expectedData .= 'input[type="text"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="time"]:focus, input[type="date"]:focus, textarea:focus, select:focus, button:focus, .button:focus, input[type="submit"]:focus, input[type="button"]:focus, #quota:focus, .pager li a:focus { '.
+			'	border: 1px solid ' . $color . ";" .
+			"}\n";
+
+		$expectedData .= 'input[type="submit"]:focus, input[type="button"]:focus, select:focus, button:focus, .button:focus {' .
+			' color: ' . $color. ';'.
+			"}\n";
 		$expectedData .= '.ui-widget-header { border: 1px solid ' . $color . '; background: '. $color . '; color: #ffffff;' . "}\n";
 		$expectedData .= '.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {' .
 			'border: 1px solid ' . $color . ';' .
@@ -824,6 +847,13 @@ public function testGetStylesheetWithAllCombinedInverted() {
 			'opacity: 0.4;' .
 			'color: #000000;'.
 			"}\n";
+		$expectedData .= 'input[type="text"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="time"]:focus, input[type="date"]:focus, textarea:focus, select:focus, button:focus, .button:focus, input[type="submit"]:focus, input[type="button"]:focus, #quota:focus, .pager li a:focus { '.
+			'	border: 1px solid ' . $color . ";" .
+			"}\n";
+
+		$expectedData .= 'input[type="submit"]:focus, input[type="button"]:focus, select:focus, button:focus, .button:focus {' .
+			' color: ' . $color. ';'.
+			"}\n";
 		$expectedData .= '.ui-widget-header { border: 1px solid ' . $color . '; background: '. $color . '; color: #ffffff;' . "}\n";
 		$expectedData .= '.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {' .
 			'border: 1px solid ' . $color . ';' .

diff --git a/core/css/inputs.css b/core/css/inputs.css
@@ -81,6 +81,26 @@ textarea:hover, textarea:focus, textarea:active {
 	opacity: 1;
 }
 
+
+input[type="text"]:focus,
+input[type="password"]:focus,
+input[type="search"]:focus,
+input[type="number"]:focus,
+input[type="email"]:focus,
+input[type="tel"]:focus,
+input[type="url"]:focus,
+input[type="time"]:focus,
+input[type="date"]:focus,
+textarea:focus,
+select:focus,
+button:focus, .button:focus,
+input[type="submit"]:focus,
+input[type="button"]:focus,
+#quota:focus,
+.pager li a:focus {
+	border: 1px solid #0082c9;
+}
+
 input[type="checkbox"].checkbox {
 	position: absolute;
 	left:-10000px;
@@ -410,6 +430,11 @@ input[type="submit"] img, input[type="button"] img, button img, .button img { cu
 	box-shadow: none;
 }
 
+input[type="submit"]:focus, input[type="button"]:focus, select:focus,
+button:focus, .button:focus {
+	color: #0082c9;
+}
+
 /* disabled input fields and buttons */
 input:disabled, input:disabled:hover, input:disabled:focus,
 button:disabled, button:disabled:hover, button:disabled:focus,