From a772c6d67bfa4154979ee14a34ec954406503109 Mon Sep 17 00:00:00 2001
From: kmcfaul <45077788+kmcfaul@users.noreply.github.com>
Date: Thu, 2 Nov 2023 13:47:40 -0400
Subject: [PATCH] fix(TreeView): define button type (#9770)

---
 .../components/TreeView/TreeViewListItem.tsx  |  4 +-
 .../__snapshots__/TreeView.test.tsx.snap      | 60 +++++++++++++++++++
 2 files changed, 63 insertions(+), 1 deletion(-)

diff --git a/packages/react-core/src/components/TreeView/TreeViewListItem.tsx b/packages/react-core/src/components/TreeView/TreeViewListItem.tsx
index bc087516aa0..fcbf541bf61 100644
--- a/packages/react-core/src/components/TreeView/TreeViewListItem.tsx
+++ b/packages/react-core/src/components/TreeView/TreeViewListItem.tsx
@@ -135,6 +135,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
         }
       }}
       {...((hasCheckbox || isSelectable) && { 'aria-labelledby': `label-${randomId}` })}
+      {...(ToggleComponent === 'button' && { type: 'button' })}
       tabIndex={-1}
     >
       <span className={css(styles.treeViewNodeToggleIcon)}>
@@ -167,7 +168,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
       <>
         {isCompact && title && <span className={css(styles.treeViewNodeTitle)}>{title}</span>}
         {isSelectable ? (
-          <button tabIndex={-1} className={css(styles.treeViewNodeText)}>
+          <button tabIndex={-1} className={css(styles.treeViewNodeText)} type="button">
             {name}
           </button>
         ) : (
@@ -230,6 +231,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
               }}
               {...(hasCheckbox && { htmlFor: randomId })}
               {...((hasCheckbox || (isSelectable && children)) && { id: `label-${randomId}` })}
+              {...(Component === 'button' && { type: 'button' })}
             >
               <span className={css(styles.treeViewNodeContainer)}>
                 {children && renderToggle(randomId)}
diff --git a/packages/react-core/src/components/TreeView/__tests__/__snapshots__/TreeView.test.tsx.snap b/packages/react-core/src/components/TreeView/__tests__/__snapshots__/TreeView.test.tsx.snap
index 3da0823e398..b6de1961c85 100644
--- a/packages/react-core/src/components/TreeView/__tests__/__snapshots__/TreeView.test.tsx.snap
+++ b/packages/react-core/src/components/TreeView/__tests__/__snapshots__/TreeView.test.tsx.snap
@@ -22,6 +22,7 @@ exports[`renders compact no background successfully 1`] = `
           <button
             class="pf-v5-c-tree-view__node"
             tabindex="0"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -75,6 +76,7 @@ exports[`renders compact no background successfully 1`] = `
             >
               <button
                 class="pf-v5-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-v5-c-tree-view__node-container"
@@ -125,6 +127,7 @@ exports[`renders compact no background successfully 1`] = `
             >
               <button
                 class="pf-v5-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-v5-c-tree-view__node-container"
@@ -177,6 +180,7 @@ exports[`renders compact no background successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -227,6 +231,7 @@ exports[`renders compact no background successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -277,6 +282,7 @@ exports[`renders compact no background successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -343,6 +349,7 @@ exports[`renders compact successfully 1`] = `
           <button
             class="pf-v5-c-tree-view__node"
             tabindex="0"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -396,6 +403,7 @@ exports[`renders compact successfully 1`] = `
             >
               <button
                 class="pf-v5-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-v5-c-tree-view__node-container"
@@ -446,6 +454,7 @@ exports[`renders compact successfully 1`] = `
             >
               <button
                 class="pf-v5-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-v5-c-tree-view__node-container"
@@ -498,6 +507,7 @@ exports[`renders compact successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -548,6 +558,7 @@ exports[`renders compact successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -598,6 +609,7 @@ exports[`renders compact successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -664,6 +676,7 @@ exports[`renders guides successfully 1`] = `
           <button
             class="pf-v5-c-tree-view__node"
             tabindex="0"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -713,6 +726,7 @@ exports[`renders guides successfully 1`] = `
             >
               <button
                 class="pf-v5-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-v5-c-tree-view__node-container"
@@ -759,6 +773,7 @@ exports[`renders guides successfully 1`] = `
             >
               <button
                 class="pf-v5-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-v5-c-tree-view__node-container"
@@ -807,6 +822,7 @@ exports[`renders guides successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -853,6 +869,7 @@ exports[`renders guides successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -899,6 +916,7 @@ exports[`renders guides successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -961,6 +979,7 @@ exports[`tree view renders active successfully 1`] = `
           <button
             class="pf-v5-c-tree-view__node"
             tabindex="0"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -1010,6 +1029,7 @@ exports[`tree view renders active successfully 1`] = `
             >
               <button
                 class="pf-v5-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-v5-c-tree-view__node-container"
@@ -1056,6 +1076,7 @@ exports[`tree view renders active successfully 1`] = `
             >
               <button
                 class="pf-v5-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-v5-c-tree-view__node-container"
@@ -1104,6 +1125,7 @@ exports[`tree view renders active successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -1150,6 +1172,7 @@ exports[`tree view renders active successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -1196,6 +1219,7 @@ exports[`tree view renders active successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -1258,6 +1282,7 @@ exports[`tree view renders badges successfully 1`] = `
           <button
             class="pf-v5-c-tree-view__node"
             tabindex="0"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -1316,6 +1341,7 @@ exports[`tree view renders badges successfully 1`] = `
             >
               <button
                 class="pf-v5-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-v5-c-tree-view__node-container"
@@ -1371,6 +1397,7 @@ exports[`tree view renders badges successfully 1`] = `
             >
               <button
                 class="pf-v5-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-v5-c-tree-view__node-container"
@@ -1428,6 +1455,7 @@ exports[`tree view renders badges successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -1483,6 +1511,7 @@ exports[`tree view renders badges successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -1538,6 +1567,7 @@ exports[`tree view renders badges successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -1609,6 +1639,7 @@ exports[`tree view renders basic successfully 1`] = `
           <button
             class="pf-v5-c-tree-view__node"
             tabindex="0"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -1658,6 +1689,7 @@ exports[`tree view renders basic successfully 1`] = `
             >
               <button
                 class="pf-v5-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-v5-c-tree-view__node-container"
@@ -1704,6 +1736,7 @@ exports[`tree view renders basic successfully 1`] = `
             >
               <button
                 class="pf-v5-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-v5-c-tree-view__node-container"
@@ -1752,6 +1785,7 @@ exports[`tree view renders basic successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -1798,6 +1832,7 @@ exports[`tree view renders basic successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -1844,6 +1879,7 @@ exports[`tree view renders basic successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -1915,6 +1951,7 @@ exports[`tree view renders checkboxes successfully 1`] = `
                 aria-labelledby="label-checkbox-id25"
                 class="pf-v5-c-tree-view__node-toggle"
                 tabindex="0"
+                type="button"
               >
                 <span
                   class="pf-v5-c-tree-view__node-toggle-icon"
@@ -1976,6 +2013,7 @@ exports[`tree view renders checkboxes successfully 1`] = `
                     aria-labelledby="label-checkbox-id26"
                     class="pf-v5-c-tree-view__node-toggle"
                     tabindex="-1"
+                    type="button"
                   >
                     <span
                       class="pf-v5-c-tree-view__node-toggle-icon"
@@ -2034,6 +2072,7 @@ exports[`tree view renders checkboxes successfully 1`] = `
                     aria-labelledby="label-checkbox-id27"
                     class="pf-v5-c-tree-view__node-toggle"
                     tabindex="-1"
+                    type="button"
                   >
                     <span
                       class="pf-v5-c-tree-view__node-toggle-icon"
@@ -2094,6 +2133,7 @@ exports[`tree view renders checkboxes successfully 1`] = `
                 aria-labelledby="label-checkbox-id28"
                 class="pf-v5-c-tree-view__node-toggle"
                 tabindex="-1"
+                type="button"
               >
                 <span
                   class="pf-v5-c-tree-view__node-toggle-icon"
@@ -2152,6 +2192,7 @@ exports[`tree view renders checkboxes successfully 1`] = `
                 aria-labelledby="label-checkbox-id29"
                 class="pf-v5-c-tree-view__node-toggle"
                 tabindex="-1"
+                type="button"
               >
                 <span
                   class="pf-v5-c-tree-view__node-toggle-icon"
@@ -2210,6 +2251,7 @@ exports[`tree view renders checkboxes successfully 1`] = `
                 aria-labelledby="label-checkbox-id30"
                 class="pf-v5-c-tree-view__node-toggle"
                 tabindex="-1"
+                type="button"
               >
                 <span
                   class="pf-v5-c-tree-view__node-toggle-icon"
@@ -2274,6 +2316,7 @@ exports[`tree view renders icons successfully 1`] = `
           <button
             class="pf-v5-c-tree-view__node"
             tabindex="0"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -2340,6 +2383,7 @@ exports[`tree view renders icons successfully 1`] = `
             >
               <button
                 class="pf-v5-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-v5-c-tree-view__node-container"
@@ -2403,6 +2447,7 @@ exports[`tree view renders icons successfully 1`] = `
             >
               <button
                 class="pf-v5-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-v5-c-tree-view__node-container"
@@ -2468,6 +2513,7 @@ exports[`tree view renders icons successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -2531,6 +2577,7 @@ exports[`tree view renders icons successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -2594,6 +2641,7 @@ exports[`tree view renders icons successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -2683,6 +2731,7 @@ exports[`tree view renders individual flag options successfully 1`] = `
                 aria-labelledby="label-checkbox-id43"
                 class="pf-v5-c-tree-view__node-toggle"
                 tabindex="-1"
+                type="button"
               >
                 <span
                   class="pf-v5-c-tree-view__node-toggle-icon"
@@ -2751,6 +2800,7 @@ exports[`tree view renders individual flag options successfully 1`] = `
             >
               <button
                 class="pf-v5-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-v5-c-tree-view__node-container"
@@ -2797,6 +2847,7 @@ exports[`tree view renders individual flag options successfully 1`] = `
             >
               <button
                 class="pf-v5-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-v5-c-tree-view__node-container"
@@ -2854,6 +2905,7 @@ exports[`tree view renders individual flag options successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -2936,6 +2988,7 @@ exports[`tree view renders individual flag options successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -2982,6 +3035,7 @@ exports[`tree view renders individual flag options successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -3090,6 +3144,7 @@ exports[`tree view renders toolbar successfully 1`] = `
           <button
             class="pf-v5-c-tree-view__node"
             tabindex="0"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -3139,6 +3194,7 @@ exports[`tree view renders toolbar successfully 1`] = `
             >
               <button
                 class="pf-v5-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-v5-c-tree-view__node-container"
@@ -3185,6 +3241,7 @@ exports[`tree view renders toolbar successfully 1`] = `
             >
               <button
                 class="pf-v5-c-tree-view__node"
+                type="button"
               >
                 <span
                   class="pf-v5-c-tree-view__node-container"
@@ -3233,6 +3290,7 @@ exports[`tree view renders toolbar successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -3279,6 +3337,7 @@ exports[`tree view renders toolbar successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"
@@ -3325,6 +3384,7 @@ exports[`tree view renders toolbar successfully 1`] = `
         >
           <button
             class="pf-v5-c-tree-view__node"
+            type="button"
           >
             <span
               class="pf-v5-c-tree-view__node-container"