Improve accessibility of Link focus style

Shopify · May 10, 2019 · a2c09ff · a2c09ff
1 parent cd868a1
commit a2c09ff
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 9 deletions.
diff --git a/UNRELEASED.md b/UNRELEASED.md
@@ -17,6 +17,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 ### Bug fixes
 
 - Fixed `Popover` fade-in flutter on iOS by switching Transition component for CSSTransition [#1400](https://github.com/Shopify/polaris-react/pull/1400)
+- Improved the visibility of focus styles for the `Link` component. [#1425](https://github.com/Shopify/polaris-react/pull/1425)
 
 ### Documentation
 

diff --git a/src/components/Link/Link.scss b/src/components/Link/Link.scss
@@ -5,16 +5,14 @@
   text-align: inherit;
   padding: 0;
   background: none;
-  border: none;
+  border: 0;
   font-size: inherit;
   color: color('blue');
   text-decoration: none;
   cursor: pointer;
 
   &:hover,
-  &:focus,
   &:active {
-    outline: none;
     color: color('blue', 'dark');
   }
 }

diff --git a/src/styles/shared/links.scss b/src/styles/shared/links.scss
@@ -23,11 +23,12 @@
     transition: opacity duration() easing();
   }
 
-  &:hover,
-  &:focus,
-  &:active {
-    &::after {
-      opacity: 0.4;
-    }
+  &:hover::after,
+  &:active::after {
+    opacity: 0.4;
+  }
+
+  &:focus::after {
+    display: none;
   }
 }