fix(components): [tabs] disabled pane can still be focused (#8600)

* fix(components): [tabs] disabled pane can still be focused

* test(components): [tabs] modify the test

* fix(components): [tabs] hide close button when Tab is disabled

* chore(components): [tabs] optimize code

* fix(theme-chalk): [tabs] the disabled style error

packages/components/tabs/__tests__/tabs.test.ts

@@ -634,7 +634,7 @@ describe('Tabs.vue', () => {
       },
       template: `
         <el-tabs v-model="activeName">
-          <el-tab-pane label="label-1" name="first">A</el-tab-pane>
+          <el-tab-pane label="label-1" name="first" disabled>A</el-tab-pane>
           <el-tab-pane label="label-2" name="second">B</el-tab-pane>
           <el-tab-pane label="label-3" name="third">C</el-tab-pane>
           <el-tab-pane label="label-4" name="fourth">D</el-tab-pane>
@@ -663,17 +663,12 @@ describe('Tabs.vue', () => {
     await wrapper
       .find('#tab-fourth')
       .trigger('keydown', { code: EVENT_CODE.right })
-    expect(vm.activeName).toEqual('first')
+    expect(vm.activeName).toEqual('second')
 
     await wrapper
-      .find('#tab-first')
+      .find('#tab-second')
       .trigger('keydown', { code: EVENT_CODE.left })
     expect(vm.activeName).toEqual('fourth')
-
-    await wrapper
-      .find('#tab-fourth')
-      .trigger('keydown', { code: EVENT_CODE.left })
-    expect(vm.activeName).toEqual('third')
   })
 
   test('resize', async () => {

packages/components/tabs/src/tab-nav.tsx

@@ -215,7 +215,7 @@ const TabNav = defineComponent({
       // 左右上下键更换tab
       const tabList = Array.from(
         (e.currentTarget as HTMLDivElement).querySelectorAll<HTMLDivElement>(
-          '[role=tab]'
+          '[role=tab]:not(.is-disabled)'
         )
       )
       const currentIndex = tabList.indexOf(e.target as HTMLDivElement)
@@ -308,8 +308,9 @@ const TabNav = defineComponent({
         : null
 
       const tabs = props.panes.map((pane, index) => {
+        const disabled = pane.props.disabled
         const tabName = pane.props.name ?? pane.index ?? `${index}`
-        const closable: boolean = pane.isClosable || props.editable
+        const closable = !disabled && (pane.isClosable || props.editable)
         pane.index = `${index}`
 
         const btnClose = closable ? (
@@ -325,7 +326,7 @@ const TabNav = defineComponent({
         ) : null
 
         const tabLabelContent = pane.slots.label?.() || pane.props.label
-        const tabindex = pane.active ? 0 : -1
+        const tabindex = !disabled && pane.active ? 0 : -1
 
         return (
           <div
@@ -334,7 +335,7 @@ const TabNav = defineComponent({
               ns.e('item'),
               ns.is(rootTabs.props.tabPosition),
               ns.is('active', pane.active),
-              ns.is('disabled', pane.props.disabled),
+              ns.is('disabled', disabled),
               ns.is('closable', closable),
               ns.is('focus', isFocus.value),
             ]}

packages/theme-chalk/src/tabs.scss

@@ -160,7 +160,7 @@
 
     @include when(disabled) {
       color: getCssVar('disabled-text-color');
-      cursor: default;
+      cursor: not-allowed;
     }
   }
   @include e(content) {