use EuiButton

elastic · Mar 4, 2020 · 9e00477 · 9e00477
1 parent 2357ac0
commit 9e00477
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 14 deletions.
diff --git a/src/components/accessibility/_skip_link.scss b/src/components/accessibility/_skip_link.scss
@@ -1,21 +1,15 @@
 .euiSkipLink {
-  @include euiButton;
-  z-index: $euiZHeader + 1;
-  background-color: $euiColorPrimary;
-  color: $euiColorGhost;
-  font-size: $euiFontSizeS;
-  padding: 0 $euiSize;
-  border-radius: $euiBorderRadius;
-  transition: none;
+  // eslint
+  transition: none !important; // sass-lint:disable-line no-important
 
   &:focus {
-    animation: none;
-    text-decoration: underline;
+    animation: none !important; // sass-lint:disable-line no-important
   }
 
   &.euiSkipLink--isFixedToTop:focus {
     position: fixed;
     top: $euiSizeXS;
     left: $euiSizeXS;
+    z-index: $euiZHeader + 1;
   }
 }
diff --git a/src/components/accessibility/skip_link.tsx b/src/components/accessibility/skip_link.tsx
@@ -1,6 +1,7 @@
-import React, { FunctionComponent, HTMLAttributes } from 'react';
+import React, { FunctionComponent } from 'react';
 import classNames from 'classnames';
 import { CommonProps } from '../common';
+import { EuiButton } from '../button/button';
 import { EuiScreenReaderOnly } from '../accessibility/screen_reader';
 
 export interface EuiSkipLinkProps extends CommonProps {
@@ -36,13 +37,15 @@ export const EuiSkipLink: FunctionComponent<EuiSkipLinkProps> = ({
 
   return (
     <EuiScreenReaderOnly showOnFocus>
-      <a
+      <EuiButton
         className={classes}
         href={`#${destinationId}`}
         tabIndex={tabIndex}
-        {...rest as HTMLAttributes<HTMLAnchorElement>}>
+        size="s"
+        fill
+        {...rest}>
         {label}
-      </a>
+      </EuiButton>
     </EuiScreenReaderOnly>
   );
 };