From 541659f05248123889cc852fa75fee9dccff206d Mon Sep 17 00:00:00 2001
From: Mudit Jaiswal <mjaiswal@salesforce.com>
Date: Thu, 27 Apr 2023 15:45:48 -0700
Subject: [PATCH 1/3] convert non Nan value from string to num and modifying
 unit tests

---
 components/checkbox/index.jsx                 |   4 +-
 .../__snapshots__/storybook-stories.storyshot | 262 +++++++++---------
 .../__tests__/data-table.browser-test.jsx     |   4 +-
 3 files changed, 136 insertions(+), 134 deletions(-)

diff --git a/components/checkbox/index.jsx b/components/checkbox/index.jsx
index c5a898e9a1..4406450653 100644
--- a/components/checkbox/index.jsx
+++ b/components/checkbox/index.jsx
@@ -332,7 +332,9 @@ class Checkbox extends React.Component {
 						}}
 						role={props.role}
 						required={props.required}
-						tabIndex={props.tabIndex}
+						tabIndex={!isNaN(Number(props.tabIndex))
+							? parseInt(props.tabIndex, 10)
+							: props.tabIndex}
 						type="checkbox"
 						{...ariaProps}
 						aria-describedby={this.getAriaDescribedBy()}
diff --git a/components/data-table/__docs__/__snapshots__/storybook-stories.storyshot b/components/data-table/__docs__/__snapshots__/storybook-stories.storyshot
index 560295132e..9e2a146abf 100644
--- a/components/data-table/__docs__/__snapshots__/storybook-stories.storyshot
+++ b/components/data-table/__docs__/__snapshots__/storybook-stories.storyshot
@@ -57,7 +57,7 @@ exports[`DOM snapshots SLDSDataTable Advanced (Fixed Layout) 1`] = `
                       name="SelectAll"
                       onChange={[Function]}
                       onFocus={[Function]}
-                      tabIndex="-1"
+                      tabIndex={-1}
                       type="checkbox"
                     />
                     <label
@@ -107,7 +107,7 @@ exports[`DOM snapshots SLDSDataTable Advanced (Fixed Layout) 1`] = `
                 className="slds-assistive-text"
               >
                 sort this column
-                 
+
               </span>
               <span
                 className="slds-truncate"
@@ -124,7 +124,7 @@ exports[`DOM snapshots SLDSDataTable Advanced (Fixed Layout) 1`] = `
                     href="/assets/icons/utility-sprite/svg/symbols.svg#arrowup"
                   />
                 </svg>
-                
+
               </span>
               <span
                 aria-atomic="true"
@@ -189,7 +189,7 @@ exports[`DOM snapshots SLDSDataTable Advanced (Fixed Layout) 1`] = `
                 className="slds-assistive-text"
               >
                 sort this column
-                 
+
               </span>
               <span
                 className="slds-truncate"
@@ -206,7 +206,7 @@ exports[`DOM snapshots SLDSDataTable Advanced (Fixed Layout) 1`] = `
                     href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"
                   />
                 </svg>
-                
+
               </span>
               <span
                 aria-atomic="true"
@@ -265,7 +265,7 @@ exports[`DOM snapshots SLDSDataTable Advanced (Fixed Layout) 1`] = `
                 className="slds-assistive-text"
               >
                 sort this column
-                 
+
               </span>
               <span
                 className="slds-truncate"
@@ -282,7 +282,7 @@ exports[`DOM snapshots SLDSDataTable Advanced (Fixed Layout) 1`] = `
                     href="/assets/icons/utility-sprite/svg/symbols.svg#arrowup"
                   />
                 </svg>
-                
+
               </span>
             </a>
           </th>
@@ -396,7 +396,7 @@ exports[`DOM snapshots SLDSDataTable Advanced (Fixed Layout) 1`] = `
                     name="SelectRow1"
                     onChange={[Function]}
                     onFocus={[Function]}
-                    tabIndex="-1"
+                    tabIndex={-1}
                     type="checkbox"
                   />
                   <label
@@ -622,7 +622,7 @@ exports[`DOM snapshots SLDSDataTable Advanced (Fixed Layout) 1`] = `
                     name="SelectRow2"
                     onChange={[Function]}
                     onFocus={[Function]}
-                    tabIndex="-1"
+                    tabIndex={-1}
                     type="checkbox"
                   />
                   <label
@@ -847,7 +847,7 @@ exports[`DOM snapshots SLDSDataTable Advanced (Fixed Layout) 1`] = `
                     name="SelectRow3"
                     onChange={[Function]}
                     onFocus={[Function]}
-                    tabIndex="-1"
+                    tabIndex={-1}
                     type="checkbox"
                   />
                   <label
@@ -1153,7 +1153,7 @@ exports[`DOM snapshots SLDSDataTable Advanced Single Select (Fixed Header) 1`] =
                     className="slds-assistive-text"
                   >
                     sort this column
-                     
+
                   </span>
                   <span
                     className="slds-truncate"
@@ -1170,7 +1170,7 @@ exports[`DOM snapshots SLDSDataTable Advanced Single Select (Fixed Header) 1`] =
                         href="/assets/icons/utility-sprite/svg/symbols.svg#arrowup"
                       />
                     </svg>
-                    
+
                   </span>
                   <span
                     aria-atomic="true"
@@ -1212,7 +1212,7 @@ exports[`DOM snapshots SLDSDataTable Advanced Single Select (Fixed Header) 1`] =
                       className="slds-assistive-text"
                     >
                       sort this column
-                       
+
                     </span>
                     <span
                       className="slds-truncate"
@@ -1229,7 +1229,7 @@ exports[`DOM snapshots SLDSDataTable Advanced Single Select (Fixed Header) 1`] =
                           href="/assets/icons/utility-sprite/svg/symbols.svg#arrowup"
                         />
                       </svg>
-                      
+
                     </span>
                     <span
                       aria-atomic="true"
@@ -1484,7 +1484,7 @@ exports[`DOM snapshots SLDSDataTable Advanced Single Select (Fixed Header) 1`] =
                     className="slds-assistive-text"
                   >
                     sort this column
-                     
+
                   </span>
                   <span
                     className="slds-truncate"
@@ -1501,7 +1501,7 @@ exports[`DOM snapshots SLDSDataTable Advanced Single Select (Fixed Header) 1`] =
                         href="/assets/icons/utility-sprite/svg/symbols.svg#arrowup"
                       />
                     </svg>
-                    
+
                   </span>
                 </a>
                 <div
@@ -1537,7 +1537,7 @@ exports[`DOM snapshots SLDSDataTable Advanced Single Select (Fixed Header) 1`] =
                       className="slds-assistive-text"
                     >
                       sort this column
-                       
+
                     </span>
                     <span
                       className="slds-truncate"
@@ -1554,7 +1554,7 @@ exports[`DOM snapshots SLDSDataTable Advanced Single Select (Fixed Header) 1`] =
                           href="/assets/icons/utility-sprite/svg/symbols.svg#arrowup"
                         />
                       </svg>
-                      
+
                     </span>
                   </a>
                 </div>
@@ -2501,7 +2501,7 @@ exports[`DOM snapshots SLDSDataTable Advanced Single Select (Fixed Layout) 1`] =
                 className="slds-assistive-text"
               >
                 sort this column
-                 
+
               </span>
               <span
                 className="slds-truncate"
@@ -2518,7 +2518,7 @@ exports[`DOM snapshots SLDSDataTable Advanced Single Select (Fixed Layout) 1`] =
                     href="/assets/icons/utility-sprite/svg/symbols.svg#arrowup"
                   />
                 </svg>
-                
+
               </span>
               <span
                 aria-atomic="true"
@@ -2635,7 +2635,7 @@ exports[`DOM snapshots SLDSDataTable Advanced Single Select (Fixed Layout) 1`] =
                 className="slds-assistive-text"
               >
                 sort this column
-                 
+
               </span>
               <span
                 className="slds-truncate"
@@ -2652,7 +2652,7 @@ exports[`DOM snapshots SLDSDataTable Advanced Single Select (Fixed Layout) 1`] =
                     href="/assets/icons/utility-sprite/svg/symbols.svg#arrowup"
                   />
                 </svg>
-                
+
               </span>
             </a>
           </th>
@@ -8381,7 +8381,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = `
                           id="DataTableExample-FixedHeaders-SLDSDataTableHead-SelectAll-fixed-header"
                           onChange={[Function]}
                           onFocus={[Function]}
-                          tabIndex="-1"
+                          tabIndex={-1}
                           type="checkbox"
                         />
                         <label
@@ -8444,7 +8444,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = `
                             name="SelectAll"
                             onChange={[Function]}
                             onFocus={[Function]}
-                            tabIndex="-1"
+                            tabIndex={-1}
                             type="checkbox"
                           />
                           <label
@@ -8503,7 +8503,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = `
                     className="slds-assistive-text"
                   >
                     sort this column
-                     
+
                   </span>
                   <span
                     className="slds-truncate"
@@ -8520,7 +8520,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = `
                         href="/assets/icons/utility-sprite/svg/symbols.svg#arrowup"
                       />
                     </svg>
-                    
+
                   </span>
                   <span
                     aria-atomic="true"
@@ -8562,7 +8562,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = `
                       className="slds-assistive-text"
                     >
                       sort this column
-                       
+
                     </span>
                     <span
                       className="slds-truncate"
@@ -8579,7 +8579,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = `
                           href="/assets/icons/utility-sprite/svg/symbols.svg#arrowup"
                         />
                       </svg>
-                      
+
                     </span>
                     <span
                       aria-atomic="true"
@@ -8834,7 +8834,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = `
                     className="slds-assistive-text"
                   >
                     sort this column
-                     
+
                   </span>
                   <span
                     className="slds-truncate"
@@ -8851,7 +8851,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = `
                         href="/assets/icons/utility-sprite/svg/symbols.svg#arrowup"
                       />
                     </svg>
-                    
+
                   </span>
                 </a>
                 <div
@@ -8887,7 +8887,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = `
                       className="slds-assistive-text"
                     >
                       sort this column
-                       
+
                     </span>
                     <span
                       className="slds-truncate"
@@ -8904,7 +8904,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = `
                           href="/assets/icons/utility-sprite/svg/symbols.svg#arrowup"
                         />
                       </svg>
-                      
+
                     </span>
                   </a>
                 </div>
@@ -9140,7 +9140,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = `
                         name="SelectRow1"
                         onChange={[Function]}
                         onFocus={[Function]}
-                        tabIndex="-1"
+                        tabIndex={-1}
                         type="checkbox"
                       />
                       <label
@@ -9358,7 +9358,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = `
                         name="SelectRow2"
                         onChange={[Function]}
                         onFocus={[Function]}
-                        tabIndex="-1"
+                        tabIndex={-1}
                         type="checkbox"
                       />
                       <label
@@ -9575,7 +9575,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = `
                         name="SelectRow3"
                         onChange={[Function]}
                         onFocus={[Function]}
-                        tabIndex="-1"
+                        tabIndex={-1}
                         type="checkbox"
                       />
                       <label
@@ -9792,7 +9792,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = `
                         name="SelectRow4"
                         onChange={[Function]}
                         onFocus={[Function]}
-                        tabIndex="-1"
+                        tabIndex={-1}
                         type="checkbox"
                       />
                       <label
@@ -10009,7 +10009,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = `
                         name="SelectRow5"
                         onChange={[Function]}
                         onFocus={[Function]}
-                        tabIndex="-1"
+                        tabIndex={-1}
                         type="checkbox"
                       />
                       <label
@@ -10226,7 +10226,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = `
                         name="SelectRow6"
                         onChange={[Function]}
                         onFocus={[Function]}
-                        tabIndex="-1"
+                        tabIndex={-1}
                         type="checkbox"
                       />
                       <label
@@ -10443,7 +10443,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = `
                         name="SelectRow7"
                         onChange={[Function]}
                         onFocus={[Function]}
-                        tabIndex="-1"
+                        tabIndex={-1}
                         type="checkbox"
                       />
                       <label
@@ -10660,7 +10660,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = `
                         name="SelectRow8"
                         onChange={[Function]}
                         onFocus={[Function]}
-                        tabIndex="-1"
+                        tabIndex={-1}
                         type="checkbox"
                       />
                       <label
@@ -10877,7 +10877,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = `
                         name="SelectRow9"
                         onChange={[Function]}
                         onFocus={[Function]}
-                        tabIndex="-1"
+                        tabIndex={-1}
                         type="checkbox"
                       />
                       <label
@@ -11094,7 +11094,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = `
                         name="SelectRow10"
                         onChange={[Function]}
                         onFocus={[Function]}
-                        tabIndex="-1"
+                        tabIndex={-1}
                         type="checkbox"
                       />
                       <label
@@ -11311,7 +11311,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = `
                         name="SelectRow11"
                         onChange={[Function]}
                         onFocus={[Function]}
-                        tabIndex="-1"
+                        tabIndex={-1}
                         type="checkbox"
                       />
                       <label
@@ -11528,7 +11528,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = `
                         name="SelectRow12"
                         onChange={[Function]}
                         onFocus={[Function]}
-                        tabIndex="-1"
+                        tabIndex={-1}
                         type="checkbox"
                       />
                       <label
@@ -11812,7 +11812,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = `
                           id="DataTableExample-FixedHeaders-SLDSDataTableHead-SelectAll-fixed-header"
                           onChange={[Function]}
                           onFocus={[Function]}
-                          tabIndex="-1"
+                          tabIndex={-1}
                           type="checkbox"
                         />
                         <label
@@ -11875,7 +11875,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = `
                             name="SelectAll"
                             onChange={[Function]}
                             onFocus={[Function]}
-                            tabIndex="-1"
+                            tabIndex={-1}
                             type="checkbox"
                           />
                           <label
@@ -11934,7 +11934,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = `
                     className="slds-assistive-text"
                   >
                     sort this column
-                     
+
                   </span>
                   <span
                     className="slds-truncate"
@@ -11951,7 +11951,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = `
                         href="/assets/icons/utility-sprite/svg/symbols.svg#arrowup"
                       />
                     </svg>
-                    
+
                   </span>
                   <span
                     aria-atomic="true"
@@ -11993,7 +11993,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = `
                       className="slds-assistive-text"
                     >
                       sort this column
-                       
+
                     </span>
                     <span
                       className="slds-truncate"
@@ -12010,7 +12010,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = `
                           href="/assets/icons/utility-sprite/svg/symbols.svg#arrowup"
                         />
                       </svg>
-                      
+
                     </span>
                     <span
                       aria-atomic="true"
@@ -12265,7 +12265,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = `
                     className="slds-assistive-text"
                   >
                     sort this column
-                     
+
                   </span>
                   <span
                     className="slds-truncate"
@@ -12282,7 +12282,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = `
                         href="/assets/icons/utility-sprite/svg/symbols.svg#arrowup"
                       />
                     </svg>
-                    
+
                   </span>
                 </a>
                 <div
@@ -12318,7 +12318,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = `
                       className="slds-assistive-text"
                     >
                       sort this column
-                       
+
                     </span>
                     <span
                       className="slds-truncate"
@@ -12335,7 +12335,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = `
                           href="/assets/icons/utility-sprite/svg/symbols.svg#arrowup"
                         />
                       </svg>
-                      
+
                     </span>
                   </a>
                 </div>
@@ -12571,7 +12571,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = `
                         name="SelectRow1"
                         onChange={[Function]}
                         onFocus={[Function]}
-                        tabIndex="-1"
+                        tabIndex={-1}
                         type="checkbox"
                       />
                       <label
@@ -12789,7 +12789,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = `
                         name="SelectRow2"
                         onChange={[Function]}
                         onFocus={[Function]}
-                        tabIndex="-1"
+                        tabIndex={-1}
                         type="checkbox"
                       />
                       <label
@@ -13006,7 +13006,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = `
                         name="SelectRow3"
                         onChange={[Function]}
                         onFocus={[Function]}
-                        tabIndex="-1"
+                        tabIndex={-1}
                         type="checkbox"
                       />
                       <label
@@ -13223,7 +13223,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = `
                         name="SelectRow4"
                         onChange={[Function]}
                         onFocus={[Function]}
-                        tabIndex="-1"
+                        tabIndex={-1}
                         type="checkbox"
                       />
                       <label
@@ -13440,7 +13440,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = `
                         name="SelectRow5"
                         onChange={[Function]}
                         onFocus={[Function]}
-                        tabIndex="-1"
+                        tabIndex={-1}
                         type="checkbox"
                       />
                       <label
@@ -13657,7 +13657,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = `
                         name="SelectRow6"
                         onChange={[Function]}
                         onFocus={[Function]}
-                        tabIndex="-1"
+                        tabIndex={-1}
                         type="checkbox"
                       />
                       <label
@@ -13874,7 +13874,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = `
                         name="SelectRow7"
                         onChange={[Function]}
                         onFocus={[Function]}
-                        tabIndex="-1"
+                        tabIndex={-1}
                         type="checkbox"
                       />
                       <label
@@ -14091,7 +14091,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = `
                         name="SelectRow8"
                         onChange={[Function]}
                         onFocus={[Function]}
-                        tabIndex="-1"
+                        tabIndex={-1}
                         type="checkbox"
                       />
                       <label
@@ -14308,7 +14308,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = `
                         name="SelectRow9"
                         onChange={[Function]}
                         onFocus={[Function]}
-                        tabIndex="-1"
+                        tabIndex={-1}
                         type="checkbox"
                       />
                       <label
@@ -14525,7 +14525,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = `
                         name="SelectRow10"
                         onChange={[Function]}
                         onFocus={[Function]}
-                        tabIndex="-1"
+                        tabIndex={-1}
                         type="checkbox"
                       />
                       <label
@@ -14742,7 +14742,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = `
                         name="SelectRow11"
                         onChange={[Function]}
                         onFocus={[Function]}
-                        tabIndex="-1"
+                        tabIndex={-1}
                         type="checkbox"
                       />
                       <label
@@ -14959,7 +14959,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = `
                         name="SelectRow12"
                         onChange={[Function]}
                         onFocus={[Function]}
-                        tabIndex="-1"
+                        tabIndex={-1}
                         type="checkbox"
                       />
                       <label
@@ -15355,7 +15355,7 @@ exports[`DOM snapshots SLDSDataTable Infinite Scrolling 1`] = `
                     className="slds-assistive-text"
                   >
                     sort this column
-                     
+
                   </span>
                   <span
                     className="slds-truncate"
@@ -15372,7 +15372,7 @@ exports[`DOM snapshots SLDSDataTable Infinite Scrolling 1`] = `
                         href="/assets/icons/utility-sprite/svg/symbols.svg#arrowup"
                       />
                     </svg>
-                    
+
                   </span>
                   <span
                     aria-atomic="true"
@@ -15413,7 +15413,7 @@ exports[`DOM snapshots SLDSDataTable Infinite Scrolling 1`] = `
                       className="slds-assistive-text"
                     >
                       sort this column
-                       
+
                     </span>
                     <span
                       className="slds-truncate"
@@ -15430,7 +15430,7 @@ exports[`DOM snapshots SLDSDataTable Infinite Scrolling 1`] = `
                           href="/assets/icons/utility-sprite/svg/symbols.svg#arrowup"
                         />
                       </svg>
-                      
+
                     </span>
                     <span
                       aria-atomic="true"
@@ -15685,7 +15685,7 @@ exports[`DOM snapshots SLDSDataTable Infinite Scrolling 1`] = `
                     className="slds-assistive-text"
                   >
                     sort this column
-                     
+
                   </span>
                   <span
                     className="slds-truncate"
@@ -15702,7 +15702,7 @@ exports[`DOM snapshots SLDSDataTable Infinite Scrolling 1`] = `
                         href="/assets/icons/utility-sprite/svg/symbols.svg#arrowup"
                       />
                     </svg>
-                    
+
                   </span>
                 </a>
                 <div
@@ -15737,7 +15737,7 @@ exports[`DOM snapshots SLDSDataTable Infinite Scrolling 1`] = `
                       className="slds-assistive-text"
                     >
                       sort this column
-                       
+
                     </span>
                     <span
                       className="slds-truncate"
@@ -15754,7 +15754,7 @@ exports[`DOM snapshots SLDSDataTable Infinite Scrolling 1`] = `
                           href="/assets/icons/utility-sprite/svg/symbols.svg#arrowup"
                         />
                       </svg>
-                      
+
                     </span>
                   </a>
                 </div>
@@ -18725,7 +18725,7 @@ exports[`DOM snapshots SLDSDataTable Interactive Elements 1`] = `
                       id="DataTableExample-1-default-SLDSDataTableRow-8IKZHZZV80-SLDSDataTableCell-opportunityName-checkbox"
                       onChange={[Function]}
                       onFocus={[Function]}
-                      tabIndex="-1"
+                      tabIndex={-1}
                       type="checkbox"
                     />
                     <label
@@ -18843,7 +18843,7 @@ exports[`DOM snapshots SLDSDataTable Interactive Elements 1`] = `
                       id="DataTableExample-1-default-SLDSDataTableRow-8IKZHZZV80-SLDSDataTableCell-contact-checkbox"
                       onChange={[Function]}
                       onFocus={[Function]}
-                      tabIndex="-1"
+                      tabIndex={-1}
                       type="checkbox"
                     />
                     <label
@@ -18935,7 +18935,7 @@ exports[`DOM snapshots SLDSDataTable Interactive Elements 1`] = `
                       id="DataTableExample-1-default-SLDSDataTableRow-5GJOOOPWU7-SLDSDataTableCell-opportunityName-checkbox"
                       onChange={[Function]}
                       onFocus={[Function]}
-                      tabIndex="-1"
+                      tabIndex={-1}
                       type="checkbox"
                     />
                     <label
@@ -19053,7 +19053,7 @@ exports[`DOM snapshots SLDSDataTable Interactive Elements 1`] = `
                       id="DataTableExample-1-default-SLDSDataTableRow-5GJOOOPWU7-SLDSDataTableCell-contact-checkbox"
                       onChange={[Function]}
                       onFocus={[Function]}
-                      tabIndex="-1"
+                      tabIndex={-1}
                       type="checkbox"
                     />
                     <label
@@ -19145,7 +19145,7 @@ exports[`DOM snapshots SLDSDataTable Interactive Elements 1`] = `
                       id="DataTableExample-1-default-SLDSDataTableRow-8IKZHZZV81-SLDSDataTableCell-opportunityName-checkbox"
                       onChange={[Function]}
                       onFocus={[Function]}
-                      tabIndex="-1"
+                      tabIndex={-1}
                       type="checkbox"
                     />
                     <label
@@ -19263,7 +19263,7 @@ exports[`DOM snapshots SLDSDataTable Interactive Elements 1`] = `
                       id="DataTableExample-1-default-SLDSDataTableRow-8IKZHZZV81-SLDSDataTableCell-contact-checkbox"
                       onChange={[Function]}
                       onFocus={[Function]}
-                      tabIndex="-1"
+                      tabIndex={-1}
                       type="checkbox"
                     />
                     <label
@@ -19482,7 +19482,7 @@ exports[`DOM snapshots SLDSDataTable Interactive Elements 1`] = `
                       id="DataTableExample-1-striped-SLDSDataTableRow-8IKZHZZV80-SLDSDataTableCell-opportunityName-checkbox"
                       onChange={[Function]}
                       onFocus={[Function]}
-                      tabIndex="-1"
+                      tabIndex={-1}
                       type="checkbox"
                     />
                     <label
@@ -19600,7 +19600,7 @@ exports[`DOM snapshots SLDSDataTable Interactive Elements 1`] = `
                       id="DataTableExample-1-striped-SLDSDataTableRow-8IKZHZZV80-SLDSDataTableCell-contact-checkbox"
                       onChange={[Function]}
                       onFocus={[Function]}
-                      tabIndex="-1"
+                      tabIndex={-1}
                       type="checkbox"
                     />
                     <label
@@ -19692,7 +19692,7 @@ exports[`DOM snapshots SLDSDataTable Interactive Elements 1`] = `
                       id="DataTableExample-1-striped-SLDSDataTableRow-5GJOOOPWU7-SLDSDataTableCell-opportunityName-checkbox"
                       onChange={[Function]}
                       onFocus={[Function]}
-                      tabIndex="-1"
+                      tabIndex={-1}
                       type="checkbox"
                     />
                     <label
@@ -19810,7 +19810,7 @@ exports[`DOM snapshots SLDSDataTable Interactive Elements 1`] = `
                       id="DataTableExample-1-striped-SLDSDataTableRow-5GJOOOPWU7-SLDSDataTableCell-contact-checkbox"
                       onChange={[Function]}
                       onFocus={[Function]}
-                      tabIndex="-1"
+                      tabIndex={-1}
                       type="checkbox"
                     />
                     <label
@@ -19902,7 +19902,7 @@ exports[`DOM snapshots SLDSDataTable Interactive Elements 1`] = `
                       id="DataTableExample-1-striped-SLDSDataTableRow-8IKZHZZV81-SLDSDataTableCell-opportunityName-checkbox"
                       onChange={[Function]}
                       onFocus={[Function]}
-                      tabIndex="-1"
+                      tabIndex={-1}
                       type="checkbox"
                     />
                     <label
@@ -20020,7 +20020,7 @@ exports[`DOM snapshots SLDSDataTable Interactive Elements 1`] = `
                       id="DataTableExample-1-striped-SLDSDataTableRow-8IKZHZZV81-SLDSDataTableCell-contact-checkbox"
                       onChange={[Function]}
                       onFocus={[Function]}
-                      tabIndex="-1"
+                      tabIndex={-1}
                       type="checkbox"
                     />
                     <label
@@ -20239,7 +20239,7 @@ exports[`DOM snapshots SLDSDataTable Interactive Elements 1`] = `
                       id="DataTableExample-noRowHover-SLDSDataTableRow-8IKZHZZV80-SLDSDataTableCell-opportunityName-checkbox"
                       onChange={[Function]}
                       onFocus={[Function]}
-                      tabIndex="-1"
+                      tabIndex={-1}
                       type="checkbox"
                     />
                     <label
@@ -20357,7 +20357,7 @@ exports[`DOM snapshots SLDSDataTable Interactive Elements 1`] = `
                       id="DataTableExample-noRowHover-SLDSDataTableRow-8IKZHZZV80-SLDSDataTableCell-contact-checkbox"
                       onChange={[Function]}
                       onFocus={[Function]}
-                      tabIndex="-1"
+                      tabIndex={-1}
                       type="checkbox"
                     />
                     <label
@@ -20449,7 +20449,7 @@ exports[`DOM snapshots SLDSDataTable Interactive Elements 1`] = `
                       id="DataTableExample-noRowHover-SLDSDataTableRow-5GJOOOPWU7-SLDSDataTableCell-opportunityName-checkbox"
                       onChange={[Function]}
                       onFocus={[Function]}
-                      tabIndex="-1"
+                      tabIndex={-1}
                       type="checkbox"
                     />
                     <label
@@ -20567,7 +20567,7 @@ exports[`DOM snapshots SLDSDataTable Interactive Elements 1`] = `
                       id="DataTableExample-noRowHover-SLDSDataTableRow-5GJOOOPWU7-SLDSDataTableCell-contact-checkbox"
                       onChange={[Function]}
                       onFocus={[Function]}
-                      tabIndex="-1"
+                      tabIndex={-1}
                       type="checkbox"
                     />
                     <label
@@ -20659,7 +20659,7 @@ exports[`DOM snapshots SLDSDataTable Interactive Elements 1`] = `
                       id="DataTableExample-noRowHover-SLDSDataTableRow-8IKZHZZV81-SLDSDataTableCell-opportunityName-checkbox"
                       onChange={[Function]}
                       onFocus={[Function]}
-                      tabIndex="-1"
+                      tabIndex={-1}
                       type="checkbox"
                     />
                     <label
@@ -20777,7 +20777,7 @@ exports[`DOM snapshots SLDSDataTable Interactive Elements 1`] = `
                       id="DataTableExample-noRowHover-SLDSDataTableRow-8IKZHZZV81-SLDSDataTableCell-contact-checkbox"
                       onChange={[Function]}
                       onFocus={[Function]}
-                      tabIndex="-1"
+                      tabIndex={-1}
                       type="checkbox"
                     />
                     <label
@@ -20996,7 +20996,7 @@ exports[`DOM snapshots SLDSDataTable Interactive Elements 1`] = `
                       id="DataTableExample-columnBordered-SLDSDataTableRow-8IKZHZZV80-SLDSDataTableCell-opportunityName-checkbox"
                       onChange={[Function]}
                       onFocus={[Function]}
-                      tabIndex="-1"
+                      tabIndex={-1}
                       type="checkbox"
                     />
                     <label
@@ -21114,7 +21114,7 @@ exports[`DOM snapshots SLDSDataTable Interactive Elements 1`] = `
                       id="DataTableExample-columnBordered-SLDSDataTableRow-8IKZHZZV80-SLDSDataTableCell-contact-checkbox"
                       onChange={[Function]}
                       onFocus={[Function]}
-                      tabIndex="-1"
+                      tabIndex={-1}
                       type="checkbox"
                     />
                     <label
@@ -21206,7 +21206,7 @@ exports[`DOM snapshots SLDSDataTable Interactive Elements 1`] = `
                       id="DataTableExample-columnBordered-SLDSDataTableRow-5GJOOOPWU7-SLDSDataTableCell-opportunityName-checkbox"
                       onChange={[Function]}
                       onFocus={[Function]}
-                      tabIndex="-1"
+                      tabIndex={-1}
                       type="checkbox"
                     />
                     <label
@@ -21324,7 +21324,7 @@ exports[`DOM snapshots SLDSDataTable Interactive Elements 1`] = `
                       id="DataTableExample-columnBordered-SLDSDataTableRow-5GJOOOPWU7-SLDSDataTableCell-contact-checkbox"
                       onChange={[Function]}
                       onFocus={[Function]}
-                      tabIndex="-1"
+                      tabIndex={-1}
                       type="checkbox"
                     />
                     <label
@@ -21416,7 +21416,7 @@ exports[`DOM snapshots SLDSDataTable Interactive Elements 1`] = `
                       id="DataTableExample-columnBordered-SLDSDataTableRow-8IKZHZZV81-SLDSDataTableCell-opportunityName-checkbox"
                       onChange={[Function]}
                       onFocus={[Function]}
-                      tabIndex="-1"
+                      tabIndex={-1}
                       type="checkbox"
                     />
                     <label
@@ -21534,7 +21534,7 @@ exports[`DOM snapshots SLDSDataTable Interactive Elements 1`] = `
                       id="DataTableExample-columnBordered-SLDSDataTableRow-8IKZHZZV81-SLDSDataTableCell-contact-checkbox"
                       onChange={[Function]}
                       onFocus={[Function]}
-                      tabIndex="-1"
+                      tabIndex={-1}
                       type="checkbox"
                     />
                     <label
@@ -21945,7 +21945,7 @@ exports[`DOM snapshots SLDSDataTable Interactive Elements 1`] = `
                           id="DataTableExample-column-resizable-SLDSDataTableRow-8IKZHZZV80-SLDSDataTableCell-opportunityName-checkbox"
                           onChange={[Function]}
                           onFocus={[Function]}
-                          tabIndex="-1"
+                          tabIndex={-1}
                           type="checkbox"
                         />
                         <label
@@ -22063,7 +22063,7 @@ exports[`DOM snapshots SLDSDataTable Interactive Elements 1`] = `
                           id="DataTableExample-column-resizable-SLDSDataTableRow-8IKZHZZV80-SLDSDataTableCell-contact-checkbox"
                           onChange={[Function]}
                           onFocus={[Function]}
-                          tabIndex="-1"
+                          tabIndex={-1}
                           type="checkbox"
                         />
                         <label
@@ -22155,7 +22155,7 @@ exports[`DOM snapshots SLDSDataTable Interactive Elements 1`] = `
                           id="DataTableExample-column-resizable-SLDSDataTableRow-5GJOOOPWU7-SLDSDataTableCell-opportunityName-checkbox"
                           onChange={[Function]}
                           onFocus={[Function]}
-                          tabIndex="-1"
+                          tabIndex={-1}
                           type="checkbox"
                         />
                         <label
@@ -22273,7 +22273,7 @@ exports[`DOM snapshots SLDSDataTable Interactive Elements 1`] = `
                           id="DataTableExample-column-resizable-SLDSDataTableRow-5GJOOOPWU7-SLDSDataTableCell-contact-checkbox"
                           onChange={[Function]}
                           onFocus={[Function]}
-                          tabIndex="-1"
+                          tabIndex={-1}
                           type="checkbox"
                         />
                         <label
@@ -22365,7 +22365,7 @@ exports[`DOM snapshots SLDSDataTable Interactive Elements 1`] = `
                           id="DataTableExample-column-resizable-SLDSDataTableRow-8IKZHZZV81-SLDSDataTableCell-opportunityName-checkbox"
                           onChange={[Function]}
                           onFocus={[Function]}
-                          tabIndex="-1"
+                          tabIndex={-1}
                           type="checkbox"
                         />
                         <label
@@ -22483,7 +22483,7 @@ exports[`DOM snapshots SLDSDataTable Interactive Elements 1`] = `
                           id="DataTableExample-column-resizable-SLDSDataTableRow-8IKZHZZV81-SLDSDataTableCell-contact-checkbox"
                           onChange={[Function]}
                           onFocus={[Function]}
-                          tabIndex="-1"
+                          tabIndex={-1}
                           type="checkbox"
                         />
                         <label
@@ -22578,7 +22578,7 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = `
                   User
                 </span>
               </span>
-               
+
             </div>
             <div
               className="slds-media__body"
@@ -22992,7 +22992,7 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = `
                           id="DataTableExample-JoinedWithPageHeader-SLDSDataTableHead-SelectAll-fixed-header"
                           onChange={[Function]}
                           onFocus={[Function]}
-                          tabIndex="-1"
+                          tabIndex={-1}
                           type="checkbox"
                         />
                         <label
@@ -23055,7 +23055,7 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = `
                             name="SelectAll"
                             onChange={[Function]}
                             onFocus={[Function]}
-                            tabIndex="-1"
+                            tabIndex={-1}
                             type="checkbox"
                           />
                           <label
@@ -23113,8 +23113,8 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = `
                   <span
                     className="slds-assistive-text"
                   >
-                    Sort by: 
-                     
+                    Sort by:
+
                   </span>
                   <span
                     className="slds-truncate"
@@ -23131,7 +23131,7 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = `
                         href="/assets/icons/utility-sprite/svg/symbols.svg#arrowup"
                       />
                     </svg>
-                    
+
                   </span>
                   <span
                     aria-atomic="true"
@@ -23172,8 +23172,8 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = `
                     <span
                       className="slds-assistive-text"
                     >
-                      Sort by: 
-                       
+                      Sort by:
+
                     </span>
                     <span
                       className="slds-truncate"
@@ -23190,7 +23190,7 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = `
                           href="/assets/icons/utility-sprite/svg/symbols.svg#arrowup"
                         />
                       </svg>
-                      
+
                     </span>
                     <span
                       aria-atomic="true"
@@ -23444,8 +23444,8 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = `
                   <span
                     className="slds-assistive-text"
                   >
-                    Sort by: 
-                     
+                    Sort by:
+
                   </span>
                   <span
                     className="slds-truncate"
@@ -23462,7 +23462,7 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = `
                         href="/assets/icons/utility-sprite/svg/symbols.svg#arrowup"
                       />
                     </svg>
-                    
+
                   </span>
                 </a>
                 <div
@@ -23497,8 +23497,8 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = `
                     <span
                       className="slds-assistive-text"
                     >
-                      Sort by: 
-                       
+                      Sort by:
+
                     </span>
                     <span
                       className="slds-truncate"
@@ -23515,7 +23515,7 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = `
                           href="/assets/icons/utility-sprite/svg/symbols.svg#arrowup"
                         />
                       </svg>
-                      
+
                     </span>
                   </a>
                 </div>
@@ -23751,7 +23751,7 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = `
                         name="SelectRow1"
                         onChange={[Function]}
                         onFocus={[Function]}
-                        tabIndex="-1"
+                        tabIndex={-1}
                         type="checkbox"
                       />
                       <label
@@ -23971,7 +23971,7 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = `
                         name="SelectRow2"
                         onChange={[Function]}
                         onFocus={[Function]}
-                        tabIndex="-1"
+                        tabIndex={-1}
                         type="checkbox"
                       />
                       <label
@@ -24190,7 +24190,7 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = `
                         name="SelectRow3"
                         onChange={[Function]}
                         onFocus={[Function]}
-                        tabIndex="-1"
+                        tabIndex={-1}
                         type="checkbox"
                       />
                       <label
@@ -24409,7 +24409,7 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = `
                         name="SelectRow4"
                         onChange={[Function]}
                         onFocus={[Function]}
-                        tabIndex="-1"
+                        tabIndex={-1}
                         type="checkbox"
                       />
                       <label
@@ -24628,7 +24628,7 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = `
                         name="SelectRow5"
                         onChange={[Function]}
                         onFocus={[Function]}
-                        tabIndex="-1"
+                        tabIndex={-1}
                         type="checkbox"
                       />
                       <label
@@ -24847,7 +24847,7 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = `
                         name="SelectRow6"
                         onChange={[Function]}
                         onFocus={[Function]}
-                        tabIndex="-1"
+                        tabIndex={-1}
                         type="checkbox"
                       />
                       <label
@@ -25066,7 +25066,7 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = `
                         name="SelectRow7"
                         onChange={[Function]}
                         onFocus={[Function]}
-                        tabIndex="-1"
+                        tabIndex={-1}
                         type="checkbox"
                       />
                       <label
@@ -25285,7 +25285,7 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = `
                         name="SelectRow8"
                         onChange={[Function]}
                         onFocus={[Function]}
-                        tabIndex="-1"
+                        tabIndex={-1}
                         type="checkbox"
                       />
                       <label
@@ -25504,7 +25504,7 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = `
                         name="SelectRow9"
                         onChange={[Function]}
                         onFocus={[Function]}
-                        tabIndex="-1"
+                        tabIndex={-1}
                         type="checkbox"
                       />
                       <label
@@ -25723,7 +25723,7 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = `
                         name="SelectRow10"
                         onChange={[Function]}
                         onFocus={[Function]}
-                        tabIndex="-1"
+                        tabIndex={-1}
                         type="checkbox"
                       />
                       <label
@@ -25942,7 +25942,7 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = `
                         name="SelectRow11"
                         onChange={[Function]}
                         onFocus={[Function]}
-                        tabIndex="-1"
+                        tabIndex={-1}
                         type="checkbox"
                       />
                       <label
@@ -26161,7 +26161,7 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = `
                         name="SelectRow12"
                         onChange={[Function]}
                         onFocus={[Function]}
-                        tabIndex="-1"
+                        tabIndex={-1}
                         type="checkbox"
                       />
                       <label
diff --git a/components/data-table/__tests__/data-table.browser-test.jsx b/components/data-table/__tests__/data-table.browser-test.jsx
index 6022f29fa4..992221fb64 100644
--- a/components/data-table/__tests__/data-table.browser-test.jsx
+++ b/components/data-table/__tests__/data-table.browser-test.jsx
@@ -1014,7 +1014,7 @@ describe('DataTable: ', function describeFunction() {
 				.find('td')
 				.first()
 				.find('input[type="checkbox"]');
-			expect(checkbox.prop('tabIndex')).to.equal('0');
+			expect(checkbox.prop('tabIndex')).to.equal(0);
 
 			// Press Escape
 			cell.simulate('keyDown', keyObjects.ESCAPE);
@@ -1023,7 +1023,7 @@ describe('DataTable: ', function describeFunction() {
 			expect(cell.prop('tabIndex')).to.equal('0');
 
 			checkbox = this.wrapper.find('td').first().find('input[type="checkbox"]');
-			expect(checkbox.prop('tabIndex')).to.equal('-1');
+			expect(checkbox.prop('tabIndex')).to.equal(-1);
 
 			// Navigate to Dropdown
 			cell.simulate('keyDown', keyObjects.RIGHT);

From 6e6d0165a65df8b4b509269de70a05c4e5f1ceeb Mon Sep 17 00:00:00 2001
From: Mudit Jaiswal <mjaiswal@salesforce.com>
Date: Thu, 27 Apr 2023 16:21:35 -0700
Subject: [PATCH 2/3] lint fix

---
 components/checkbox/index.jsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/components/checkbox/index.jsx b/components/checkbox/index.jsx
index 4406450653..1d775b4a07 100644
--- a/components/checkbox/index.jsx
+++ b/components/checkbox/index.jsx
@@ -332,9 +332,11 @@ class Checkbox extends React.Component {
 						}}
 						role={props.role}
 						required={props.required}
-						tabIndex={!isNaN(Number(props.tabIndex))
-							? parseInt(props.tabIndex, 10)
-							: props.tabIndex}
+						tabIndex={
+							!isNaN(Number(props.tabIndex))
+								? parseInt(props.tabIndex, 10)
+								: props.tabIndex
+						}
 						type="checkbox"
 						{...ariaProps}
 						aria-describedby={this.getAriaDescribedBy()}

From a8fa170a77ef57f3d43eba7c11fe575b542b69d2 Mon Sep 17 00:00:00 2001
From: Mudit Jaiswal <mjaiswal@salesforce.com>
Date: Thu, 27 Apr 2023 16:56:23 -0700
Subject: [PATCH 3/3] regenerate JEST snapshots

---
 .../__snapshots__/storybook-stories.storyshot | 110 +++++++++---------
 1 file changed, 55 insertions(+), 55 deletions(-)

diff --git a/components/data-table/__docs__/__snapshots__/storybook-stories.storyshot b/components/data-table/__docs__/__snapshots__/storybook-stories.storyshot
index 9e2a146abf..6dce4fc1ee 100644
--- a/components/data-table/__docs__/__snapshots__/storybook-stories.storyshot
+++ b/components/data-table/__docs__/__snapshots__/storybook-stories.storyshot
@@ -107,7 +107,7 @@ exports[`DOM snapshots SLDSDataTable Advanced (Fixed Layout) 1`] = `
                 className="slds-assistive-text"
               >
                 sort this column
-
+                 
               </span>
               <span
                 className="slds-truncate"
@@ -124,7 +124,7 @@ exports[`DOM snapshots SLDSDataTable Advanced (Fixed Layout) 1`] = `
                     href="/assets/icons/utility-sprite/svg/symbols.svg#arrowup"
                   />
                 </svg>
-
+                
               </span>
               <span
                 aria-atomic="true"
@@ -189,7 +189,7 @@ exports[`DOM snapshots SLDSDataTable Advanced (Fixed Layout) 1`] = `
                 className="slds-assistive-text"
               >
                 sort this column
-
+                 
               </span>
               <span
                 className="slds-truncate"
@@ -206,7 +206,7 @@ exports[`DOM snapshots SLDSDataTable Advanced (Fixed Layout) 1`] = `
                     href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"
                   />
                 </svg>
-
+                
               </span>
               <span
                 aria-atomic="true"
@@ -265,7 +265,7 @@ exports[`DOM snapshots SLDSDataTable Advanced (Fixed Layout) 1`] = `
                 className="slds-assistive-text"
               >
                 sort this column
-
+                 
               </span>
               <span
                 className="slds-truncate"
@@ -282,7 +282,7 @@ exports[`DOM snapshots SLDSDataTable Advanced (Fixed Layout) 1`] = `
                     href="/assets/icons/utility-sprite/svg/symbols.svg#arrowup"
                   />
                 </svg>
-
+                
               </span>
             </a>
           </th>
@@ -1153,7 +1153,7 @@ exports[`DOM snapshots SLDSDataTable Advanced Single Select (Fixed Header) 1`] =
                     className="slds-assistive-text"
                   >
                     sort this column
-
+                     
                   </span>
                   <span
                     className="slds-truncate"
@@ -1170,7 +1170,7 @@ exports[`DOM snapshots SLDSDataTable Advanced Single Select (Fixed Header) 1`] =
                         href="/assets/icons/utility-sprite/svg/symbols.svg#arrowup"
                       />
                     </svg>
-
+                    
                   </span>
                   <span
                     aria-atomic="true"
@@ -1212,7 +1212,7 @@ exports[`DOM snapshots SLDSDataTable Advanced Single Select (Fixed Header) 1`] =
                       className="slds-assistive-text"
                     >
                       sort this column
-
+                       
                     </span>
                     <span
                       className="slds-truncate"
@@ -1229,7 +1229,7 @@ exports[`DOM snapshots SLDSDataTable Advanced Single Select (Fixed Header) 1`] =
                           href="/assets/icons/utility-sprite/svg/symbols.svg#arrowup"
                         />
                       </svg>
-
+                      
                     </span>
                     <span
                       aria-atomic="true"
@@ -1484,7 +1484,7 @@ exports[`DOM snapshots SLDSDataTable Advanced Single Select (Fixed Header) 1`] =
                     className="slds-assistive-text"
                   >
                     sort this column
-
+                     
                   </span>
                   <span
                     className="slds-truncate"
@@ -1501,7 +1501,7 @@ exports[`DOM snapshots SLDSDataTable Advanced Single Select (Fixed Header) 1`] =
                         href="/assets/icons/utility-sprite/svg/symbols.svg#arrowup"
                       />
                     </svg>
-
+                    
                   </span>
                 </a>
                 <div
@@ -1537,7 +1537,7 @@ exports[`DOM snapshots SLDSDataTable Advanced Single Select (Fixed Header) 1`] =
                       className="slds-assistive-text"
                     >
                       sort this column
-
+                       
                     </span>
                     <span
                       className="slds-truncate"
@@ -1554,7 +1554,7 @@ exports[`DOM snapshots SLDSDataTable Advanced Single Select (Fixed Header) 1`] =
                           href="/assets/icons/utility-sprite/svg/symbols.svg#arrowup"
                         />
                       </svg>
-
+                      
                     </span>
                   </a>
                 </div>
@@ -2501,7 +2501,7 @@ exports[`DOM snapshots SLDSDataTable Advanced Single Select (Fixed Layout) 1`] =
                 className="slds-assistive-text"
               >
                 sort this column
-
+                 
               </span>
               <span
                 className="slds-truncate"
@@ -2518,7 +2518,7 @@ exports[`DOM snapshots SLDSDataTable Advanced Single Select (Fixed Layout) 1`] =
                     href="/assets/icons/utility-sprite/svg/symbols.svg#arrowup"
                   />
                 </svg>
-
+                
               </span>
               <span
                 aria-atomic="true"
@@ -2635,7 +2635,7 @@ exports[`DOM snapshots SLDSDataTable Advanced Single Select (Fixed Layout) 1`] =
                 className="slds-assistive-text"
               >
                 sort this column
-
+                 
               </span>
               <span
                 className="slds-truncate"
@@ -2652,7 +2652,7 @@ exports[`DOM snapshots SLDSDataTable Advanced Single Select (Fixed Layout) 1`] =
                     href="/assets/icons/utility-sprite/svg/symbols.svg#arrowup"
                   />
                 </svg>
-
+                
               </span>
             </a>
           </th>
@@ -8503,7 +8503,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = `
                     className="slds-assistive-text"
                   >
                     sort this column
-
+                     
                   </span>
                   <span
                     className="slds-truncate"
@@ -8520,7 +8520,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = `
                         href="/assets/icons/utility-sprite/svg/symbols.svg#arrowup"
                       />
                     </svg>
-
+                    
                   </span>
                   <span
                     aria-atomic="true"
@@ -8562,7 +8562,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = `
                       className="slds-assistive-text"
                     >
                       sort this column
-
+                       
                     </span>
                     <span
                       className="slds-truncate"
@@ -8579,7 +8579,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = `
                           href="/assets/icons/utility-sprite/svg/symbols.svg#arrowup"
                         />
                       </svg>
-
+                      
                     </span>
                     <span
                       aria-atomic="true"
@@ -8834,7 +8834,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = `
                     className="slds-assistive-text"
                   >
                     sort this column
-
+                     
                   </span>
                   <span
                     className="slds-truncate"
@@ -8851,7 +8851,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = `
                         href="/assets/icons/utility-sprite/svg/symbols.svg#arrowup"
                       />
                     </svg>
-
+                    
                   </span>
                 </a>
                 <div
@@ -8887,7 +8887,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = `
                       className="slds-assistive-text"
                     >
                       sort this column
-
+                       
                     </span>
                     <span
                       className="slds-truncate"
@@ -8904,7 +8904,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header 1`] = `
                           href="/assets/icons/utility-sprite/svg/symbols.svg#arrowup"
                         />
                       </svg>
-
+                      
                     </span>
                   </a>
                 </div>
@@ -11934,7 +11934,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = `
                     className="slds-assistive-text"
                   >
                     sort this column
-
+                     
                   </span>
                   <span
                     className="slds-truncate"
@@ -11951,7 +11951,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = `
                         href="/assets/icons/utility-sprite/svg/symbols.svg#arrowup"
                       />
                     </svg>
-
+                    
                   </span>
                   <span
                     aria-atomic="true"
@@ -11993,7 +11993,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = `
                       className="slds-assistive-text"
                     >
                       sort this column
-
+                       
                     </span>
                     <span
                       className="slds-truncate"
@@ -12010,7 +12010,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = `
                           href="/assets/icons/utility-sprite/svg/symbols.svg#arrowup"
                         />
                       </svg>
-
+                      
                     </span>
                     <span
                       aria-atomic="true"
@@ -12265,7 +12265,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = `
                     className="slds-assistive-text"
                   >
                     sort this column
-
+                     
                   </span>
                   <span
                     className="slds-truncate"
@@ -12282,7 +12282,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = `
                         href="/assets/icons/utility-sprite/svg/symbols.svg#arrowup"
                       />
                     </svg>
-
+                    
                   </span>
                 </a>
                 <div
@@ -12318,7 +12318,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = `
                       className="slds-assistive-text"
                     >
                       sort this column
-
+                       
                     </span>
                     <span
                       className="slds-truncate"
@@ -12335,7 +12335,7 @@ exports[`DOM snapshots SLDSDataTable Fixed Header Horizontal Scrolling 1`] = `
                           href="/assets/icons/utility-sprite/svg/symbols.svg#arrowup"
                         />
                       </svg>
-
+                      
                     </span>
                   </a>
                 </div>
@@ -15355,7 +15355,7 @@ exports[`DOM snapshots SLDSDataTable Infinite Scrolling 1`] = `
                     className="slds-assistive-text"
                   >
                     sort this column
-
+                     
                   </span>
                   <span
                     className="slds-truncate"
@@ -15372,7 +15372,7 @@ exports[`DOM snapshots SLDSDataTable Infinite Scrolling 1`] = `
                         href="/assets/icons/utility-sprite/svg/symbols.svg#arrowup"
                       />
                     </svg>
-
+                    
                   </span>
                   <span
                     aria-atomic="true"
@@ -15413,7 +15413,7 @@ exports[`DOM snapshots SLDSDataTable Infinite Scrolling 1`] = `
                       className="slds-assistive-text"
                     >
                       sort this column
-
+                       
                     </span>
                     <span
                       className="slds-truncate"
@@ -15430,7 +15430,7 @@ exports[`DOM snapshots SLDSDataTable Infinite Scrolling 1`] = `
                           href="/assets/icons/utility-sprite/svg/symbols.svg#arrowup"
                         />
                       </svg>
-
+                      
                     </span>
                     <span
                       aria-atomic="true"
@@ -15685,7 +15685,7 @@ exports[`DOM snapshots SLDSDataTable Infinite Scrolling 1`] = `
                     className="slds-assistive-text"
                   >
                     sort this column
-
+                     
                   </span>
                   <span
                     className="slds-truncate"
@@ -15702,7 +15702,7 @@ exports[`DOM snapshots SLDSDataTable Infinite Scrolling 1`] = `
                         href="/assets/icons/utility-sprite/svg/symbols.svg#arrowup"
                       />
                     </svg>
-
+                    
                   </span>
                 </a>
                 <div
@@ -15737,7 +15737,7 @@ exports[`DOM snapshots SLDSDataTable Infinite Scrolling 1`] = `
                       className="slds-assistive-text"
                     >
                       sort this column
-
+                       
                     </span>
                     <span
                       className="slds-truncate"
@@ -15754,7 +15754,7 @@ exports[`DOM snapshots SLDSDataTable Infinite Scrolling 1`] = `
                           href="/assets/icons/utility-sprite/svg/symbols.svg#arrowup"
                         />
                       </svg>
-
+                      
                     </span>
                   </a>
                 </div>
@@ -22578,7 +22578,7 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = `
                   User
                 </span>
               </span>
-
+               
             </div>
             <div
               className="slds-media__body"
@@ -23113,8 +23113,8 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = `
                   <span
                     className="slds-assistive-text"
                   >
-                    Sort by:
-
+                    Sort by: 
+                     
                   </span>
                   <span
                     className="slds-truncate"
@@ -23131,7 +23131,7 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = `
                         href="/assets/icons/utility-sprite/svg/symbols.svg#arrowup"
                       />
                     </svg>
-
+                    
                   </span>
                   <span
                     aria-atomic="true"
@@ -23172,8 +23172,8 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = `
                     <span
                       className="slds-assistive-text"
                     >
-                      Sort by:
-
+                      Sort by: 
+                       
                     </span>
                     <span
                       className="slds-truncate"
@@ -23190,7 +23190,7 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = `
                           href="/assets/icons/utility-sprite/svg/symbols.svg#arrowup"
                         />
                       </svg>
-
+                      
                     </span>
                     <span
                       aria-atomic="true"
@@ -23444,8 +23444,8 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = `
                   <span
                     className="slds-assistive-text"
                   >
-                    Sort by:
-
+                    Sort by: 
+                     
                   </span>
                   <span
                     className="slds-truncate"
@@ -23462,7 +23462,7 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = `
                         href="/assets/icons/utility-sprite/svg/symbols.svg#arrowup"
                       />
                     </svg>
-
+                    
                   </span>
                 </a>
                 <div
@@ -23497,8 +23497,8 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = `
                     <span
                       className="slds-assistive-text"
                     >
-                      Sort by:
-
+                      Sort by: 
+                       
                     </span>
                     <span
                       className="slds-truncate"
@@ -23515,7 +23515,7 @@ exports[`DOM snapshots SLDSDataTable Joined with Page Header 1`] = `
                           href="/assets/icons/utility-sprite/svg/symbols.svg#arrowup"
                         />
                       </svg>
-
+                      
                     </span>
                   </a>
                 </div>