From 0cf1200958a54983c929cf25e7fd0f3dc01eadf8 Mon Sep 17 00:00:00 2001
From: Aurora Virmasalo <aurora.virmasalo@siili.com>
Date: Tue, 10 Dec 2024 15:21:09 +0200
Subject: [PATCH] Fix new question page keyboard problems

---
 .../basequestion/multiple-choice-option.component.ts   |  4 ++--
 .../question/basequestion/multiple-choice.component.ts |  4 ++--
 .../weighted-multiple-choice-option.component.ts       |  8 ++++++--
 .../app/question/examquestion/multichoice.component.ts |  8 ++++++--
 .../examquestion/weighted-multichoice.component.ts     | 10 +++++-----
 5 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/ui/src/app/question/basequestion/multiple-choice-option.component.ts b/ui/src/app/question/basequestion/multiple-choice-option.component.ts
index ac6816824..9e71fa29a 100644
--- a/ui/src/app/question/basequestion/multiple-choice-option.component.ts
+++ b/ui/src/app/question/basequestion/multiple-choice-option.component.ts
@@ -45,9 +45,9 @@ import { QuestionService } from 'src/app/question/question.service';
                 </div>
 
                 @if (allowRemoval) {
-                    <div (click)="removeOption()" class="col-md-1 question-option-trash">
+                    <button (click)="removeOption()" class="col-md-1 question-option-trash btn btn-link">
                         <i class="bi-trash" title="{{ 'i18n_remove' | translate }}"></i>
-                    </div>
+                    </button>
                 }
             </div>
         </div>
diff --git a/ui/src/app/question/basequestion/multiple-choice.component.ts b/ui/src/app/question/basequestion/multiple-choice.component.ts
index 9f51855da..81fab1bca 100644
--- a/ui/src/app/question/basequestion/multiple-choice.component.ts
+++ b/ui/src/app/question/basequestion/multiple-choice.component.ts
@@ -89,10 +89,10 @@ import { WeightedMultipleChoiceOptionEditorComponent } from './weighted-multiple
         }
         <div class="row mt-3">
             <div class="col-md-12">
-                <a (click)="addNewOption()" class="attachment-link pointer">
+                <button (click)="addNewOption()" class="attachment-link pointer btn btn-sm btn-link">
                     <i class="bi-plus"></i>
                     {{ 'i18n_question_add_new_option' | translate }}
-                </a>
+                </button>
             </div>
         </div>
     `,
diff --git a/ui/src/app/question/basequestion/weighted-multiple-choice-option.component.ts b/ui/src/app/question/basequestion/weighted-multiple-choice-option.component.ts
index b9f3d479d..8fbba80d4 100644
--- a/ui/src/app/question/basequestion/weighted-multiple-choice-option.component.ts
+++ b/ui/src/app/question/basequestion/weighted-multiple-choice-option.component.ts
@@ -46,9 +46,13 @@ import { FixedPrecisionValidatorDirective } from 'src/app/shared/validation/fixe
                         [disabled]="lotteryOn"
                     />
                 </div>
-                <div class="col-md-1 question-option-trash pointer" [hidden]="lotteryOn" (click)="removeOption()">
+                <button
+                    class="col-md-1 question-option-trash pointer btn btn-link "
+                    [hidden]="lotteryOn"
+                    (click)="removeOption()"
+                >
                     <i class="bi-trash" title="{{ 'i18n_remove' | translate }}"></i>
-                </div>
+                </button>
             </div>
         </div>
     `,
diff --git a/ui/src/app/question/examquestion/multichoice.component.ts b/ui/src/app/question/examquestion/multichoice.component.ts
index c630650f1..657857caa 100644
--- a/ui/src/app/question/examquestion/multichoice.component.ts
+++ b/ui/src/app/question/examquestion/multichoice.component.ts
@@ -53,9 +53,13 @@ import { ExamSectionQuestionOption } from 'src/app/question/question.model';
                             />
                         }
                     </div>
-                    <div [hidden]="lotteryOn()" (click)="removeOption(option)" class="col-md-1 question-option-trash">
+                    <button
+                        [hidden]="lotteryOn()"
+                        (click)="removeOption(option)"
+                        class="col-md-1 question-option-trash btn btn-link"
+                    >
                         <i class="bi-trash" title="{{ 'i18n_remove' | translate }}"></i>
-                    </div>
+                    </button>
                 </div>
             }
             <div class="row mt-2">
diff --git a/ui/src/app/question/examquestion/weighted-multichoice.component.ts b/ui/src/app/question/examquestion/weighted-multichoice.component.ts
index 8b97616f5..9c18ccfad 100644
--- a/ui/src/app/question/examquestion/weighted-multichoice.component.ts
+++ b/ui/src/app/question/examquestion/weighted-multichoice.component.ts
@@ -77,13 +77,13 @@ import { ExamSectionQuestionOption } from 'src/app/question/question.model';
                                     [disabled]="lotteryOn()"
                                 />
                             </div>
-                            <div
-                                class="col-md-1 question-option-trash pointer"
+                            <button
+                                class="col-md-1 question-option-trash pointer btn btn-link"
                                 [hidden]="lotteryOn()"
                                 (click)="removeOption(option)"
                             >
                                 <i class="bi-trash" title="{{ 'i18n_remove' | translate }}"></i>
-                            </div>
+                            </button>
                         </div>
                     }
                     <div class="row">
@@ -98,10 +98,10 @@ import { ExamSectionQuestionOption } from 'src/app/question/question.model';
         </div>
         <div class="row mt-2">
             <div class="col-md-12">
-                <a (click)="addNewOption()" class="attachment-link pointer">
+                <button (click)="addNewOption()" class="attachment-link pointer btn btn-sm btn-link">
                     <i class="bi-plus"></i>
                     {{ 'i18n_question_add_new_option' | translate }}
-                </a>
+                </button>
             </div>
         </div>
     `,