From f28a6078ecd091ca1aa4c95e0efa0da35bf68985 Mon Sep 17 00:00:00 2001
From: yqrashawn <namy.19@gmail.com>
Date: Thu, 2 Jul 2020 18:59:47 +0800
Subject: [PATCH] fix(tabs): add role="button" to tab for a11y

---
 components/tabs/__tests__/__snapshots__/index.test.tsx.snap | 4 ++--
 components/tabs/tabs.tsx                                    | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/components/tabs/__tests__/__snapshots__/index.test.tsx.snap b/components/tabs/__tests__/__snapshots__/index.test.tsx.snap
index ce89867..87e6aae 100644
--- a/components/tabs/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/tabs/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Tabs should render correctly 1`] = `
-"<div class=\\"tabs \\"><header class=\\"\\"><div class=\\"tab  \\">label1</div><div class=\\"tab  \\">label2</div></header><div class=\\"content\\"></div><style>
+"<div class=\\"tabs \\"><header class=\\"\\"><div class=\\"tab  \\" role=\\"button\\">label1</div><div class=\\"tab  \\" role=\\"button\\">label2</div></header><div class=\\"content\\"></div><style>
           .tabs {
             width: initial;
           }
@@ -76,7 +76,7 @@ exports[`Tabs should render correctly 1`] = `
 `;
 
 exports[`Tabs should work correctly with different styles 1`] = `
-"<div class=\\"tabs \\"><header class=\\"hide-divider\\"><div class=\\"tab  \\">label1</div></header><div class=\\"content\\"></div><style>
+"<div class=\\"tabs \\"><header class=\\"hide-divider\\"><div class=\\"tab  \\" role=\\"button\\">label1</div></header><div class=\\"content\\"></div><style>
           .tabs {
             width: initial;
           }
diff --git a/components/tabs/tabs.tsx b/components/tabs/tabs.tsx
index 8254ccd..f00f053 100644
--- a/components/tabs/tabs.tsx
+++ b/components/tabs/tabs.tsx
@@ -76,6 +76,7 @@ const Tabs: React.FC<React.PropsWithChildren<TabsProps>> = ({
               className={`tab ${selfValue === item.value ? 'active' : ''} ${
                 item.disabled ? 'disabled' : ''
               }`}
+              role="button"
               key={item.value + index}
               onClick={() => clickHandler(item)}>
               {item.label}