Merge branch 'updates/7265-anchor-tags-accessibility' of github.com:t…

…orchbox/rca-wagtail-2019 into dev
torchbox · Oct 22, 2024 · 0c9de22 · 0c9de22
2 parents e487cea + aa7f10e
commit 0c9de22
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 5 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" 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/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;
         }