MET-6977 Chained Rerun Design

Author: andyjmaclean

projects/sandbox/src/app/dataset-info/dataset-info.component.html

@@ -185,6 +185,26 @@
 
 <!-- reruns -->
 @let hierarchy = hierarchyData(); @if(hierarchy) { @let childCount = hierarchy.children.length;
+
+<span class="parent-dataset rerun-nav" *ngIf="hierarchyData(); let hierarchy">
+  @let parent = hierarchy.parent; @let parent_id = parent ? parent.id : '';
+  <a
+    class="parent-link rerun-nav"
+    [attr.linkText]="parent ? parent.id : '/'"
+    [attr.tabindex]="!!parent ? 0 : -1"
+    href="/dataset/{{ parent_id }}"
+    [ngClass]="{
+      disabled: !parent
+    }"
+    (click)="!!parent && navTo(parent_id)"
+    (keydown.enter)="!!parent && navTo(parent_id)"
+    ><span
+      [attr.content]="!!parent && parent.name.length ? parent.name : null"
+      class="parent-label"
+    ></span
+  ></a>
+</span>
+
 <div class="child-datasets list-container">
   <ul
     tabindex="-1"
@@ -330,25 +350,6 @@
 </div>
 }
 
-<span class="parent-dataset rerun-nav" *ngIf="hierarchyData(); let hierarchy">
-  @let parent = hierarchy.parent; @let parent_id = parent ? parent.id : '';
-  <a
-    class="parent-link rerun-nav"
-    [attr.linkText]="parent ? parent.id : '/'"
-    [attr.tabindex]="!!parent ? 0 : -1"
-    href="/dataset/{{ parent_id }}"
-    [ngClass]="{
-      disabled: !parent
-    }"
-    (click)="!!parent && navTo(parent_id)"
-    (keydown.enter)="!!parent && navTo(parent_id)"
-    ><span
-      [attr.content]="!!parent && parent.name.length ? parent.name : null"
-      class="parent-label"
-    ></span
-  ></a>
-</span>
-
 <ul
   class="dataset-info container-h"
   *ngIf="datasetInfo(); let datasetInfo"

projects/sandbox/src/assets/sass/ancestry.scss

@@ -210,6 +210,10 @@ $z-blur: 4;
         content: 'Reruns';
         color: variables-colours.$eu-orange;
       }
+      &:focus-visible::after {
+        transition: left $time1 linear;
+        left: 22%;
+      }
     }
   }
 
@@ -948,16 +952,15 @@ body.theme-classic {
     transition: opacity $timesBoth linear, top $timesBoth linear;
     z-index: $z-blur;
 
-    &:not(:hover) {
-      .parent-label {
-        &::before {
-          opacity: 0;
-        }
-        &::after {
-          color: variables-colours.$eu-grey-middle;
-        }
+    &:not(:hover, :has(:focus)) .parent-label {
+      &::before {
+        opacity: 0;
+      }
+      &::after {
+        color: variables-colours.$eu-grey-middle;
       }
     }
+
     .parent-label {
       font-size: 1rem;
       position: absolute;