Use role in test

primer · Oct 21, 2024 · 1906413 · 1906413
1 parent 121718b
commit 1906413
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 26 deletions.
diff --git a/packages/react/src/SelectPanel/SelectPanel.test.tsx b/packages/react/src/SelectPanel/SelectPanel.test.tsx
@@ -494,11 +494,13 @@ for (const useModernActionList of [false, true]) {
 
           expect(screen.getAllByRole('option')).toHaveLength(3)
 
-          // since the test never repopulates the panel's list of items, the panel will enter
-          // the loading state after the following line executes and stay there indefinitely
+          // since the test component never repopulates the panel's list of items, the panel will
+          // enter the loading state after the following line executes and stay there indefinitely
           await user.type(document.activeElement!, 'two')
 
-          expect(screen.getByTestId('text-input-leading-visual')).toBeTruthy()
+          // The aria-describedby attribute is only available if the icon is present. The input
+          // field has a role of combobox.
+          expect(screen.getByRole('combobox').hasAttribute('aria-describedby')).toBeTruthy()
         })
 
         it('should announce initial focused item', async () => {

diff --git a/packages/react/src/TextInput/TextInput.tsx b/packages/react/src/TextInput/TextInput.tsx
@@ -154,7 +154,6 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
           showLoadingIndicator={showLeadingLoadingIndicator}
           hasLoadingIndicator={typeof loading === 'boolean'}
           id={leadingVisualId}
-          data-testid="text-input-leading-visual"
         >
           {typeof LeadingVisual !== 'string' && isValidElementType(LeadingVisual) ? <LeadingVisual /> : LeadingVisual}
         </TextInputInnerVisualSlot>

diff --git a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -4205,7 +4205,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
     </span>
     <span
       className="TextInput-icon"
-      data-testid="text-input-trailing-visual"
     >
       <div
         className="c4"
@@ -4417,7 +4416,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   >
     <span
       className="TextInput-icon"
-      data-testid="text-input-leading-visual"
     >
       <div
         className="c2"
@@ -4476,7 +4474,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
     </span>
     <span
       className="TextInput-icon"
-      data-testid="text-input-trailing-visual"
     >
       <div
         className="c2"
@@ -4696,7 +4693,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
     </span>
     <span
       className="TextInput-icon"
-      data-testid="text-input-trailing-visual"
     >
       <div
         className="c4"
@@ -4917,7 +4913,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   >
     <span
       className="TextInput-icon"
-      data-testid="text-input-leading-visual"
     >
       <div
         className="c2"
@@ -5006,7 +5001,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
     </span>
     <span
       className="TextInput-icon"
-      data-testid="text-input-trailing-visual"
     >
       <div
         className="c2"
@@ -5227,7 +5221,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   >
     <span
       className="TextInput-icon"
-      data-testid="text-input-leading-visual"
     >
       <div
         className="c2"
@@ -5316,7 +5309,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
     </span>
     <span
       className="TextInput-icon"
-      data-testid="text-input-trailing-visual"
     >
       <div
         className="c2"
@@ -5537,7 +5529,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   >
     <span
       className="TextInput-icon"
-      data-testid="text-input-leading-visual"
     >
       <div
         className="c2"
@@ -5626,7 +5617,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
     </span>
     <span
       className="TextInput-icon"
-      data-testid="text-input-trailing-visual"
     >
       <div
         className="c2"
@@ -5855,7 +5845,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
     </span>
     <span
       className="TextInput-icon"
-      data-testid="text-input-trailing-visual"
     >
       <div
         className="c4"
@@ -6106,7 +6095,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   >
     <span
       className="TextInput-icon"
-      data-testid="text-input-leading-visual"
     >
       <div
         className="c2"
@@ -6165,7 +6153,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
     </span>
     <span
       className="TextInput-icon"
-      data-testid="text-input-trailing-visual"
     >
       <div
         className="c2"
@@ -6424,7 +6411,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
     </span>
     <span
       className="TextInput-icon"
-      data-testid="text-input-trailing-visual"
     >
       <div
         className="c4"
@@ -6693,7 +6679,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   >
     <span
       className="TextInput-icon"
-      data-testid="text-input-leading-visual"
     >
       <div
         className="c2"
@@ -6782,7 +6767,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
     </span>
     <span
       className="TextInput-icon"
-      data-testid="text-input-trailing-visual"
     >
       <div
         className="c2"
@@ -7042,7 +7026,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   >
     <span
       className="TextInput-icon"
-      data-testid="text-input-leading-visual"
     >
       <div
         className="c2"
@@ -7131,7 +7114,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
     </span>
     <span
       className="TextInput-icon"
-      data-testid="text-input-trailing-visual"
     >
       <div
         className="c2"
@@ -7398,7 +7380,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
   >
     <span
       className="TextInput-icon"
-      data-testid="text-input-leading-visual"
     >
       <div
         className="c2"
@@ -7487,7 +7468,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
     </span>
     <span
       className="TextInput-icon"
-      data-testid="text-input-trailing-visual"
     >
       <div
         className="c2"

diff --git a/packages/react/src/internal/components/TextInputInnerVisualSlot.tsx b/packages/react/src/internal/components/TextInputInnerVisualSlot.tsx
@@ -14,7 +14,7 @@ const TextInputInnerVisualSlot: React.FC<
     /** Used to provide a reference for usage with `aria-describedby` */
     id?: string
   }>
-> = ({children, hasLoadingIndicator, showLoadingIndicator, visualPosition, id, ...props}) => {
+> = ({children, hasLoadingIndicator, showLoadingIndicator, visualPosition, id}) => {
   if ((!children && !hasLoadingIndicator) || (visualPosition === 'leading' && !children && !showLoadingIndicator)) {
     return null
   }
@@ -28,7 +28,7 @@ const TextInputInnerVisualSlot: React.FC<
   }
 
   return (
-    <span className="TextInput-icon" {...props}>
+    <span className="TextInput-icon">
       <Box display="flex" position="relative" id={id}>
         {children && <Box sx={{visibility: showLoadingIndicator ? 'hidden' : 'visible'}}>{children}</Box>}
         <Spinner