Update action elements to be buttons instead of links

torchbox · Oct 21, 2024 · 6bcb661 · 6bcb661
1 parent 271af58
commit 6bcb661
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 7 deletions.
diff --git a/rca/project_styleguide/templates/patterns/atoms/back-link/back-link.html b/rca/project_styleguide/templates/patterns/atoms/back-link/back-link.html
@@ -1,4 +1,4 @@
-<a class="back-link" data-subnav-back>
+<button class="button back-link" role="link" tabindex="0" data-subnav-back>
     <svg class="back-link__icon" width="12" height="8" aria-hidden="true"><use xlink:href="#arrow"></use></svg>
     <span class="back-link__text">Back</span>
-</a>
+</button>
diff --git a/rca/project_styleguide/templates/patterns/base.html b/rca/project_styleguide/templates/patterns/base.html
@@ -71,9 +71,9 @@
         <nav class="app__navigation" data-nav-container>
             {% include "patterns/atoms/grid-lines/grid-lines.html" %}
             <div class="header__menus">
-                {% cache 3600 "primarynav" settings.navigation.NavigationSettings.last_updated_at %}
+                {% comment %} {% cache 3600 "primarynav" settings.navigation.NavigationSettings.last_updated_at %} {% endcomment %}
                     {% primarynav %}
-                {% endcache %}
+                {% comment %} {% endcache %} {% endcomment %}
             </div>
         </nav>
 

diff --git a/rca/project_styleguide/templates/patterns/molecules/video-modal/video-modal.html b/rca/project_styleguide/templates/patterns/molecules/video-modal/video-modal.html
@@ -4,9 +4,9 @@
         <a data-modal-open>Open video</a>
     {% endif %}
     <div data-modal-window class="video-modal" aria-live="polite">
-        <a data-modal-close class="video-modal__close">
+        <button data-modal-close class="button video-modal__close">
             <svg class="video-modal__close-icon" width="20" height="20"><use xlink:href="#close"></use></svg>
-        </a>
+        </button>
         <div class="video-modal__container">
             <div style="padding-bottom: 56.25%" class="responsive-object">
                 {% embed video %}

diff --git a/rca/static_src/sass/components/_back-link.scss b/rca/static_src/sass/components/_back-link.scss
@@ -8,6 +8,10 @@
     display: flex;
     pointer-events: none;
 
+    &:focus {
+        outline: 2px solid $color--focus;
+    }
+
     @include media-query(medium) {
         margin-top: ($gutter * 3.25);
     }
@@ -31,7 +35,7 @@
             }
         }
 
-        &:hover {
+        &:hover, &:focus {
             span {
                 &::after {
                     width: 100%;

diff --git a/rca/static_src/sass/components/_video-modal.scss b/rca/static_src/sass/components/_video-modal.scss
@@ -43,6 +43,10 @@
         top: 20px;
         right: 20px;
 
+        &:focus {
+            outline: 2px solid $color--focus;
+        }
+
         .is-open & {
             pointer-events: all;
         }