From 99005eb751d1384b4dcf16593baee0dcddfec29e Mon Sep 17 00:00:00 2001 From: Matthias Becker Date: Tue, 22 Nov 2016 14:30:25 +0100 Subject: [PATCH] Add focus highlight to radio buttons and checkboxes Signed-off-by: Matthias Becker --- .../lib/Controller/ThemingController.php | 9 ++++++ .../Controller/ThemingControllerTest.php | 30 +++++++++++++++++++ core/css/inputs.css | 25 ++++++++++++++++ 3 files changed, 64 insertions(+) diff --git a/apps/theming/lib/Controller/ThemingController.php b/apps/theming/lib/Controller/ThemingController.php index f274d2458873e..5d8bdb052091a 100644 --- 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 index 4325e1988b2a8..2847849dc12d3 100644 --- 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 index 37fedb9a44eff..e6fadf6aabe4b 100644 --- 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,