refactor: Change Button to div to support IE 11 (#288)

* move button out of div

* support keyboard

* fix click active

* test coverage

* add coveerage

.travis.yml

@@ -1,35 +1,18 @@
 language: node_js
 
-sudo: false
-
-notifications:
-  email:
-  - [email protected]
-  - [email protected]
-
 node_js:
-- 10
+  - 10
 
-before_install:
-- |
-    if ! git diff --name-only $TRAVIS_COMMIT_RANGE | grep -qvE '(\.md$)|(^(docs|examples))/'
-    then
-      echo "Only docs were updated, stopping build process."
-      exit
-    fi
-    phantomjs --version
 script:
-- |
+  - |
     if [ "$TEST_TYPE" = test ]; then
-      npm test
+      npm test -- --coverage && \
+      bash <(curl -s https://codecov.io/bash)
     else
       npm run $TEST_TYPE
     fi
 env:
   matrix:
-  - TEST_TYPE=lint
-  - TEST_TYPE=test
-  - TEST_TYPE=coverage
-  global:
-  - secure: S1VwbaPzLnSH/IUT/wlJulxAX5VHRIDmSt53h/ycHcZsszUpWcLCJRQAe0fTVB2dAx5MdBbSZ+o+tr3tRwVB5TRAYm0oTCsYAkOZaWOB28RuUQtdGt3wf9xxTG1UiPiaLLUW3waX9zAaf3yqKBcJGf1op0RD8dksxbCFw/7xVbU=
-  - secure: EBEDg8k///IlEsnx0AE8X3mbFl0QE5+xGKbG4AxXlGZda12uTIPUSMKJzdZQ2hVbZXduTzf1cQl9rcu9nGoSnkL/DWnIax9cvHi+1orx5+YPlxPHNWAwWByTnHosBn2MJhfy1s5paJfHC9cUzmmEL6x4fYthWxjsPUo+irEZH6E=
+    - TEST_TYPE=lint
+    - TEST_TYPE=test
+    - TEST_TYPE=compile

assets/index.less

@@ -95,33 +95,32 @@
     font-size: 20px;
     background: rgba(255, 255, 255, 0.5);
     margin: 0;
-    padding: 8px 16px;
+    display: flex;
     outline: none;
     cursor: pointer;
     position: relative;
     font-weight: lighter;
+    align-items: center;
 
-    &-with-remove {
-      padding-right: 32px;
+    &-btn,
+    &-remove {
+      border: 0;
+      background: transparent;
     }
 
-    &-remove {
-      position: absolute;
-      right: 16px;
-      top: 50%;
-      transform: translateY(-50%);
+    &-btn {
+      font-weight: inherit;
+      line-height: 32px;
+    }
 
+    &-remove {
       &:hover {
         color: red;
       }
     }
 
-    &:focus {
-      background: rgba(0, 0, 255, 0.1);
-    }
-
     &-active {
-      padding-left: 30px;
+      // padding-left: 30px;
       font-weight: bolder;
     }
   }

examples/mix.tsx

@@ -20,12 +20,12 @@ export default () => {
   const [position, setPosition] = React.useState<any>('top');
   const [gutter, setGutter] = React.useState(false);
   const [fixHeight, setFixHeight] = React.useState(true);
-  const [rtl, setRTL] = React.useState(true);
+  const [rtl, setRTL] = React.useState(false);
   const [editable, setEditable] = React.useState(true);
   const [destroyInactiveTabPane, setDestroyInactiveTabPane] = React.useState(false);
   const [destroy, setDestroy] = React.useState(false);
   const [animated, setAnimated] = React.useState(true);
-  const [tabPanes, setTabPanes] = React.useState(getTabPanes(50));
+  const [tabPanes, setTabPanes] = React.useState(getTabPanes(10));
 
   const editableConfig = editable
     ? {

src/TabNavList/TabNode.tsx

@@ -11,7 +11,7 @@ export interface TabNodeProps {
   rtl: boolean;
   closable?: boolean;
   editable?: EditableConfig;
-  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;
   onResize?: (width: number, height: number, left: number, top: number) => void;
   tabBarGutter?: number;
   tabPosition: TabPosition;
@@ -39,7 +39,7 @@ function TabNode(
     onRemove,
     onFocus,
   }: TabNodeProps,
-  ref: React.Ref<HTMLButtonElement>,
+  ref: React.Ref<HTMLDivElement>,
 ) {
   const tabPrefix = `${prefixCls}-tab`;
 
@@ -54,6 +54,12 @@ function TabNode(
 
   const removable = editable && closable !== false && !disabled;
 
+  function onInternalClick(e: React.MouseEvent | React.KeyboardEvent) {
+    if (disabled) return;
+
+    onClick(e);
+  }
+
   function onRemoveTab(event: React.MouseEvent | React.KeyboardEvent) {
     event.preventDefault();
     event.stopPropagation();
@@ -64,45 +70,57 @@ function TabNode(
   }
 
   let node: React.ReactElement = (
-    <button
+    <div
       key={key}
       ref={ref}
-      type="button"
-      role="tab"
-      aria-selected={active}
-      id={id && `${id}-tab-${key}`}
-      aria-controls={id && `${id}-panel-${key}`}
-      tabIndex={0}
-      disabled={disabled}
       className={classNames(tabPrefix, {
         [`${tabPrefix}-with-remove`]: removable,
         [`${tabPrefix}-active`]: active,
         [`${tabPrefix}-disabled`]: disabled,
       })}
-      onClick={onClick}
-      onFocus={onFocus}
       style={nodeStyle}
+      onClick={onInternalClick}
     >
-      {tab}
+      {/* Primary Tab Button */}
+      <div
+        role="tab"
+        aria-selected={active}
+        id={id && `${id}-tab-${key}`}
+        className={`${tabPrefix}-btn`}
+        aria-controls={id && `${id}-panel-${key}`}
+        aria-disabled={disabled}
+        tabIndex={disabled ? null : 0}
+        onClick={e => {
+          e.stopPropagation();
+          onInternalClick(e);
+        }}
+        onKeyDown={e => {
+          if ([KeyCode.SPACE, KeyCode.ENTER].includes(e.which)) {
+            e.preventDefault();
+            onInternalClick(e);
+          }
+        }}
+        onFocus={onFocus}
+      >
+        {tab}
+      </div>
+
+      {/* Remove Button */}
       {removable && (
-        <span
-          role="button"
+        <button
+          type="button"
           aria-label={removeAriaLabel || 'remove'}
           tabIndex={0}
           className={`${tabPrefix}-remove`}
           onClick={e => {
+            e.stopPropagation();
             onRemoveTab(e);
           }}
-          onKeyDown={e => {
-            if ([KeyCode.SPACE, KeyCode.ENTER].includes(e.which)) {
-              onRemoveTab(e);
-            }
-          }}
         >
           {closeIcon || editable.removeIcon || '×'}
-        </span>
+        </button>
       )}
-    </button>
+    </div>
   );
 
   if (renderWrapper) {

src/TabNavList/index.tsx

@@ -66,7 +66,7 @@ function TabNavList(props: TabNavListProps, ref: React.Ref<HTMLDivElement>) {
   const tabListRef = useRef<HTMLDivElement>();
   const operationsRef = useRef<HTMLDivElement>();
   const innerAddButtonRef = useRef<HTMLButtonElement>();
-  const [getBtnRef, removeBtnRef] = useRefs<HTMLButtonElement>();
+  const [getBtnRef, removeBtnRef] = useRefs<HTMLDivElement>();
 
   const tabPositionTopOrBottom = tabPosition === 'top' || tabPosition === 'bottom';
 

tests/__snapshots__/index.test.tsx.snap

@@ -15,39 +15,48 @@ exports[`Tabs.Basic Normal 1`] = `
         class="rc-tabs-nav-list"
         style="transform: translate(0px, 0px);"
       >
-        <button
-          aria-controls="rc-tabs-test-panel-light"
-          aria-selected="false"
+        <div
           class="rc-tabs-tab"
-          id="rc-tabs-test-tab-light"
-          role="tab"
-          tabindex="0"
-          type="button"
         >
-          light
-        </button>
-        <button
-          aria-controls="rc-tabs-test-panel-bamboo"
-          aria-selected="true"
+          <div
+            aria-controls="rc-tabs-test-panel-light"
+            aria-selected="false"
+            class="rc-tabs-tab-btn"
+            id="rc-tabs-test-tab-light"
+            role="tab"
+            tabindex="0"
+          >
+            light
+          </div>
+        </div>
+        <div
           class="rc-tabs-tab rc-tabs-tab-active"
-          id="rc-tabs-test-tab-bamboo"
-          role="tab"
-          tabindex="0"
-          type="button"
         >
-          bamboo
-        </button>
-        <button
-          aria-controls="rc-tabs-test-panel-cute"
-          aria-selected="false"
+          <div
+            aria-controls="rc-tabs-test-panel-bamboo"
+            aria-selected="true"
+            class="rc-tabs-tab-btn"
+            id="rc-tabs-test-tab-bamboo"
+            role="tab"
+            tabindex="0"
+          >
+            bamboo
+          </div>
+        </div>
+        <div
           class="rc-tabs-tab"
-          id="rc-tabs-test-tab-cute"
-          role="tab"
-          tabindex="0"
-          type="button"
         >
-          cute
-        </button>
+          <div
+            aria-controls="rc-tabs-test-panel-cute"
+            aria-selected="false"
+            class="rc-tabs-tab-btn"
+            id="rc-tabs-test-tab-cute"
+            role="tab"
+            tabindex="0"
+          >
+            cute
+          </div>
+        </div>
         <div
           class="rc-tabs-ink-bar rc-tabs-ink-bar-animated"
         />
@@ -126,17 +135,20 @@ exports[`Tabs.Basic Skip invalidate children 1`] = `
         class="rc-tabs-nav-list"
         style="transform: translate(0px, 0px);"
       >
-        <button
-          aria-controls="rc-tabs-test-panel-light"
-          aria-selected="true"
+        <div
           class="rc-tabs-tab rc-tabs-tab-active"
-          id="rc-tabs-test-tab-light"
-          role="tab"
-          tabindex="0"
-          type="button"
         >
-          light
-        </button>
+          <div
+            aria-controls="rc-tabs-test-panel-light"
+            aria-selected="true"
+            class="rc-tabs-tab-btn"
+            id="rc-tabs-test-tab-light"
+            role="tab"
+            tabindex="0"
+          >
+            light
+          </div>
+        </div>
         <div
           class="rc-tabs-ink-bar rc-tabs-ink-bar-animated"
         />