Removing global styles and fixing tooltip activator

Shopify · Dec 9, 2020 · 4055976 · 4055976
1 parent 7ba1d45
commit 4055976
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 23 deletions.
diff --git a/src/components/AppProvider/AppProvider.scss b/src/components/AppProvider/AppProvider.scss
@@ -62,29 +62,6 @@ body {
   box-sizing: border-box;
 }
 
-:focus:not(:focus-visible) {
-  outline: none;
-}
-
-:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 rem(2px) var(--p-focused, color('indigo'));
-  border-radius: var(--p-border-radius-base);
-}
-
-[data-js-focus-visible] {
-  :focus:not([data-focus-visible-added]) {
-    outline: none;
-  }
-
-  // stylelint-disable-next-line selector-max-attribute
-  [data-focus-visible-added] {
-    outline: none;
-    box-shadow: 0 0 0 rem(2px) var(--p-focused, color('indigo'));
-    border-radius: var(--p-border-radius-base);
-  }
-}
-
 h1,
 h2,
 h3,

diff --git a/src/components/Tooltip/Tooltip.scss b/src/components/Tooltip/Tooltip.scss
@@ -50,3 +50,17 @@ $content-max-width: rem(200px);
   padding: spacing(extra-tight) spacing(tight);
   word-break: break-word;
 }
+
+[data-polaris-tooltip-activator] {
+  outline: 0;
+  @include focus-ring;
+
+  &:focus-visible {
+    @include focus-ring($style: 'focused');
+  }
+}
+
+// stylelint-disable-next-line selector-max-attribute
+[data-polaris-tooltip-activator][data-focus-visible-added] {
+  @include focus-ring($style: 'focused');
+}
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
@@ -61,6 +61,7 @@ export function Tooltip({
 
     accessibilityNode.tabIndex = 0;
     accessibilityNode.setAttribute('aria-describedby', id);
+    accessibilityNode.setAttribute('data-polaris-tooltip-activator', 'true');
   }, [id, children]);
 
   const handleKeyUp = useCallback(