Tag ellipses with Tooltip

e2e/components/InteractiveTag/InteractiveTag-test.avt.e2e.js

@@ -53,10 +53,12 @@ test.describe('@avt InteractiveTag', () => {
         theme: 'white',
       },
     });
+    const tooltip = page.getByRole('tooltip');
     const button = page.getByRole('button').first();
     await expect(button).toBeVisible();
     await page.keyboard.press('Tab');
     await expect(button).toBeFocused();
+    await expect(tooltip).toHaveAttribute('aria-hidden', 'false');
   });
 
   test('@avt-keyboard-nav OperationalTag', async ({ page }) => {
@@ -71,6 +73,10 @@ test.describe('@avt InteractiveTag', () => {
     await expect(button).toBeVisible();
     await page.keyboard.press('Tab');
     await expect(button).toBeFocused();
+    await expect(page.getByRole('tooltip')).toHaveAttribute(
+      'aria-hidden',
+      'false'
+    );
     await expect(button).toHaveClass(/cds--tag--red/);
 
     await page.keyboard.press('Tab');
@@ -87,7 +93,7 @@ test.describe('@avt InteractiveTag', () => {
     // Expecte the OperationalTag with tooltip be focusable and visible
     await expect(page.getByRole('button').nth(10)).toBeFocused();
     await page.keyboard.press('Enter');
-    await expect(page.getByText('View More')).toBeVisible();
+    await expect(page.getByText('Tag 1 name').first()).toBeVisible();
   });
 
   test('@avt-keyboard-nav SelectableTag', async ({ page }) => {
@@ -104,5 +110,10 @@ test.describe('@avt InteractiveTag', () => {
     await expect(tag).toBeFocused();
     await page.keyboard.press('Enter');
     await expect(tag).toHaveClass(/cds--tag--selectable-selected/);
+    await page.keyboard.press('Tab');
+    await expect(page.getByRole('tooltip')).toHaveAttribute(
+      'aria-hidden',
+      'false'
+    );
   });
 });

e2e/components/Tag/Tag-test.avt.e2e.js

@@ -32,4 +32,23 @@ test.describe('@avt Tag', () => {
     });
     await expect(page).toHaveNoACViolations('Tag-skeleton');
   });
+
+  test('@avt-keyboard-nav Tag', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Tag',
+      id: 'components-tag--read-only',
+      globals: {
+        theme: 'white',
+      },
+    });
+    const button = page.getByRole('button').first();
+    await expect(button).toBeVisible();
+    await page.keyboard.press('Tab');
+    await expect(button).toBeFocused();
+    // Expect Tooltip to be visible
+    await expect(page.getByRole('tooltip')).toHaveAttribute(
+      'aria-hidden',
+      'false'
+    );
+  });
 });

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -8438,6 +8438,9 @@ Map {
       "slug": Object {
         "type": "node",
       },
+      "text": Object {
+        "type": "string",
+      },
       "title": [Function],
       "type": Object {
         "args": Array [

packages/react/src/components/Tag/DismissibleTag.tsx

@@ -17,11 +17,6 @@ import { Close } from '@carbon/icons-react';
 const getInstanceId = setupGetInstanceId();
 
 export interface DismissibleTagBaseProps {
-  /**
-   * Provide content to be rendered inside of a `DismissibleTag`
-   */
-  children?: React.ReactNode;
-
   /**
    * Provide a custom className that is applied to the containing <span>
    */
@@ -59,6 +54,11 @@ export interface DismissibleTagBaseProps {
    */
   slug?: ReactNodeLike;
 
+  /**
+   * Provide text to be rendered inside of a the tag.
+   */
+  text?: string;
+
   /**
    * Text to show on clear filters
    */
@@ -76,7 +76,6 @@ export type DismissibleTagProps<T extends React.ElementType> = PolymorphicProps<
 >;
 
 const DismissibleTag = <T extends React.ElementType>({
-  children,
   className,
   disabled,
   id,
@@ -85,6 +84,7 @@ const DismissibleTag = <T extends React.ElementType>({
   onClose,
   slug,
   size,
+  text,
   type,
   ...other
 }: DismissibleTagProps<T>) => {
@@ -118,30 +118,26 @@ const DismissibleTag = <T extends React.ElementType>({
       renderIcon={renderIcon}
       disabled={disabled}
       className={tagClasses}
+      text={text}
       id={tagId}
       {...otherProps}>
-      <div className={`${prefix}--interactive--tag-children`}>
-        {children}
-        {normalizedSlug}
-        <button
-          type="button"
-          className={`${prefix}--tag__close-icon`}
-          onClick={handleClose}
-          disabled={disabled}
-          aria-label={title}
-          title={title}>
-          <Close />
-        </button>
-      </div>
+      {normalizedSlug}
+      <button
+        onFocus={(event) => {
+          event.stopPropagation();
+        }}
+        type="button"
+        className={`${prefix}--tag__close-icon`}
+        onClick={handleClose}
+        disabled={disabled}
+        aria-label={title}
+        title={title}>
+        <Close />
+      </button>
     </Tag>
   );
 };
 DismissibleTag.propTypes = {
-  /**
-   * Provide content to be rendered inside of a `DismissibleTag`
-   */
-  children: PropTypes.node,
-
   /**
    * Provide a custom className that is applied to the containing <span>
    */
@@ -179,6 +175,11 @@ DismissibleTag.propTypes = {
    */
   slug: PropTypes.node,
 
+  /**
+   * Provide text to be rendered inside of a the tag.
+   */
+  text: PropTypes.string,
+
   /**
    * Text to show on clear filters
    */