From 5d000635c3a9fc798d09d5e0455bfaa9d244c07b Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Tue, 17 Oct 2023 15:36:03 -0400
Subject: [PATCH] feat(React): update more components to use Text, improve RTL
 support (#14679)

* feat(React): update more components to use Text, improve RTL support

* test(snapshot): update snapshots

* feat(React): more component updates, fix tests

* feat(React): add Text to more components

* feat(React): add Text to a few more components

* test(React): fix fileuploader tests

* fix(Tabs): set text as div for secondary label
---
 packages/react/.storybook/preview.js          |  8 +-
 .../__snapshots__/Accordion-test.js.snap      |  3 +
 .../__snapshots__/AccordionItem-test.js.snap  |  1 +
 .../components/Breadcrumb/BreadcrumbItem.js   |  3 +-
 .../DataTable/TableBatchActions.tsx           |  2 +-
 .../__snapshots__/DataTable-test.js.snap      | 14 ++-
 .../DatePickerInput/DatePickerInput.tsx       | 22 +++--
 .../components/FileUploader/FileUploader.tsx  | 17 ++--
 .../FileUploader/FileUploaderItem.tsx         | 22 +++--
 .../__tests__/FileUploader-test.js            | 18 ++--
 .../__tests__/FluidTextInput-test.js          | 14 ++-
 .../components/FormLabel/FormLabel-test.js    |  8 +-
 .../src/components/FormLabel/FormLabel.tsx    |  5 +-
 .../src/components/ListItem/ListItem.tsx      | 13 ++-
 .../react/src/components/Menu/MenuItem.js     |  5 +-
 packages/react/src/components/Modal/Modal.js  | 15 +++-
 .../components/Notification/Notification.tsx  | 33 ++++---
 .../components/NumberInput/NumberInput.tsx    |  9 +-
 .../NumberInput/__tests__/NumberInput-test.js |  9 +-
 .../OverflowMenu/OverflowMenu.stories.js      |  6 +-
 .../OverflowMenuItem/OverflowMenuItem.tsx     |  5 +-
 .../ProgressIndicator/ProgressIndicator.js    |  9 +-
 .../components/RadioTile/RadioTile-test.js    | 55 +++++++++---
 .../src/components/RadioTile/RadioTile.js     |  3 +-
 .../react/src/components/Select/Select.tsx    | 13 +--
 .../Select/__tests__/Select-test.js           |  2 +-
 .../src/components/Slider/Slider-test.js      | 13 ++-
 .../react/src/components/Slider/Slider.tsx    | 27 +++---
 .../StructuredList/StructuredList.tsx         |  9 +-
 packages/react/src/components/Tabs/Tabs.tsx   | 12 +--
 packages/react/src/components/Tag/Tag.tsx     |  9 +-
 packages/react/src/components/Text/Text.tsx   |  2 +-
 .../src/components/Text/TextDirection.tsx     |  2 +-
 .../src/components/TextArea/TextArea.tsx      | 25 ++++--
 .../src/components/TextInput/TextInput.tsx    | 13 +--
 .../TextInput/__tests__/PasswordInput-test.js | 14 ++-
 .../TextInput/__tests__/TextInput-test.js     | 14 ++-
 packages/react/src/components/Tile/Tile.tsx   |  5 +-
 .../TileGroup/__tests__/TileGroup-test.js     | 88 ++++++++++++++-----
 .../react/src/components/Toggle/Toggle.tsx    |  7 +-
 .../src/internal/useNormalizedInputProps.js   | 11 ++-
 41 files changed, 393 insertions(+), 172 deletions(-)

diff --git a/packages/react/.storybook/preview.js b/packages/react/.storybook/preview.js
index 3ba18aeb89bc..b9bc4a79201c 100644
--- a/packages/react/.storybook/preview.js
+++ b/packages/react/.storybook/preview.js
@@ -21,6 +21,7 @@ import React from 'react';
 import { breakpoints } from '@carbon/layout';
 import { GlobalTheme } from '../src/components/Theme';
 import { Layout } from '../src/components/Layout';
+import { TextDirection } from '../src/components/Text';
 
 import theme from './theme';
 
@@ -322,7 +323,12 @@ const decorators = [
     return (
       <GlobalTheme theme={theme}>
         <Layout size={layoutSize || null} density={layoutDensity || null}>
-          <Story key={randomKey} {...context} />
+          <TextDirection
+            getTextDirection={(text) => {
+              return dir;
+            }}>
+            <Story key={randomKey} {...context} />
+          </TextDirection>
         </Layout>
       </GlobalTheme>
     );
diff --git a/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap b/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap
index 8cdcca8cd56f..8e65efac1227 100644
--- a/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap
+++ b/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap
@@ -31,6 +31,7 @@ exports[`Accordion should render 1`] = `
         </svg>
         <div
           class="cds--accordion__title"
+          dir="auto"
         >
           Heading A
         </div>
@@ -68,6 +69,7 @@ exports[`Accordion should render 1`] = `
         </svg>
         <div
           class="cds--accordion__title"
+          dir="auto"
         >
           Heading B
         </div>
@@ -105,6 +107,7 @@ exports[`Accordion should render 1`] = `
         </svg>
         <div
           class="cds--accordion__title"
+          dir="auto"
         >
           Heading C
         </div>
diff --git a/packages/react/src/components/Accordion/__tests__/__snapshots__/AccordionItem-test.js.snap b/packages/react/src/components/Accordion/__tests__/__snapshots__/AccordionItem-test.js.snap
index c44d8ef26141..d031bf658ca9 100644
--- a/packages/react/src/components/Accordion/__tests__/__snapshots__/AccordionItem-test.js.snap
+++ b/packages/react/src/components/Accordion/__tests__/__snapshots__/AccordionItem-test.js.snap
@@ -28,6 +28,7 @@ exports[`AccordionItem renders as expected - Component API should render and mat
       </svg>
       <div
         class="cds--accordion__title"
+        dir="auto"
       >
         Test title
       </div>
diff --git a/packages/react/src/components/Breadcrumb/BreadcrumbItem.js b/packages/react/src/components/Breadcrumb/BreadcrumbItem.js
index 8ad5a5cce133..18b3e8eb960e 100644
--- a/packages/react/src/components/Breadcrumb/BreadcrumbItem.js
+++ b/packages/react/src/components/Breadcrumb/BreadcrumbItem.js
@@ -11,6 +11,7 @@ import cx from 'classnames';
 import Link from '../Link';
 import { OverflowMenuHorizontal } from '@carbon/icons-react';
 import { usePrefix } from '../../internal/usePrefix';
+import { Text } from '../Text';
 
 const BreadcrumbItem = React.forwardRef(function BreadcrumbItem(
   {
@@ -60,7 +61,7 @@ const BreadcrumbItem = React.forwardRef(function BreadcrumbItem(
             {children}
           </Link>
         ) : (
-          <span className={`${prefix}--link`}>{children}</span>
+          <Text className={`${prefix}--link`}>{children}</Text>
         )}
       </li>
     );
diff --git a/packages/react/src/components/DataTable/TableBatchActions.tsx b/packages/react/src/components/DataTable/TableBatchActions.tsx
index 6eb6e9d26af8..7414d3b35842 100644
--- a/packages/react/src/components/DataTable/TableBatchActions.tsx
+++ b/packages/react/src/components/DataTable/TableBatchActions.tsx
@@ -134,7 +134,7 @@ const TableBatchActions: TableBatchActionsComponent = ({
       {...rest}>
       <div className={batchSummaryClasses}>
         <p className={`${prefix}--batch-summary__para`}>
-          <Text as="span">
+          <Text>
             {totalSelected > 1 || totalSelected === 0
               ? t('carbon.table.batch.items.selected', { totalSelected })
               : t('carbon.table.batch.item.selected', { totalSelected })}
diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
index 76fbe8b34092..fde96d4734f7 100644
--- a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
+++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
@@ -75,6 +75,7 @@ exports[`DataTable behaves as expected selection -- radio buttons should not hav
                   />
                   <span
                     class="cds--radio-button__label-text cds--visually-hidden"
+                    dir="auto"
                   >
                     Select row
                   </span>
@@ -112,6 +113,7 @@ exports[`DataTable behaves as expected selection -- radio buttons should not hav
                   />
                   <span
                     class="cds--radio-button__label-text cds--visually-hidden"
+                    dir="auto"
                   >
                     Select row
                   </span>
@@ -149,6 +151,7 @@ exports[`DataTable behaves as expected selection -- radio buttons should not hav
                   />
                   <span
                     class="cds--radio-button__label-text cds--visually-hidden"
+                    dir="auto"
                   >
                     Select row
                   </span>
@@ -244,6 +247,7 @@ exports[`DataTable behaves as expected selection -- radio buttons should render
                   />
                   <span
                     class="cds--radio-button__label-text cds--visually-hidden"
+                    dir="auto"
                   >
                     Select row
                   </span>
@@ -281,6 +285,7 @@ exports[`DataTable behaves as expected selection -- radio buttons should render
                   />
                   <span
                     class="cds--radio-button__label-text cds--visually-hidden"
+                    dir="auto"
                   >
                     Select row
                   </span>
@@ -318,6 +323,7 @@ exports[`DataTable behaves as expected selection -- radio buttons should render
                   />
                   <span
                     class="cds--radio-button__label-text cds--visually-hidden"
+                    dir="auto"
                   >
                     Select row
                   </span>
@@ -371,7 +377,9 @@ exports[`DataTable behaves as expected selection should render and match snapsho
           <p
             class="cds--batch-summary__para"
           >
-            <span>
+            <span
+              dir="auto"
+            >
               0 items selected
             </span>
           </p>
@@ -812,7 +820,9 @@ exports[`DataTable renders as expected - Component API should render and match s
           <p
             class="cds--batch-summary__para"
           >
-            <span>
+            <span
+              dir="auto"
+            >
               0 items selected
             </span>
           </p>
diff --git a/packages/react/src/components/DatePickerInput/DatePickerInput.tsx b/packages/react/src/components/DatePickerInput/DatePickerInput.tsx
index 89b237cb3094..f0b7a1271259 100644
--- a/packages/react/src/components/DatePickerInput/DatePickerInput.tsx
+++ b/packages/react/src/components/DatePickerInput/DatePickerInput.tsx
@@ -13,6 +13,7 @@ import { usePrefix } from '../../internal/usePrefix';
 import { FormContext } from '../FluidForm';
 import setupGetInstanceId from '../../tools/setupGetInstanceId';
 import { ReactAttr } from '../../types/common';
+import { Text } from '../Text';
 
 const getInstanceId = setupGetInstanceId();
 type ExcludedAttributes = 'value' | 'onChange' | 'locale' | 'children';
@@ -211,9 +212,9 @@ const DatePickerInput = React.forwardRef(function DatePickerInput(
   return (
     <div className={containerClasses}>
       {labelText && (
-        <label htmlFor={id} className={labelClasses}>
+        <Text as="label" htmlFor={id} className={labelClasses}>
           {labelText}
-        </label>
+        </Text>
       )}
       <div className={wrapperClasses}>
         {input}
@@ -227,19 +228,26 @@ const DatePickerInput = React.forwardRef(function DatePickerInput(
       {invalid && (
         <>
           {isFluid && <hr className={`${prefix}--date-picker__divider`} />}
-          <div className={`${prefix}--form-requirement`}>{invalidText}</div>
+          <Text as="div" className={`${prefix}--form-requirement`}>
+            {invalidText}
+          </Text>
         </>
       )}
       {warn && (
         <>
           {isFluid && <hr className={`${prefix}--date-picker__divider`} />}
-          <div className={`${prefix}--form-requirement`}>{warnText}</div>
+          <Text as="div" className={`${prefix}--form-requirement`}>
+            {warnText}
+          </Text>
         </>
       )}
-      {helperText && (
-        <div id={datePickerInputHelperId} className={helperTextClasses}>
+      {helperText && !invalid && (
+        <Text
+          as="div"
+          id={datePickerInputHelperId}
+          className={helperTextClasses}>
           {helperText}
-        </div>
+        </Text>
       )}
     </div>
   );
diff --git a/packages/react/src/components/FileUploader/FileUploader.tsx b/packages/react/src/components/FileUploader/FileUploader.tsx
index 072c7c34940e..7466f0173e11 100644
--- a/packages/react/src/components/FileUploader/FileUploader.tsx
+++ b/packages/react/src/components/FileUploader/FileUploader.tsx
@@ -14,6 +14,7 @@ import { ButtonKinds } from '../../prop-types/types';
 import { keys, matches } from '../../internal/keyboard';
 import { PrefixContext } from '../../internal/usePrefix';
 import { ReactAttr } from '../../types/common';
+import { Text } from '../Text';
 
 export interface FileUploaderProps extends ReactAttr<HTMLSpanElement> {
   /**
@@ -296,13 +297,17 @@ export default class FileUploader extends React.Component<
     return (
       <div className={classes} {...other}>
         {!labelTitle ? null : (
-          <p className={getHelperLabelClasses(`${prefix}--file--label`)}>
+          <Text
+            as="p"
+            className={getHelperLabelClasses(`${prefix}--file--label`)}>
             {labelTitle}
-          </p>
+          </Text>
         )}
-        <p className={getHelperLabelClasses(`${prefix}--label-description`)}>
+        <Text
+          as="p"
+          className={getHelperLabelClasses(`${prefix}--label-description`)}>
           {labelDescription}
-        </p>
+        </Text>
         <FileUploaderButton
           innerRef={this.uploaderButton}
           disabled={disabled}
@@ -324,9 +329,9 @@ export default class FileUploader extends React.Component<
                   className={selectedFileClasses}
                   ref={(node) => (this.nodes[index] = node as HTMLSpanElement)} // eslint-disable-line
                   {...other}>
-                  <p className={`${prefix}--file-filename`} id={name}>
+                  <Text as="p" className={`${prefix}--file-filename`} id={name}>
                     {name}
-                  </p>
+                  </Text>
                   <span className={`${prefix}--file__state-container`}>
                     <Filename
                       name={name}
diff --git a/packages/react/src/components/FileUploader/FileUploaderItem.tsx b/packages/react/src/components/FileUploader/FileUploaderItem.tsx
index 69b6d07876fb..00cb28bc3f6d 100644
--- a/packages/react/src/components/FileUploader/FileUploaderItem.tsx
+++ b/packages/react/src/components/FileUploader/FileUploaderItem.tsx
@@ -13,6 +13,7 @@ import { keys, matches } from '../../internal/keyboard';
 import uid from '../../tools/uniqueId';
 import { usePrefix } from '../../internal/usePrefix';
 import { ReactAttr } from '../../types/common';
+import { Text } from '../Text';
 import { Tooltip } from '../Tooltip';
 
 export interface FileUploaderItemProps extends ReactAttr<HTMLSpanElement> {
@@ -115,19 +116,24 @@ function FileUploaderItem({
             align="bottom"
             className={`${prefix}--file-filename-tooltip`}>
             <button className={`${prefix}--file-filename-button`} type="button">
-              <p
+              <Text
+                as="p"
                 title={name}
                 className={`${prefix}--file-filename-button`}
                 id={name}>
                 {name}
-              </p>
+              </Text>
             </button>
           </Tooltip>
         </div>
       ) : (
-        <p title={name} className={`${prefix}--file-filename`} id={name}>
+        <Text
+          as="p"
+          title={name}
+          className={`${prefix}--file-filename`}
+          id={name}>
           {name}
-        </p>
+        </Text>
       )}
 
       <div className={`${prefix}--file-container-item`}>
@@ -159,13 +165,13 @@ function FileUploaderItem({
           className={`${prefix}--form-requirement`}
           role="alert"
           id={`${name}-id-error`}>
-          <div className={`${prefix}--form-requirement__title`}>
+          <Text as="div" className={`${prefix}--form-requirement__title`}>
             {errorSubject}
-          </div>
+          </Text>
           {errorBody && (
-            <p className={`${prefix}--form-requirement__supplement`}>
+            <Text as="p" className={`${prefix}--form-requirement__supplement`}>
               {errorBody}
-            </p>
+            </Text>
           )}
         </div>
       )}
diff --git a/packages/react/src/components/FileUploader/__tests__/FileUploader-test.js b/packages/react/src/components/FileUploader/__tests__/FileUploader-test.js
index 40aa39b554a5..7a750b3219fc 100644
--- a/packages/react/src/components/FileUploader/__tests__/FileUploader-test.js
+++ b/packages/react/src/components/FileUploader/__tests__/FileUploader-test.js
@@ -12,21 +12,13 @@ import FileUploader from '../';
 import { uploadFiles } from '../test-helpers';
 
 const iconDescription = 'test description';
-const requiredProps = { iconDescription };
+const requiredProps = {
+  iconDescription,
+  labelTitle: 'Upload files',
+  labelDescription: 'Max file size is 500mb. Only .jpg files are supported.',
+};
 
 describe('FileUploader', () => {
-  describe('automated accessibility tests', () => {
-    it.skip('should have no axe violations', async () => {
-      const { container } = render(<FileUploader {...requiredProps} />);
-      await expect(container).toHaveNoAxeViolations();
-    });
-
-    it.skip('should have no AC violations', async () => {
-      const { container } = render(<FileUploader {...requiredProps} />);
-      await expect(container).toHaveNoACViolations('FileUploader');
-    });
-  });
-
   it('should support a custom class name on the root element', () => {
     const { container } = render(
       <FileUploader {...requiredProps} className="test" />
diff --git a/packages/react/src/components/FluidTextInput/__tests__/FluidTextInput-test.js b/packages/react/src/components/FluidTextInput/__tests__/FluidTextInput-test.js
index fafabb2b9724..d544ac498d62 100644
--- a/packages/react/src/components/FluidTextInput/__tests__/FluidTextInput-test.js
+++ b/packages/react/src/components/FluidTextInput/__tests__/FluidTextInput-test.js
@@ -81,7 +81,12 @@ describe('FluidTextInput', () => {
 
     it('should respect invalid prop', () => {
       const { container } = render(
-        <FluidTextInput id="input-1" labelText="FluidTextInput" invalid />
+        <FluidTextInput
+          id="input-1"
+          labelText="FluidTextInput"
+          invalid
+          invalidText="Invalid"
+        />
       );
 
       // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
@@ -172,7 +177,12 @@ describe('FluidTextInput', () => {
 
     it('should respect warn prop', () => {
       const { container } = render(
-        <FluidTextInput id="input-1" labelText="FluidTextInput label" warn />
+        <FluidTextInput
+          id="input-1"
+          labelText="FluidTextInput label"
+          warn
+          warnText="Warning"
+        />
       );
 
       // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
diff --git a/packages/react/src/components/FormLabel/FormLabel-test.js b/packages/react/src/components/FormLabel/FormLabel-test.js
index c149a5b6f377..5613f41653c3 100644
--- a/packages/react/src/components/FormLabel/FormLabel-test.js
+++ b/packages/react/src/components/FormLabel/FormLabel-test.js
@@ -11,19 +11,21 @@ import FormLabel from '../FormLabel';
 
 describe('FormLabel', () => {
   it('should support a custom `className` prop on the outermost element', () => {
-    const { container } = render(<FormLabel className="test" />);
+    const { container } = render(<FormLabel className="test">Label</FormLabel>);
     expect(container.firstChild).toHaveClass('test');
   });
 
   it('should spread extra props on the outermost element', () => {
     const { container } = render(
-      <FormLabel aria-label="test" data-testid="test" />
+      <FormLabel aria-label="test" data-testid="test">
+        Label
+      </FormLabel>
     );
     expect(container.firstChild).toHaveAttribute('data-testid', 'test');
   });
 
   it('should support a unique id prop on the outermost element', () => {
-    const { container } = render(<FormLabel id="test-1" />);
+    const { container } = render(<FormLabel id="test-1">Label</FormLabel>);
     expect(container.firstChild).toHaveProperty('htmlFor', 'test-1');
   });
 });
diff --git a/packages/react/src/components/FormLabel/FormLabel.tsx b/packages/react/src/components/FormLabel/FormLabel.tsx
index b0f4aa80092c..5e1743b1f030 100644
--- a/packages/react/src/components/FormLabel/FormLabel.tsx
+++ b/packages/react/src/components/FormLabel/FormLabel.tsx
@@ -9,6 +9,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
+import { Text } from '../Text';
 
 export interface FormLabelProps
   extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'htmlFor'> {
@@ -42,9 +43,9 @@ function FormLabel({
   );
 
   return (
-    <label htmlFor={id} className={className} {...rest}>
+    <Text as="label" htmlFor={id} className={className} {...rest}>
       {children}
-    </label>
+    </Text>
   );
 }
 
diff --git a/packages/react/src/components/ListItem/ListItem.tsx b/packages/react/src/components/ListItem/ListItem.tsx
index 9fa18f078f04..eba39652f552 100644
--- a/packages/react/src/components/ListItem/ListItem.tsx
+++ b/packages/react/src/components/ListItem/ListItem.tsx
@@ -9,13 +9,22 @@ import PropTypes from 'prop-types';
 import React, { type ComponentProps } from 'react';
 import classnames from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
+import { Text } from '../Text';
 
 type ListItemProps = ComponentProps<'li'>;
 
-export default function ListItem({ className, ...other }: ListItemProps) {
+export default function ListItem({
+  className,
+  children,
+  ...other
+}: ListItemProps) {
   const prefix = usePrefix();
   const classNames = classnames(`${prefix}--list__item`, className);
-  return <li className={classNames} {...other} />;
+  return (
+    <Text as="li" className={classNames} {...other}>
+      {children}
+    </Text>
+  );
 }
 
 ListItem.propTypes = {
diff --git a/packages/react/src/components/Menu/MenuItem.js b/packages/react/src/components/Menu/MenuItem.js
index 87e4ad30dbd3..8e68928053d0 100644
--- a/packages/react/src/components/Menu/MenuItem.js
+++ b/packages/react/src/components/Menu/MenuItem.js
@@ -18,6 +18,7 @@ import { usePrefix } from '../../internal/usePrefix';
 import { Menu } from './Menu';
 import { MenuContext } from './MenuContext';
 import { useLayoutDirection } from '../LayoutDirection';
+import { Text } from '../Text';
 
 const hoverIntentDelay = 150; // in ms
 
@@ -162,7 +163,9 @@ const MenuItem = React.forwardRef(function MenuItem(
       <div className={`${prefix}--menu-item__icon`}>
         {IconElement && <IconElement />}
       </div>
-      <div className={`${prefix}--menu-item__label`}>{label}</div>
+      <Text as="div" className={`${prefix}--menu-item__label`}>
+        {label}
+      </Text>
       {shortcut && !hasChildren && (
         <div className={`${prefix}--menu-item__shortcut`}>{shortcut}</div>
       )}
diff --git a/packages/react/src/components/Modal/Modal.js b/packages/react/src/components/Modal/Modal.js
index 1d04dd39a7b9..5eca4542e223 100644
--- a/packages/react/src/components/Modal/Modal.js
+++ b/packages/react/src/components/Modal/Modal.js
@@ -19,6 +19,7 @@ import wrapFocus, {
 import setupGetInstanceId from '../../tools/setupGetInstanceId';
 import { usePrefix } from '../../internal/usePrefix';
 import { keys, match } from '../../internal/keyboard';
+import { Text } from '../Text';
 
 const getInstanceId = setupGetInstanceId();
 
@@ -240,13 +241,19 @@ const Modal = React.forwardRef(function Modal(
       <div className={`${prefix}--modal-header`}>
         {passiveModal && modalButton}
         {modalLabel && (
-          <h2 id={modalLabelId} className={`${prefix}--modal-header__label`}>
+          <Text
+            as="h2"
+            id={modalLabelId}
+            className={`${prefix}--modal-header__label`}>
             {modalLabel}
-          </h2>
+          </Text>
         )}
-        <h3 id={modalHeadingId} className={`${prefix}--modal-header__heading`}>
+        <Text
+          as="h3"
+          id={modalHeadingId}
+          className={`${prefix}--modal-header__heading`}>
           {modalHeading}
-        </h3>
+        </Text>
         {!passiveModal && modalButton}
       </div>
       <div
diff --git a/packages/react/src/components/Notification/Notification.tsx b/packages/react/src/components/Notification/Notification.tsx
index 1755614c2f90..2e86eb8c30b1 100644
--- a/packages/react/src/components/Notification/Notification.tsx
+++ b/packages/react/src/components/Notification/Notification.tsx
@@ -29,6 +29,7 @@ import {
   InformationSquareFilled,
 } from '@carbon/icons-react';
 
+import { Text } from '../Text';
 import Button, { type ButtonProps } from '../Button';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect';
 import { useNoInteractiveChildren } from '../../internal/useNoInteractiveChildren';
@@ -458,17 +459,19 @@ export function ToastNotification({
         ref={contentRef}
         className={`${prefix}--toast-notification__details`}>
         {title && (
-          <div className={`${prefix}--toast-notification__title`}>{title}</div>
+          <Text as="div" className={`${prefix}--toast-notification__title`}>
+            {title}
+          </Text>
         )}
         {subtitle && (
-          <div className={`${prefix}--toast-notification__subtitle`}>
+          <Text as="div" className={`${prefix}--toast-notification__subtitle`}>
             {subtitle}
-          </div>
+          </Text>
         )}
         {caption && (
-          <div className={`${prefix}--toast-notification__caption`}>
+          <Text as="div" className={`${prefix}--toast-notification__caption`}>
             {caption}
-          </div>
+          </Text>
         )}
         {children}
       </div>
@@ -711,14 +714,16 @@ export function InlineNotification({
           ref={contentRef}
           className={`${prefix}--inline-notification__text-wrapper`}>
           {title && (
-            <div className={`${prefix}--inline-notification__title`}>
+            <Text as="div" className={`${prefix}--inline-notification__title`}>
               {title}
-            </div>
+            </Text>
           )}
           {subtitle && (
-            <div className={`${prefix}--inline-notification__subtitle`}>
+            <Text
+              as="div"
+              className={`${prefix}--inline-notification__subtitle`}>
               {subtitle}
-            </div>
+            </Text>
           )}
           {children}
         </div>
@@ -986,18 +991,20 @@ export function ActionableNotification({
         <div className={`${prefix}--actionable-notification__text-wrapper`}>
           <div className={`${prefix}--actionable-notification__content`}>
             {title && (
-              <div
+              <Text
+                as="div"
                 className={`${prefix}--actionable-notification__title`}
                 id={id}>
                 {title}
-              </div>
+              </Text>
             )}
             {subtitle && (
-              <div
+              <Text
+                as="div"
                 className={`${prefix}--actionable-notification__subtitle`}
                 id={subtitleId}>
                 {subtitle}
-              </div>
+              </Text>
             )}
             {children}
           </div>
diff --git a/packages/react/src/components/NumberInput/NumberInput.tsx b/packages/react/src/components/NumberInput/NumberInput.tsx
index f5166819a932..99b084453a11 100644
--- a/packages/react/src/components/NumberInput/NumberInput.tsx
+++ b/packages/react/src/components/NumberInput/NumberInput.tsx
@@ -14,6 +14,7 @@ import { useNormalizedInputProps as normalize } from '../../internal/useNormaliz
 import { usePrefix } from '../../internal/usePrefix';
 import deprecate from '../../prop-types/deprecate';
 import { FormContext } from '../FluidForm';
+import { Text } from '../Text';
 
 export const translationIds = {
   'increment.number': 'increment.number',
@@ -596,9 +597,9 @@ function Label({ disabled, id, hideLabel, label }: Label) {
 
   if (label) {
     return (
-      <label htmlFor={id} className={className}>
+      <Text as="label" htmlFor={id} className={className}>
         {label}
-      </label>
+      </Text>
     );
   }
   return null;
@@ -624,9 +625,9 @@ function HelperText({ disabled, description, id }: HelperTextProps) {
 
   if (description) {
     return (
-      <div id={id} className={className}>
+      <Text as="div" id={id} className={className}>
         {description}
-      </div>
+      </Text>
     );
   }
   return null;
diff --git a/packages/react/src/components/NumberInput/__tests__/NumberInput-test.js b/packages/react/src/components/NumberInput/__tests__/NumberInput-test.js
index dea4100e9403..5c36402ef22a 100644
--- a/packages/react/src/components/NumberInput/__tests__/NumberInput-test.js
+++ b/packages/react/src/components/NumberInput/__tests__/NumberInput-test.js
@@ -69,7 +69,14 @@ describe('NumberInput', () => {
   });
 
   it('should allow an empty string as input to the underlying <input>', () => {
-    render(<NumberInput label="test-label" id="test" value="" />);
+    render(
+      <NumberInput
+        label="test-label"
+        id="test"
+        value=""
+        invalidText="test-invalid-text"
+      />
+    );
     expect(screen.getByLabelText('test-label')).toHaveValue(null);
   });
 
diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu.stories.js b/packages/react/src/components/OverflowMenu/OverflowMenu.stories.js
index 55db8c73726d..a392f665a166 100644
--- a/packages/react/src/components/OverflowMenu/OverflowMenu.stories.js
+++ b/packages/react/src/components/OverflowMenu/OverflowMenu.stories.js
@@ -25,7 +25,7 @@ export default {
 };
 
 export const Default = () => (
-  <OverflowMenu aria-label="overflow-menu">
+  <OverflowMenu flipped={document?.dir === 'rtl'} aria-label="overflow-menu">
     <OverflowMenuItem itemText="Stop app" />
     <OverflowMenuItem itemText="Restart app" />
     <OverflowMenuItem itemText="Rename app" />
@@ -36,7 +36,7 @@ export const Default = () => (
 );
 
 export const RenderCustomIcon = () => (
-  <OverflowMenu renderIcon={Filter}>
+  <OverflowMenu flipped={document?.dir === 'rtl'} renderIcon={Filter}>
     <OverflowMenuItem itemText="Filter A" />
     <OverflowMenuItem itemText="Filter B" />
   </OverflowMenu>
@@ -54,7 +54,7 @@ export const Playground = (args) => (
 );
 
 Playground.args = {
-  flipped: false,
+  flipped: document?.dir === 'rtl',
   focusTrap: false,
   open: false,
 };
diff --git a/packages/react/src/components/OverflowMenuItem/OverflowMenuItem.tsx b/packages/react/src/components/OverflowMenuItem/OverflowMenuItem.tsx
index 374f69af13b0..6ce51bc5d0b5 100644
--- a/packages/react/src/components/OverflowMenuItem/OverflowMenuItem.tsx
+++ b/packages/react/src/components/OverflowMenuItem/OverflowMenuItem.tsx
@@ -12,6 +12,7 @@ import { keys, match } from '../../internal/keyboard';
 import { usePrefix } from '../../internal/usePrefix';
 import { warning } from '../../internal/warning';
 import { ForwardRefReturn } from '../../types/common';
+import { Text } from '../Text';
 
 export interface OverflowMenuItemProps
   extends React.HTMLAttributes<HTMLElement> {
@@ -160,7 +161,7 @@ const OverflowMenuItem: OverflowMenuItemComponent = React.forwardRef(
     })();
 
     return (
-      <li className={overflowMenuItemClasses} role="none">
+      <Text as="li" className={overflowMenuItemClasses} role="none">
         <TagToUse
           className={overflowMenuBtnClasses}
           disabled={disabled}
@@ -183,7 +184,7 @@ const OverflowMenuItem: OverflowMenuItemComponent = React.forwardRef(
           {...rest}>
           {OverflowMenuItemContent}
         </TagToUse>
-      </li>
+      </Text>
     );
   }
 );
diff --git a/packages/react/src/components/ProgressIndicator/ProgressIndicator.js b/packages/react/src/components/ProgressIndicator/ProgressIndicator.js
index cf1af1fff618..70af1a73cce1 100644
--- a/packages/react/src/components/ProgressIndicator/ProgressIndicator.js
+++ b/packages/react/src/components/ProgressIndicator/ProgressIndicator.js
@@ -16,6 +16,7 @@ import {
   Incomplete,
 } from '@carbon/icons-react';
 import { usePrefix } from '../../internal/usePrefix';
+import { Text } from '../Text';
 
 const defaultTranslations = {
   'carbon.progress-step.complete': 'Complete',
@@ -212,9 +213,13 @@ function ProgressStep({
           prefix={prefix}
         />
         <div className={`${prefix}--progress-text`}>
-          <p className={`${prefix}--progress-label`}>{label}</p>
+          <Text as="p" className={`${prefix}--progress-label`}>
+            {label}
+          </Text>
           {secondaryLabel !== null && secondaryLabel !== undefined ? (
-            <p className={`${prefix}--progress-optional`}>{secondaryLabel}</p>
+            <Text as="p" className={`${prefix}--progress-optional`}>
+              {secondaryLabel}
+            </Text>
           ) : null}
         </div>
         <span className={`${prefix}--assistive-text`}>{message}</span>
diff --git a/packages/react/src/components/RadioTile/RadioTile-test.js b/packages/react/src/components/RadioTile/RadioTile-test.js
index 25cd5d547732..82077918c321 100644
--- a/packages/react/src/components/RadioTile/RadioTile-test.js
+++ b/packages/react/src/components/RadioTile/RadioTile-test.js
@@ -13,7 +13,11 @@ import { render, screen } from '@testing-library/react';
 describe('RadioTile', () => {
   describe('renders as expected - Component API', () => {
     it('should spread extra props onto outermost element', () => {
-      render(<RadioTile value="standard" data-testid="test-id" />);
+      render(
+        <RadioTile value="standard" data-testid="test-id">
+          Option 1
+        </RadioTile>
+      );
 
       // eslint-disable-next-line testing-library/no-node-access
       expect(document.querySelector('.cds--tile')).toHaveAttribute(
@@ -23,7 +27,11 @@ describe('RadioTile', () => {
     });
 
     it('should respect checked prop', () => {
-      render(<RadioTile value="standard" checked data-testid="test-id" />);
+      render(
+        <RadioTile value="standard" checked data-testid="test-id">
+          Option 1
+        </RadioTile>
+      );
 
       expect(screen.getByRole('radio')).toBeChecked();
       expect(screen.getByTestId('test-id')).toHaveClass(
@@ -36,35 +44,52 @@ describe('RadioTile', () => {
         <RadioTile
           value="standard"
           className="custom-class"
-          data-testid="test-id"
-        />
+          data-testid="test-id">
+          Option 1
+        </RadioTile>
       );
 
       expect(screen.getByTestId('test-id')).toHaveClass('custom-class');
     });
 
     it('should respect disabled prop', () => {
-      render(<RadioTile value="standard" disabled data-testid="test-id" />);
+      render(
+        <RadioTile value="standard" disabled data-testid="test-id">
+          Option 1
+        </RadioTile>
+      );
 
       expect(screen.getByRole('radio')).toBeDisabled();
       expect(screen.getByTestId('test-id')).toHaveClass('cds--tile--disabled');
     });
 
     it('should respect id prop', () => {
-      render(<RadioTile value="standard" id="tile-1" />);
+      render(
+        <RadioTile value="standard" id="tile-1">
+          Option 1
+        </RadioTile>
+      );
 
       expect(screen.getByRole('radio')).toHaveAttribute('id', 'tile-1');
     });
 
     it('should add name to input', () => {
-      render(<RadioTile value="standard" name="tile" />);
+      render(
+        <RadioTile value="standard" name="tile">
+          Option 1
+        </RadioTile>
+      );
 
       expect(screen.getByRole('radio')).toHaveAttribute('name', 'tile');
     });
 
     it('should call onChange when expected', async () => {
       const onChange = jest.fn();
-      render(<RadioTile value="standard" onChange={onChange} />);
+      render(
+        <RadioTile value="standard" onChange={onChange}>
+          Option 1
+        </RadioTile>
+      );
 
       await userEvent.click(screen.getByRole('radio'));
 
@@ -72,20 +97,28 @@ describe('RadioTile', () => {
     });
 
     it('should respect tabIndex prop', () => {
-      render(<RadioTile value="standard" tabIndex={-1} />);
+      render(
+        <RadioTile value="standard" tabIndex={-1}>
+          Option 1
+        </RadioTile>
+      );
 
       expect(screen.getByRole('radio')).toHaveAttribute('tabIndex', '-1');
     });
 
     it('should respect value prop', () => {
-      render(<RadioTile value="standard" />);
+      render(<RadioTile value="standard">Option 1</RadioTile>);
 
       expect(screen.getByDisplayValue('standard')).toBeInTheDocument();
     });
 
     it('should pass a given ref to the input element', () => {
       const ref = React.createRef();
-      render(<RadioTile ref={ref} value="some test value" />);
+      render(
+        <RadioTile ref={ref} value="some test value">
+          Option 1
+        </RadioTile>
+      );
 
       expect(ref.current.type).toEqual('radio');
       expect(ref.current.value).toEqual('some test value');
diff --git a/packages/react/src/components/RadioTile/RadioTile.js b/packages/react/src/components/RadioTile/RadioTile.js
index 26a85591981b..7cecb48abc2e 100644
--- a/packages/react/src/components/RadioTile/RadioTile.js
+++ b/packages/react/src/components/RadioTile/RadioTile.js
@@ -13,6 +13,7 @@ import { keys, matches } from '../../internal/keyboard';
 import { useFallbackId } from '../../internal/useId';
 import { usePrefix } from '../../internal/usePrefix';
 import deprecate from '../../prop-types/deprecate';
+import { Text } from '../Text';
 
 const RadioTile = React.forwardRef(function RadioTile(
   {
@@ -74,7 +75,7 @@ const RadioTile = React.forwardRef(function RadioTile(
         <span className={`${prefix}--tile__checkmark`}>
           <CheckmarkFilled />
         </span>
-        <span className={`${prefix}--tile-content`}>{children}</span>
+        <Text className={`${prefix}--tile-content`}>{children}</Text>
       </label>
     </div>
   );
diff --git a/packages/react/src/components/Select/Select.tsx b/packages/react/src/components/Select/Select.tsx
index a8a57368f27a..36627540a365 100644
--- a/packages/react/src/components/Select/Select.tsx
+++ b/packages/react/src/components/Select/Select.tsx
@@ -26,6 +26,7 @@ import { usePrefix } from '../../internal/usePrefix';
 import { FormContext } from '../FluidForm';
 import setupGetInstanceId from '../../tools/setupGetInstanceId';
 import { composeEventHandlers } from '../../tools/events';
+import { Text } from '../Text';
 
 const getInstanceId = setupGetInstanceId();
 
@@ -190,9 +191,9 @@ const Select = React.forwardRef(function Select(
   })();
   const error =
     invalid || warn ? (
-      <div className={`${prefix}--form-requirement`} id={errorId}>
+      <Text as="div" className={`${prefix}--form-requirement`} id={errorId}>
         {errorText}
-      </div>
+      </Text>
     ) : null;
   const helperTextClasses = classNames(`${prefix}--form__helper-text`, {
     [`${prefix}--form__helper-text--disabled`]: disabled,
@@ -203,9 +204,9 @@ const Select = React.forwardRef(function Select(
     : `select-helper-text-${selectInstanceId}`;
 
   const helper = helperText ? (
-    <div id={helperId} className={helperTextClasses}>
+    <Text as="div" id={helperId} className={helperTextClasses}>
       {helperText}
-    </div>
+    </Text>
   ) : null;
   const ariaProps = {};
   if (invalid) {
@@ -273,9 +274,9 @@ const Select = React.forwardRef(function Select(
     <div className={classNames(`${prefix}--form-item`, className)}>
       <div className={selectClasses}>
         {!noLabel && (
-          <label htmlFor={id} className={labelClasses}>
+          <Text as="label" htmlFor={id} className={labelClasses}>
             {labelText}
-          </label>
+          </Text>
         )}
         {inline && (
           <div className={`${prefix}--select-input--inline__wrapper`}>
diff --git a/packages/react/src/components/Select/__tests__/Select-test.js b/packages/react/src/components/Select/__tests__/Select-test.js
index e0a43f98e4fe..7418e601095d 100644
--- a/packages/react/src/components/Select/__tests__/Select-test.js
+++ b/packages/react/src/components/Select/__tests__/Select-test.js
@@ -215,7 +215,7 @@ describe('Select', () => {
 
     it('should respect warn prop', () => {
       const { container } = render(
-        <Select id="select" labelText="Select" warn />
+        <Select id="select" labelText="Select" warn warnText="Warning" />
       );
 
       // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
diff --git a/packages/react/src/components/Slider/Slider-test.js b/packages/react/src/components/Slider/Slider-test.js
index e9d9bbffae6f..aef02c459349 100644
--- a/packages/react/src/components/Slider/Slider-test.js
+++ b/packages/react/src/components/Slider/Slider-test.js
@@ -27,7 +27,18 @@ const renderSlider = ({
   step = 1,
   ...rest
 } = {}) =>
-  render(<Slider value={value} min={min} max={max} step={step} {...rest} />);
+  render(
+    <Slider
+      labelText="Slider"
+      value={value}
+      min={min}
+      max={max}
+      step={step}
+      invalidText="Invalid"
+      warnText="Warning"
+      {...rest}
+    />
+  );
 
 describe('Slider', () => {
   beforeEach(() => {
diff --git a/packages/react/src/components/Slider/Slider.tsx b/packages/react/src/components/Slider/Slider.tsx
index fae09a4bb430..bb5430ff99af 100644
--- a/packages/react/src/components/Slider/Slider.tsx
+++ b/packages/react/src/components/Slider/Slider.tsx
@@ -17,6 +17,7 @@ import { PrefixContext } from '../../internal/usePrefix';
 import deprecate from '../../prop-types/deprecate';
 import { FeatureFlagContext } from '../FeatureFlags';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
+import { Text } from '../Text';
 
 const defaultFormatLabel = (value, label) => {
   return typeof label === 'function' ? label(value) : `${value}${label}`;
@@ -825,13 +826,17 @@ export default class Slider extends PureComponent<SliderProps> {
 
           return (
             <div className={classNames(`${prefix}--form-item`, className)}>
-              <label htmlFor={id} className={labelClasses} id={labelId}>
+              <Text
+                as="label"
+                htmlFor={id}
+                className={labelClasses}
+                id={labelId}>
                 {labelText}
-              </label>
+              </Text>
               <div className={`${prefix}--slider-container`}>
-                <span className={`${prefix}--slider__range-label`}>
+                <Text className={`${prefix}--slider__range-label`}>
                   {formatLabel(min, minLabel)}
-                </span>
+                </Text>
                 {/* @ts-ignore onBlur + onChange types are incompatible*/}
                 <div
                   className={sliderClasses}
@@ -867,9 +872,9 @@ export default class Slider extends PureComponent<SliderProps> {
                     ref={this.filledTrackRef}
                   />
                 </div>
-                <span className={`${prefix}--slider__range-label`}>
+                <Text className={`${prefix}--slider__range-label`}>
                   {formatLabel(max, maxLabel)}
-                </span>
+                </Text>
                 <input
                   type={hideTextInput ? 'hidden' : inputType}
                   id={`${id}-input-for-slider`}
@@ -903,23 +908,25 @@ export default class Slider extends PureComponent<SliderProps> {
                 )}
               </div>
               {!readOnly && isValid === false && (
-                <div
+                <Text
+                  as="div"
                   className={classNames(
                     `${prefix}--slider__validation-msg`,
                     `${prefix}--slider__validation-msg--invalid`,
                     `${prefix}--form-requirement`
                   )}>
                   {invalidText}
-                </div>
+                </Text>
               )}
               {!readOnly && warn && isValid && (
-                <div
+                <Text
+                  as="div"
                   className={classNames(
                     `${prefix}--slider__validation-msg`,
                     `${prefix}--form-requirement`
                   )}>
                   {warnText}
-                </div>
+                </Text>
               )}
             </div>
           );
diff --git a/packages/react/src/components/StructuredList/StructuredList.tsx b/packages/react/src/components/StructuredList/StructuredList.tsx
index 023b7aa336a0..e01286a8b386 100644
--- a/packages/react/src/components/StructuredList/StructuredList.tsx
+++ b/packages/react/src/components/StructuredList/StructuredList.tsx
@@ -18,6 +18,7 @@ import classNames from 'classnames';
 import { useId } from '../../internal/useId';
 import deprecate from '../../prop-types/deprecate';
 import { usePrefix } from '../../internal/usePrefix';
+import { Text } from '../Text';
 
 type DivAttrs = HTMLAttributes<HTMLDivElement>;
 
@@ -473,16 +474,16 @@ export function StructuredListCell(props: StructuredListCellProps) {
 
   if (head) {
     return (
-      <span className={classes} role="columnheader" {...other}>
+      <Text className={classes} role="columnheader" {...other}>
         {children}
-      </span>
+      </Text>
     );
   }
 
   return (
-    <div className={classes} role="cell" {...other}>
+    <Text as="div" className={classes} role="cell" {...other}>
       {children}
-    </div>
+    </Text>
   );
 }
 StructuredListCell.propTypes = {
diff --git a/packages/react/src/components/Tabs/Tabs.tsx b/packages/react/src/components/Tabs/Tabs.tsx
index 09b54119adc4..e3b3b01b443a 100644
--- a/packages/react/src/components/Tabs/Tabs.tsx
+++ b/packages/react/src/components/Tabs/Tabs.tsx
@@ -41,6 +41,7 @@ import deprecate from '../../prop-types/deprecate';
 import { Close } from '@carbon/icons-react';
 import { useEvent } from '../../internal/useEvent';
 import { useMatchMedia } from '../../internal/useMatchMedia';
+import { Text } from '../Text';
 
 // Used to manage the overall state of the Tabs
 type TabsContextType = {
@@ -902,11 +903,11 @@ const Tab = forwardRef<HTMLElement, TabProps>(function Tab(
             {<Icon size={16} />}
           </div>
         )}
-        <span
+        <Text
           className={`${prefix}--tabs__nav-item-label`}
           title={children as string}>
           {children}
-        </span>
+        </Text>
         {/* always rendering dismissIcon so we don't lose reference to it, otherwise events do not work when switching from/to dismissable state */}
         <div
           className={cx(`${prefix}--tabs__nav-item--icon`, {
@@ -916,12 +917,13 @@ const Tab = forwardRef<HTMLElement, TabProps>(function Tab(
           {!dismissable && Icon && <Icon size={16} />}
         </div>
       </div>
-      {hasSecondaryLabel && (
-        <div
+      {hasSecondaryLabel && secondaryLabel && (
+        <Text
+          as="div"
           className={`${prefix}--tabs__nav-item-secondary-label`}
           title={secondaryLabel}>
           {secondaryLabel}
-        </div>
+        </Text>
       )}
     </BaseComponent>
   );
diff --git a/packages/react/src/components/Tag/Tag.tsx b/packages/react/src/components/Tag/Tag.tsx
index 2323dcbbae3f..f51a005d5839 100644
--- a/packages/react/src/components/Tag/Tag.tsx
+++ b/packages/react/src/components/Tag/Tag.tsx
@@ -12,6 +12,7 @@ import { Close } from '@carbon/icons-react';
 import setupGetInstanceId from '../../tools/setupGetInstanceId';
 import { usePrefix } from '../../internal/usePrefix';
 import { PolymorphicProps } from '../../types/common';
+import { Text } from '../Text';
 
 const getInstanceId = setupGetInstanceId();
 const TYPES = {
@@ -127,11 +128,11 @@ const Tag = <T extends React.ElementType>({
     const ComponentTag = BaseComponent ?? 'div';
     return (
       <ComponentTag className={tagClasses} id={tagId} {...other}>
-        <span
+        <Text
           className={`${prefix}--tag__label`}
           title={typeof children === 'string' ? children : undefined}>
           {children !== null && children !== undefined ? children : typeText}
-        </span>
+        </Text>
         <button
           type="button"
           className={`${prefix}--tag__close-icon`}
@@ -160,9 +161,9 @@ const Tag = <T extends React.ElementType>({
       ) : (
         ''
       )}
-      <span title={typeof children === 'string' ? children : undefined}>
+      <Text title={typeof children === 'string' ? children : undefined}>
         {children !== null && children !== undefined ? children : typeText}
-      </span>
+      </Text>
     </ComponentTag>
   );
 };
diff --git a/packages/react/src/components/Text/Text.tsx b/packages/react/src/components/Text/Text.tsx
index d5c3aedabe43..9f2785deb8f8 100644
--- a/packages/react/src/components/Text/Text.tsx
+++ b/packages/react/src/components/Text/Text.tsx
@@ -22,7 +22,7 @@ export type TextProps<T extends React.ElementType> = PolymorphicProps<
 function Text<T extends React.ElementType>({
   as,
   children,
-  dir,
+  dir = 'auto',
   ...rest
 }: TextProps<T>) {
   // TODO: Update with context typing once its been converted to TS
diff --git a/packages/react/src/components/Text/TextDirection.tsx b/packages/react/src/components/Text/TextDirection.tsx
index e3bc10a431a1..86451f0b3d82 100644
--- a/packages/react/src/components/Text/TextDirection.tsx
+++ b/packages/react/src/components/Text/TextDirection.tsx
@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 import React, { ReactNode, useEffect, useMemo, useRef } from 'react';
 import { TextDirectionContext } from './TextDirectionContext';
 
-export type TextDir = 'ltr' | 'rtl' | 'auto';
+export type TextDir = 'ltr' | 'rtl' | 'auto' | string;
 export type GetTextDirection = (text: string | string[] | undefined) => TextDir;
 
 export interface TextDirectionProps {
diff --git a/packages/react/src/components/TextArea/TextArea.tsx b/packages/react/src/components/TextArea/TextArea.tsx
index 90dddf30c5a6..fe4bdb5c4749 100644
--- a/packages/react/src/components/TextArea/TextArea.tsx
+++ b/packages/react/src/components/TextArea/TextArea.tsx
@@ -16,6 +16,7 @@ import { useAnnouncer } from '../../internal/useAnnouncer';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect';
 import { useMergedRefs } from '../../internal/useMergedRefs';
 import setupGetInstanceId from '../../tools/setupGetInstanceId';
+import { Text } from '../Text';
 
 const getInstanceId = setupGetInstanceId();
 
@@ -201,9 +202,9 @@ const TextArea = React.forwardRef((props: TextAreaProps, forwardRef) => {
   });
 
   const label = labelText ? (
-    <label htmlFor={id} className={labelClasses}>
+    <Text as="label" htmlFor={id} className={labelClasses}>
       {labelText}
-    </label>
+    </Text>
   ) : null;
 
   const counterClasses = classNames(`${prefix}--label`, {
@@ -212,7 +213,9 @@ const TextArea = React.forwardRef((props: TextAreaProps, forwardRef) => {
 
   const counter =
     enableCounter && maxCount ? (
-      <div className={counterClasses}>{`${textCount}/${maxCount}`}</div>
+      <Text
+        as="div"
+        className={counterClasses}>{`${textCount}/${maxCount}`}</Text>
     ) : null;
 
   const helperTextClasses = classNames(`${prefix}--form__helper-text`, {
@@ -224,31 +227,35 @@ const TextArea = React.forwardRef((props: TextAreaProps, forwardRef) => {
     : `text-area-helper-text-${textAreaInstanceId}`;
 
   const helper = helperText ? (
-    <div id={helperId} className={helperTextClasses}>
+    <Text as="div" id={helperId} className={helperTextClasses}>
       {helperText}
-    </div>
+    </Text>
   ) : null;
 
   const errorId = id + '-error-msg';
 
   const error = invalid ? (
-    <div role="alert" className={`${prefix}--form-requirement`} id={errorId}>
+    <Text
+      as="div"
+      role="alert"
+      className={`${prefix}--form-requirement`}
+      id={errorId}>
       {invalidText}
       {isFluid && (
         <WarningFilled className={`${prefix}--text-area__invalid-icon`} />
       )}
-    </div>
+    </Text>
   ) : null;
 
   const warning = warn ? (
-    <div role="alert" className={`${prefix}--form-requirement`}>
+    <Text as="div" role="alert" className={`${prefix}--form-requirement`}>
       {warnText}
       {isFluid && (
         <WarningAltFilled
           className={`${prefix}--text-area__invalid-icon ${prefix}--text-area__invalid-icon--warning`}
         />
       )}
-    </div>
+    </Text>
   ) : null;
 
   const textareaClasses = classNames(`${prefix}--text-area`, {
diff --git a/packages/react/src/components/TextInput/TextInput.tsx b/packages/react/src/components/TextInput/TextInput.tsx
index cf2b6ae19279..1cf25d2b3539 100644
--- a/packages/react/src/components/TextInput/TextInput.tsx
+++ b/packages/react/src/components/TextInput/TextInput.tsx
@@ -16,6 +16,7 @@ import { textInputProps } from './util';
 import { FormContext } from '../FluidForm';
 import { usePrefix } from '../../internal/usePrefix';
 import { useAnnouncer } from '../../internal/useAnnouncer';
+import { Text } from '../Text';
 
 type ExcludedAttributes = 'defaultValue' | 'id' | 'size' | 'value';
 
@@ -265,13 +266,15 @@ const TextInput = React.forwardRef(function TextInput(
 
   const counter =
     enableCounter && maxCount ? (
-      <div className={counterClasses}>{`${textCount}/${maxCount}`}</div>
+      <Text
+        as="div"
+        className={counterClasses}>{`${textCount}/${maxCount}`}</Text>
     ) : null;
 
   const label = labelText ? (
-    <label htmlFor={id} className={labelClasses}>
+    <Text as="label" htmlFor={id} className={labelClasses}>
       {labelText}
-    </label>
+    </Text>
   ) : null;
 
   const labelWrapper = (
@@ -282,9 +285,9 @@ const TextInput = React.forwardRef(function TextInput(
   );
 
   const helper = helperText ? (
-    <div id={normalizedProps.helperId} className={helperTextClasses}>
+    <Text as="div" id={normalizedProps.helperId} className={helperTextClasses}>
       {helperText}
-    </div>
+    </Text>
   ) : null;
 
   const input = (
diff --git a/packages/react/src/components/TextInput/__tests__/PasswordInput-test.js b/packages/react/src/components/TextInput/__tests__/PasswordInput-test.js
index fd7d323b1cf7..8cbb89dc8d99 100644
--- a/packages/react/src/components/TextInput/__tests__/PasswordInput-test.js
+++ b/packages/react/src/components/TextInput/__tests__/PasswordInput-test.js
@@ -121,7 +121,12 @@ describe('PasswordInput', () => {
 
     it('should respect invalid prop', () => {
       const { container } = render(
-        <PasswordInput id="input-1" labelText="PasswordInput label" invalid />
+        <PasswordInput
+          id="input-1"
+          labelText="PasswordInput label"
+          invalid
+          invalidText="Error"
+        />
       );
 
       // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
@@ -230,7 +235,12 @@ describe('PasswordInput', () => {
 
     it('should respect warn prop', () => {
       const { container } = render(
-        <PasswordInput id="input-1" labelText="PasswordInput label" warn />
+        <PasswordInput
+          id="input-1"
+          labelText="PasswordInput label"
+          warn
+          warnText="Warning"
+        />
       );
 
       // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
diff --git a/packages/react/src/components/TextInput/__tests__/TextInput-test.js b/packages/react/src/components/TextInput/__tests__/TextInput-test.js
index 9a83734139ae..eadd34e4bf86 100644
--- a/packages/react/src/components/TextInput/__tests__/TextInput-test.js
+++ b/packages/react/src/components/TextInput/__tests__/TextInput-test.js
@@ -101,7 +101,12 @@ describe('TextInput', () => {
 
     it('should respect invalid prop', () => {
       const { container } = render(
-        <TextInput id="input-1" labelText="TextInput" invalid />
+        <TextInput
+          id="input-1"
+          labelText="TextInput"
+          invalid
+          invalidText="Invalid"
+        />
       );
 
       // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
@@ -185,7 +190,12 @@ describe('TextInput', () => {
 
     it('should respect warn prop', () => {
       const { container } = render(
-        <TextInput id="input-1" labelText="TextInput label" warn />
+        <TextInput
+          id="input-1"
+          labelText="TextInput label"
+          warn
+          warnText="Warning"
+        />
       );
 
       // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
diff --git a/packages/react/src/components/Tile/Tile.tsx b/packages/react/src/components/Tile/Tile.tsx
index d345a4a96463..fed09383aac4 100644
--- a/packages/react/src/components/Tile/Tile.tsx
+++ b/packages/react/src/components/Tile/Tile.tsx
@@ -31,6 +31,7 @@ import {
 import { useMergedRefs } from '../../internal/useMergedRefs';
 import { useFeatureFlag } from '../FeatureFlags';
 import { useId } from '../../internal/useId';
+import { Text } from '../Text';
 
 export interface TileProps extends HTMLAttributes<HTMLDivElement> {
   children?: ReactNode;
@@ -406,9 +407,9 @@ export const SelectableTile = React.forwardRef<
         className={`${prefix}--tile__checkmark ${prefix}--tile__checkmark--persistent`}>
         {isSelected ? <CheckboxCheckedFilled /> : <Checkbox />}
       </span>
-      <label htmlFor={id} className={`${prefix}--tile-content`}>
+      <Text as="label" htmlFor={id} className={`${prefix}--tile-content`}>
         {children}
-      </label>
+      </Text>
     </div>
   );
 });
diff --git a/packages/react/src/components/TileGroup/__tests__/TileGroup-test.js b/packages/react/src/components/TileGroup/__tests__/TileGroup-test.js
index ba142efd5399..614c87659691 100644
--- a/packages/react/src/components/TileGroup/__tests__/TileGroup-test.js
+++ b/packages/react/src/components/TileGroup/__tests__/TileGroup-test.js
@@ -16,8 +16,12 @@ describe('PasswordInput', () => {
     it('should render `legend` in a <legend>', () => {
       render(
         <TileGroup defaultSelected="test-1" legend="TestGroup" name="test">
-          <RadioTile id="test-1" value="test-1" />
-          <RadioTile id="test-2" value="test-2" />
+          <RadioTile id="test-1" value="test-1">
+            Option 1
+          </RadioTile>
+          <RadioTile id="test-2" value="test-2">
+            Option 2
+          </RadioTile>
         </TileGroup>
       );
 
@@ -30,8 +34,12 @@ describe('PasswordInput', () => {
     it('should render <RadioTile> as children', () => {
       render(
         <TileGroup defaultSelected="test-1" legend="TestGroup" name="test">
-          <RadioTile id="test-1" value="test-1" />
-          <RadioTile id="test-2" value="test-2" />
+          <RadioTile id="test-1" value="test-1">
+            Option 1
+          </RadioTile>
+          <RadioTile id="test-2" value="test-2">
+            Option 2
+          </RadioTile>
         </TileGroup>
       );
 
@@ -52,8 +60,12 @@ describe('PasswordInput', () => {
           defaultSelected="test-1"
           legend="TestGroup"
           name="test">
-          <RadioTile id="test-1" value="test-1" />
-          <RadioTile id="test-2" value="test-2" />
+          <RadioTile id="test-1" value="test-1">
+            Option 1
+          </RadioTile>
+          <RadioTile id="test-2" value="test-2">
+            Option 2
+          </RadioTile>
         </TileGroup>
       );
 
@@ -67,8 +79,12 @@ describe('PasswordInput', () => {
           legend="TestGroup"
           name="test"
           disabled>
-          <RadioTile id="test-1" value="test-1" />
-          <RadioTile id="test-2" value="test-2" />
+          <RadioTile id="test-1" value="test-1">
+            Option 1
+          </RadioTile>
+          <RadioTile id="test-2" value="test-2">
+            Option 2
+          </RadioTile>
         </TileGroup>
       );
 
@@ -88,8 +104,12 @@ describe('PasswordInput', () => {
           legend="TestGroup"
           name="test"
           disabled>
-          <RadioTile id="test-1" value="test-1" />
-          <RadioTile id="test-2" value="test-2" />
+          <RadioTile id="test-1" value="test-1">
+            Option 1
+          </RadioTile>
+          <RadioTile id="test-2" value="test-2">
+            Option 2
+          </RadioTile>
         </TileGroup>
       );
 
@@ -107,8 +127,12 @@ describe('PasswordInput', () => {
           legend="TestGroup"
           name="test"
           disabled>
-          <RadioTile id="test-1" value="test-1" />
-          <RadioTile id="test-2" value="test-2" />
+          <RadioTile id="test-1" value="test-1">
+            Option 1
+          </RadioTile>
+          <RadioTile id="test-2" value="test-2">
+            Option 2
+          </RadioTile>
         </TileGroup>
       );
 
@@ -124,8 +148,12 @@ describe('PasswordInput', () => {
           legend="TestGroup"
           name="test"
           disabled>
-          <RadioTile id="test-1" value="test-1" />
-          <RadioTile id="test-2" value="test-2" />
+          <RadioTile id="test-1" value="test-1">
+            Option 1
+          </RadioTile>
+          <RadioTile id="test-2" value="test-2">
+            Option 2
+          </RadioTile>
         </TileGroup>
       );
 
@@ -139,8 +167,12 @@ describe('PasswordInput', () => {
     it('should set expected props on children', () => {
       render(
         <TileGroup defaultSelected="test-1" legend="TestGroup" name="test">
-          <RadioTile id="test-1" value="test-1" />
-          <RadioTile id="test-2" value="test-2" />
+          <RadioTile id="test-1" value="test-1">
+            Option 1
+          </RadioTile>
+          <RadioTile id="test-2" value="test-2">
+            Option 2
+          </RadioTile>
         </TileGroup>
       );
 
@@ -156,8 +188,12 @@ describe('PasswordInput', () => {
       const onChange = jest.fn();
       render(
         <TileGroup legend="TestGroup" name="test" onChange={onChange}>
-          <RadioTile id="test-1" value="test-1" />
-          <RadioTile id="test-2" value="test-2" />
+          <RadioTile id="test-1" value="test-1">
+            Option 1
+          </RadioTile>
+          <RadioTile id="test-2" value="test-2">
+            Option 2
+          </RadioTile>
         </TileGroup>
       );
 
@@ -182,8 +218,12 @@ describe('PasswordInput', () => {
     it('should change the current selection upon change in props', () => {
       const { rerender } = render(
         <TileGroup valueSelected="test-1" legend="TestGroup" name="test">
-          <RadioTile id="test-1" value="test-1" />
-          <RadioTile id="test-2" value="test-2" />
+          <RadioTile id="test-1" value="test-1">
+            Option 1
+          </RadioTile>
+          <RadioTile id="test-2" value="test-2">
+            Option 2
+          </RadioTile>
         </TileGroup>
       );
 
@@ -191,8 +231,12 @@ describe('PasswordInput', () => {
 
       rerender(
         <TileGroup valueSelected="test-2" legend="TestGroup" name="test">
-          <RadioTile id="test-1" value="test-1" />
-          <RadioTile id="test-2" value="test-2" />
+          <RadioTile id="test-1" value="test-1">
+            Option 1
+          </RadioTile>
+          <RadioTile id="test-2" value="test-2">
+            Option 2
+          </RadioTile>
         </TileGroup>
       );
 
diff --git a/packages/react/src/components/Toggle/Toggle.tsx b/packages/react/src/components/Toggle/Toggle.tsx
index a441986a5beb..b606418998f2 100644
--- a/packages/react/src/components/Toggle/Toggle.tsx
+++ b/packages/react/src/components/Toggle/Toggle.tsx
@@ -10,6 +10,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useControllableState } from '../../internal/useControllableState';
 import { usePrefix } from '../../internal/usePrefix';
+import { Text } from '../Text';
 
 type ExcludedAttributes =
   | 'aria-labelledby'
@@ -191,7 +192,7 @@ export function Toggle({
       <LabelComponent
         htmlFor={ariaLabelledby ? undefined : id}
         className={`${prefix}--toggle__label`}>
-        {labelText && <span className={labelTextClasses}>{labelText}</span>}
+        {labelText && <Text className={labelTextClasses}>{labelText}</Text>}
         <div className={appearanceClasses}>
           <div className={switchClasses}>
             {isSm && (
@@ -205,9 +206,9 @@ export function Toggle({
             )}
           </div>
           {renderSideLabel && (
-            <span className={`${prefix}--toggle__text`} aria-hidden="true">
+            <Text className={`${prefix}--toggle__text`} aria-hidden="true">
               {sideLabel}
-            </span>
+            </Text>
           )}
         </div>
       </LabelComponent>
diff --git a/packages/react/src/internal/useNormalizedInputProps.js b/packages/react/src/internal/useNormalizedInputProps.js
index 1c75aee07242..d89993a68253 100644
--- a/packages/react/src/internal/useNormalizedInputProps.js
+++ b/packages/react/src/internal/useNormalizedInputProps.js
@@ -8,6 +8,7 @@
 import React from 'react';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import { usePrefix } from './usePrefix';
+import { Text } from '../components/Text';
 
 /**
  * @typedef {object} InputProps
@@ -69,20 +70,22 @@ export function useNormalizedInputProps({
   if (normalizedProps.invalid) {
     normalizedProps.icon = WarningFilled;
     normalizedProps.validation = (
-      <div
+      <Text
+        as="div"
         className={`${prefix}--form-requirement`}
         id={normalizedProps.invalidId}>
         {invalidText}
-      </div>
+      </Text>
     );
   } else if (normalizedProps.warn) {
     normalizedProps.icon = WarningAltFilled;
     normalizedProps.validation = (
-      <div
+      <Text
+        as="div"
         className={`${prefix}--form-requirement`}
         id={normalizedProps.warnId}>
         {warnText}
-      </div>
+      </Text>
     );
   }