From 5d5153906c2e50a60002605046e4c315b17fcf5a Mon Sep 17 00:00:00 2001
From: Bas Brands <bas@moodle.com>
Date: Tue, 9 Jun 2020 15:56:51 +0200
Subject: [PATCH] MDL-68864 qtype_multichoice: clearchoice button styles

- display the clearchoice link as a button to improve the way
it looks when using keyboard focus
---
 question/type/multichoice/renderer.php | 3 ++-
 theme/boost/scss/moodle/question.scss  | 8 --------
 theme/boost/style/moodle.css           | 7 -------
 theme/classic/style/moodle.css         | 7 -------
 4 files changed, 2 insertions(+), 23 deletions(-)

diff --git a/question/type/multichoice/renderer.php b/question/type/multichoice/renderer.php
index 8a09a694499..966edcabfb5 100644
--- a/question/type/multichoice/renderer.php
+++ b/question/type/multichoice/renderer.php
@@ -307,7 +307,8 @@ class qtype_multichoice_single_renderer extends qtype_multichoice_renderer_base
         // Adds an hidden radio that will be checked to give the impression the choice has been cleared.
         $clearchoiceradio = html_writer::empty_tag('input', $clearchoiceradioattrs);
         $clearchoiceradio .= html_writer::link('', get_string('clearchoice', 'qtype_multichoice'),
-            ['for' => $clearchoiceid, 'role' => 'button', 'tabindex' => $linktabindex]);
+            ['for' => $clearchoiceid, 'role' => 'button', 'tabindex' => $linktabindex,
+            'class' => 'btn btn-link ml-4 pl-1 mt-2']);
 
         // Now wrap the radio and label inside a div.
         $result = html_writer::tag('div', $clearchoiceradio, ['id' => $clearchoicefieldname, 'class' => $cssclass]);
diff --git a/theme/boost/scss/moodle/question.scss b/theme/boost/scss/moodle/question.scss
index d4d19a0b626..4ed5c9a5c8c 100644
--- a/theme/boost/scss/moodle/question.scss
+++ b/theme/boost/scss/moodle/question.scss
@@ -305,14 +305,6 @@ body.path-question-type {
 .que.multichoice .answer div.r1 .icon.fa-remove {
     text-indent: 0;
 }
-.qtype_multichoice_clearchoice {
-    padding-top: 10px;
-    a {
-        cursor: pointer;
-        text-decoration: underline;
-        padding-left: 30px;
-    }
-}
 
 .formulation input[type="text"],
 .formulation select {
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index af0ee78f041..c9fc67172b4 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -15604,13 +15604,6 @@ body.path-question-type {
 .que.multichoice .answer div.r1 .icon.fa-remove {
   text-indent: 0; }
 
-.qtype_multichoice_clearchoice {
-  padding-top: 10px; }
-  .qtype_multichoice_clearchoice a {
-    cursor: pointer;
-    text-decoration: underline;
-    padding-left: 30px; }
-
 .formulation input[type="text"],
 .formulation select {
   width: auto;
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 82272750838..7be61849309 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -15827,13 +15827,6 @@ body.path-question-type {
 .que.multichoice .answer div.r1 .icon.fa-remove {
   text-indent: 0; }
 
-.qtype_multichoice_clearchoice {
-  padding-top: 10px; }
-  .qtype_multichoice_clearchoice a {
-    cursor: pointer;
-    text-decoration: underline;
-    padding-left: 30px; }
-
 .formulation input[type="text"],
 .formulation select {
   width: auto;
-- 
2.17.1