fix: tab item button type (#2143)

* fix: tab item button type * Create angry-apples-explode.md * chore: update snapshots --------- Co-authored-by: Anurag Hazra <anurag.hazra@razorpay.com>
razorpay · May 3, 2024 · 989172a · 989172a
1 parent ffe712a
commit 989172a
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 1 deletion.
diff --git a/.changeset/angry-apples-explode.md b/.changeset/angry-apples-explode.md
@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": patch
+---
+
+fix(blade): tab item button type
diff --git a/packages/blade/src/components/Tabs/TabItem.web.tsx b/packages/blade/src/components/Tabs/TabItem.web.tsx
@@ -136,6 +136,7 @@ const TabItem = ({
     <CompositeItem
       render={
         <StyledTabButton
+          type="button"
           as={href ? 'a' : 'button'}
           href={href}
           isVertical={isVertical}

diff --git a/packages/blade/src/components/Tabs/__tests__/__snapshots__/Tabs.ssr.test.tsx.snap b/packages/blade/src/components/Tabs/__tests__/__snapshots__/Tabs.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Tabs /> should render tabs ssr 1`] = `"<div id="root"><div data-blade-component="tabs" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="box" class="BaseBox-bmPWx bTmnOt"><div data-blade-component="base-box" class="BaseBox-bmPWx TabListweb__ScrollableArea-sc-1evjc5b-0 cIMjwK bOfmyA"><div data-blade-component="base-box" class="BaseBox-bmPWx bFzCEy"><div role="tablist" data-blade-component="base-box" class="BaseBox-bmPWx ionHzf"><button id="tabs-undefined-payments-tabitem" role="tab" aria-selected="false" aria-controls="tabs-undefined-payments-tabpanel" data-blade-component="tab-item" tabindex="-1" class="TabItemweb__StyledTabButton-ucns8k-0 eMVIso"><p class="StyledBaseText-dVBfTO dBbFZp" data-blade-component="text">Payments</p></button><button id="tabs-undefined-refunds-tabitem" role="tab" aria-selected="true" aria-controls="tabs-undefined-refunds-tabpanel" data-blade-component="tab-item" tabindex="-1" class="TabItemweb__StyledTabButton-ucns8k-0 eMVIso"><p class="StyledBaseText-dVBfTO juAXIO" data-blade-component="text">Refunds</p></button></div></div><div pointer-events="none" style="transition-property:transform, width, background-color;transition-duration:0ms;transition-timing-function:cubic-bezier(0.3, 0, 0.2, 1);width:0px;transform:translate(0px, 0px)" data-blade-component="tab-indicator" class="BaseBox-bmPWx TabIndicatorweb__StyledTabIndicator-sc-1kc65o8-0 itSyci cRvRoB"></div></div><div style="transform:translateY(-1px)" data-blade-component="base-box" class="BaseBox-bmPWx fNJCJA"></div></div><div id="tabs-undefined-payments-tabpanel" tabindex="0" data-blade-component="tab-panel" role="tabpanel" aria-labelledby="tabs-undefined-payments-tabitem" aria-hidden="true" class="BaseBox-bmPWx kukYOz"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text">Payments</p></div><div id="tabs-undefined-refunds-tabpanel" tabindex="0" data-blade-component="tab-panel" role="tabpanel" aria-labelledby="tabs-undefined-refunds-tabitem" aria-hidden="false" class="BaseBox-bmPWx eTTyBE"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text">Refunds</p></div></div></div>"`;
+exports[`<Tabs /> should render tabs ssr 1`] = `"<div id="root"><div data-blade-component="tabs" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="box" class="BaseBox-bmPWx bTmnOt"><div data-blade-component="base-box" class="BaseBox-bmPWx TabListweb__ScrollableArea-sc-1evjc5b-0 cIMjwK bOfmyA"><div data-blade-component="base-box" class="BaseBox-bmPWx bFzCEy"><div role="tablist" data-blade-component="base-box" class="BaseBox-bmPWx ionHzf"><button type="button" id="tabs-undefined-payments-tabitem" role="tab" aria-selected="false" aria-controls="tabs-undefined-payments-tabpanel" data-blade-component="tab-item" tabindex="-1" class="TabItemweb__StyledTabButton-ucns8k-0 eMVIso"><p class="StyledBaseText-dVBfTO dBbFZp" data-blade-component="text">Payments</p></button><button type="button" id="tabs-undefined-refunds-tabitem" role="tab" aria-selected="true" aria-controls="tabs-undefined-refunds-tabpanel" data-blade-component="tab-item" tabindex="-1" class="TabItemweb__StyledTabButton-ucns8k-0 eMVIso"><p class="StyledBaseText-dVBfTO juAXIO" data-blade-component="text">Refunds</p></button></div></div><div pointer-events="none" style="transition-property:transform, width, background-color;transition-duration:0ms;transition-timing-function:cubic-bezier(0.3, 0, 0.2, 1);width:0px;transform:translate(0px, 0px)" data-blade-component="tab-indicator" class="BaseBox-bmPWx TabIndicatorweb__StyledTabIndicator-sc-1kc65o8-0 itSyci cRvRoB"></div></div><div style="transform:translateY(-1px)" data-blade-component="base-box" class="BaseBox-bmPWx fNJCJA"></div></div><div id="tabs-undefined-payments-tabpanel" tabindex="0" data-blade-component="tab-panel" role="tabpanel" aria-labelledby="tabs-undefined-payments-tabitem" aria-hidden="true" class="BaseBox-bmPWx kukYOz"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text">Payments</p></div><div id="tabs-undefined-refunds-tabpanel" tabindex="0" data-blade-component="tab-panel" role="tabpanel" aria-labelledby="tabs-undefined-refunds-tabitem" aria-hidden="false" class="BaseBox-bmPWx eTTyBE"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text">Refunds</p></div></div></div>"`;
 
 exports[`<Tabs /> should render tabs ssr 2`] = `
 .c0.c0.c0.c0.c0 {
@@ -320,6 +320,7 @@ exports[`<Tabs /> should render tabs ssr 2`] = `
               id="tabs-1-payments-tabitem"
               role="tab"
               tabindex="0"
+              type="button"
             >
               <p
                 class="c7"
@@ -336,6 +337,7 @@ exports[`<Tabs /> should render tabs ssr 2`] = `
               id="tabs-1-refunds-tabitem"
               role="tab"
               tabindex="-1"
+              type="button"
             >
               <p
                 class="c8"

diff --git a/packages/blade/src/components/Tabs/__tests__/__snapshots__/Tabs.web.test.tsx.snap b/packages/blade/src/components/Tabs/__tests__/__snapshots__/Tabs.web.test.tsx.snap
@@ -317,6 +317,7 @@ exports[`Tabs should render 1`] = `
                 id="tabs-1-payments-tabitem"
                 role="tab"
                 tabindex="0"
+                type="button"
               >
                 <p
                   class="c7"
@@ -333,6 +334,7 @@ exports[`Tabs should render 1`] = `
                 id="tabs-1-refunds-tabitem"
                 role="tab"
                 tabindex="-1"
+                type="button"
               >
                 <p
                   class="c8"
@@ -825,6 +827,7 @@ exports[`Tabs should render with filled variant 1`] = `
                 id="tabs-4-payments-tabitem"
                 role="tab"
                 tabindex="0"
+                type="button"
               >
                 <p
                   class="c7"
@@ -846,6 +849,7 @@ exports[`Tabs should render with filled variant 1`] = `
                 id="tabs-4-refunds-tabitem"
                 role="tab"
                 tabindex="-1"
+                type="button"
               >
                 <p
                   class="c11"
@@ -1219,6 +1223,7 @@ exports[`Tabs should render with isFullWidthTabItem 1`] = `
                 id="tabs-5-payments-tabitem"
                 role="tab"
                 tabindex="0"
+                type="button"
               >
                 <p
                   class="c7"
@@ -1235,6 +1240,7 @@ exports[`Tabs should render with isFullWidthTabItem 1`] = `
                 id="tabs-5-refunds-tabitem"
                 role="tab"
                 tabindex="-1"
+                type="button"
               >
                 <p
                   class="c8"
@@ -1612,6 +1618,7 @@ exports[`Tabs should render with size 1`] = `
                 id="tabs-6-payments-tabitem"
                 role="tab"
                 tabindex="0"
+                type="button"
               >
                 <p
                   class="c7"
@@ -1628,6 +1635,7 @@ exports[`Tabs should render with size 1`] = `
                 id="tabs-6-refunds-tabitem"
                 role="tab"
                 tabindex="-1"
+                type="button"
               >
                 <p
                   class="c8"
@@ -2033,6 +2041,7 @@ exports[`Tabs should render with vertical orientation 1`] = `
                 id="tabs-3-payments-tabitem"
                 role="tab"
                 tabindex="0"
+                type="button"
               >
                 <p
                   class="c7"
@@ -2049,6 +2058,7 @@ exports[`Tabs should render with vertical orientation 1`] = `
                 id="tabs-3-refunds-tabitem"
                 role="tab"
                 tabindex="-1"
+                type="button"
               >
                 <p
                   class="c9"