use operation-unit function

components/_util/transButton.tsx

@@ -57,7 +57,7 @@ class TransButton extends React.Component<TransButtonProps> {
     return (
       <div
         role="button"
-        tabIndex={-1}
+        tabIndex={0}
         ref={this.setRef}
         {...this.props}
         onKeyDown={this.onKeyDown}

components/page-header/index.tsx

@@ -42,7 +42,9 @@ const renderBack = (
             }
           }}
         >
-          <TransButton aria-label={back}>{backIcon}</TransButton>
+          <TransButton className={`${prefixCls}-back-icon-button`} aria-label={back}>
+            {backIcon}
+          </TransButton>
           <Divider type="vertical" />
         </div>
       )}

components/page-header/style/index.less

@@ -20,8 +20,10 @@
     font-size: 16px;
     line-height: 100%;
     cursor: pointer;
-    i:hover {
-      color: @primary-color;
+    &-button {
+      .operation-unit();
+
+      color: @text-color;
     }
   }
 

components/style/mixins/index.less

@@ -6,3 +6,4 @@
 @import 'iconfont';
 @import 'motion';
 @import 'reset';
+@import 'operationUnit';

components/style/mixins/operationUnit.less

@@ -0,0 +1,18 @@
+@import '../../style/themes/default';
+
+.operation-unit() {
+  color: @link-color;
+  text-decoration: none;
+  outline: none;
+  cursor: pointer;
+  transition: color 0.3s;
+
+  &:focus,
+  &:hover {
+    color: @link-hover-color;
+  }
+
+  &:active {
+    color: @link-active-color;
+  }
+}

components/typography/style/index.less

@@ -30,23 +30,6 @@
   .typography-title(@heading-4-size, 1.4);
 }
 
-.operation-unit() {
-  color: @link-color;
-  text-decoration: none;
-  outline: none;
-  cursor: pointer;
-  transition: color 0.3s;
-
-  &:focus,
-  &:hover {
-    color: @link-hover-color;
-  }
-
-  &:active {
-    color: @link-active-color;
-  }
-}
-
 // =============== Basic ===============
 .@{typography-prefix-cls} {
   color: @text-color;