Merge pull request #1025 from TechnologyEnhancedLearning/Develop/Fixes/TD-5179-Focus-not-rendered-correctly-on-links-used-on-My-bookmarks-screen

TD-5179: Fixed focus issue on My bookmarks screen

Author: ArunimaGeorge

LearningHub.Nhs.WebUI/Styles/nhsuk/pages/bookmark.scss

@@ -112,6 +112,23 @@ td.col-type {
 tr.bookmark-item:hover td {
     background-color: $nhsuk-white;
 }
+.my-bookmark-btn:focus {
+    outline: none;
+    text-decoration: none !important;
+    color: $nhsuk-black !important;
+    background-color: $nhsuk-yellow !important;
+    box-shadow: 0 -2px $govuk-focus-highlight-yellow, 0 4px $nhsuk-black;
+}
+
+.my-bookmark-btn:hover {
+    outline: none;
+    text-decoration: none !important;
+}
+
+.my-bookmark-btn {
+    transition: none !important;
+    border-radius: 0 !important;
+}
 
 @media (min-width: 768px) {
 

LearningHub.Nhs.WebUI/Views/Bookmark/_BookmarkAction.cshtml

@@ -6,7 +6,7 @@
         <span class="action-link-chevron @(Model.IsFirst? "empty" : "")">
             @if (Model.IsFirst == false)
             {
-                <button name="action" value="moveup" class="btn btn-link action-link" title="Move up" aria-label="Move up">
+                <button name="action" value="moveup" class="btn btn-link action-link my-bookmark-btn" title="Move up" aria-label="Move up">
                     <i class="fa-solid fa-chevron-up fa-sm"></i>
                 </button>
             }
@@ -15,25 +15,25 @@
         <span class="action-link-chevron @(Model.IsLast? "empty" : "")">
             @if (Model.IsLast == false)
             {
-                <button name="action" value="movedown" class="btn btn-link action-link" title="Move down" aria-label="Move down">
+                <button name="action" value="movedown" class="btn btn-link action-link my-bookmark-btn" title="Move down" aria-label="Move down">
                     <i class="fa-solid fa-chevron-down fa-sm"></i>
                 </button>
             }
         </span>
 
         <span class="action-link-rename">
-            <button name="action" value="rename" class="btn btn-link action-link" title="Rename">Rename</button>
+            <button name="action" value="rename" class="btn btn-link action-link my-bookmark-btn" title="Rename">Rename</button>
         </span>
 
         <span class="action-link-move">
             @if (Model.IsFolder == false)
             {
-                <button name="action" value="move" class="btn btn-link action-link" title="Move">Move</button>
+                <button name="action" value="move" class="btn btn-link action-link my-bookmark-btn" title="Move">Move</button>
             }
         </span>
 
         <span class="action-link-delete">
-            <button name="action" value="delete" class="btn btn-link action-link" title="Delete">Delete</button>
+            <button name="action" value="delete" class="btn btn-link action-link my-bookmark-btn" title="Delete">Delete</button>
         </span>
     </form>
 </div>