fix(TextInput): match skeleton state to other form elements (#7865)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: tw15egan

packages/components/src/components/text-input/_text-input.scss

@@ -214,6 +214,13 @@
     }
   }
 
+  //-----------------------------
+  // Skeleton
+  //-----------------------------
+  .#{$prefix}--skeleton.#{$prefix}--text-input {
+    @include skeleton;
+  }
+
   //-----------------------------
   // Fluid Text Input
   //-----------------------------

packages/react/src/components/TextInput/TextInput-story.js

@@ -204,18 +204,7 @@ FullyControlledTogglePasswordVisibility.parameters = {
   },
 };
 
-export const Skeleton = () => (
-  <div
-    aria-label="loading text input"
-    aria-live="assertive"
-    role="status"
-    tabIndex="0" // eslint-disable-line jsx-a11y/no-noninteractive-tabindex
-  >
-    <TextInputSkeleton />
-    <br />
-    <TextInputSkeleton hideLabel />
-  </div>
-);
+export const Skeleton = () => <TextInputSkeleton />;
 
 Skeleton.storyName = 'skeleton';