Remove :focus styles and replace with :focus-visible

nationalarchives · Aug 19, 2024 · d68f1b1 · d68f1b1
1 parent 4489c85
commit d68f1b1
Show file tree

Hide file tree

Showing 13 changed files with 30 additions and 38 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 ### Changed
+
+- Removed `:focus` styles and replaced with `:focus-visible`
+
 ### Deprecated
 ### Removed
 ### Fixed

diff --git a/src/nationalarchives/components/breadcrumbs/breadcrumbs.scss b/src/nationalarchives/components/breadcrumbs/breadcrumbs.scss
@@ -7,9 +7,9 @@
   padding-top: spacing.space(1);
   padding-bottom: spacing.space(1);
 
-  &:focus {
-    outline: none !important;
-  }
+  // &:focus {
+  //   outline: none !important;
+  // }
 
   &__list {
     margin: 0;

diff --git a/src/nationalarchives/components/cookie-banner/cookie-banner.scss b/src/nationalarchives/components/cookie-banner/cookie-banner.scss
@@ -15,9 +15,9 @@
   }
 
   &__message {
-    &:focus {
-      outline: none !important;
-    }
+    // &:focus {
+    //   outline: none !important;
+    // }
 
     &--prompt {
     }

diff --git a/src/nationalarchives/components/error-summary/error-summary.scss b/src/nationalarchives/components/error-summary/error-summary.scss
@@ -1,3 +1,4 @@
+@use "../../tools/a11y";
 @use "../../tools/colour";
 @use "../../tools/media";
 @use "../../tools/spacing";
@@ -12,9 +13,10 @@
   @include colour.colour-background("background");
 
   @include colour.colour-border("form-error-border", 0.3125rem, solid);
+  border-radius: 0.1px;
 
   &:focus {
-    outline: none;
+    @include a11y.focus-outline;
   }
 
   &__list {

diff --git a/src/nationalarchives/components/gallery/gallery.mjs b/src/nationalarchives/components/gallery/gallery.mjs
@@ -70,7 +70,7 @@ export class Gallery {
         this.$itemsContainer.focus();
       });
     });
-    this.$module.setAttribute("tabindex", "0");
+    // this.$module.setAttribute("tabindex", "0");
     this.$module.addEventListener("keydown", (e) => {
       let preventDefaultKeyAction = false;
       switch (e.key) {

diff --git a/src/nationalarchives/components/gallery/gallery.scss b/src/nationalarchives/components/gallery/gallery.scss
@@ -15,10 +15,6 @@
 
   border-radius: 0.1px;
 
-  &:active {
-    @include a11y.no-active-outline;
-  }
-
   &__header {
     padding: spacing.space(1);
 

diff --git a/src/nationalarchives/components/picture/picture.scss b/src/nationalarchives/components/picture/picture.scss
@@ -42,7 +42,7 @@
 
     padding: spacing.space(1.5);
 
-    @include a11y.no-focus-outline-on-click;
+    // @include a11y.no-focus-outline-on-click;
   }
 
   &__caption {

diff --git a/src/nationalarchives/components/sidebar/sidebar.scss b/src/nationalarchives/components/sidebar/sidebar.scss
@@ -24,9 +24,9 @@
   &__items {
     padding-top: max(spacing.space(0.5), #{a11y.$focus-outline-padding});
 
-    &:focus {
-      outline: none;
-    }
+    // &:focus {
+    //   outline: none;
+    // }
   }
 
   &__item {

diff --git a/src/nationalarchives/components/tabs/tabs.mjs b/src/nationalarchives/components/tabs/tabs.mjs
@@ -98,7 +98,6 @@ export class Tabs {
 
   switchTabByIndex(newIndex, switchFocus = false) {
     this.currentTabIndex = newIndex;
-
     this.$tabListItemLinks.forEach(($tabListItemLink, index) => {
       if (index === this.currentTabIndex) {
         $tabListItemLink.setAttribute("aria-selected", true);
@@ -111,7 +110,6 @@ export class Tabs {
         $tabListItemLink.setAttribute("tabindex", "-1");
       }
     });
-
     this.$tabItems.forEach(($tabItem, index) => {
       if (index === this.currentTabIndex) {
         $tabItem.removeAttribute("hidden");

diff --git a/src/nationalarchives/components/tabs/tabs.scss b/src/nationalarchives/components/tabs/tabs.scss
@@ -108,7 +108,7 @@
 
   &__item {
     border-radius: 0.1px;
-    @include a11y.no-focus-outline-on-click;
+    // @include a11y.no-focus-outline-on-click;
 
     &:focus {
       outline-offset: -#{a11yVariables.$focus-outline-width};

diff --git a/src/nationalarchives/tools/_a11y.scss b/src/nationalarchives/tools/_a11y.scss
@@ -14,10 +14,6 @@
   outline-offset: 0;
 }
 
-@mixin no-active-outline {
-  outline-offset: a11y.$focus-outline-offset;
-}
-
 @mixin no-focus-outline-on-click {
   .tna-template--clicked &:focus {
     outline: none;

diff --git a/src/nationalarchives/tools/_colour.scss b/src/nationalarchives/tools/_colour.scss
@@ -181,10 +181,13 @@
 
 // Use light theme colours (except for "form-error-border")
 %always-light {
-  @include colour-css-vars("form-error-border");
+  @include colour-css-vars("form-error-border", "focus-outline");
 
   @media (prefers-contrast: more) {
-    @include colour-css-vars-high-contrast("form-error-border");
+    @include colour-css-vars-high-contrast(
+      "form-error-border",
+      "focus-outline"
+    );
   }
 }
 

diff --git a/src/nationalarchives/utilities/_a11y.scss b/src/nationalarchives/utilities/_a11y.scss
@@ -26,25 +26,19 @@
   // }
 }
 
-*:focus {
+*:focus-visible {
   z-index: 9;
 
   @include a11y.focus-outline;
 }
 
-// *:focus-visible {
-//   z-index: 9;
+@supports not selector(:focus-visible) {
+  *:focus {
+    z-index: 9;
 
-//   @include a11y.focus-outline;
-// }
-
-// @supports not selector(:focus-visible) {
-//   *:focus {
-//     z-index: 9;
-
-//     @include a11y.focus-outline;
-//   }
-// }
+    @include a11y.focus-outline;
+  }
+}
 
 *:active {
   @include a11y.active-outline;