fix(18204): remove redundant aria-label in inline mode for AILabel co…

…mponent (#18407) * fix(18204): remove redundant aria-label in inline mode * test: adds tests
carbon-design-system · Jan 24, 2025 · 5e097cd · 5e097cd
1 parent eee39f8
commit 5e097cd
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 21 deletions.
diff --git a/packages/react/src/components/AILabel/__tests__/AILabel-test.js b/packages/react/src/components/AILabel/__tests__/AILabel-test.js
@@ -157,4 +157,25 @@ describe('AILabelActions', () => {
 
     expect(screen.getByText('View details')).toBeInTheDocument();
   });
+  describe('Labels and kind prop', () => {
+    it('should use empty label for inline kind', () => {
+      render(<AILabel kind="inline" aiText="AI" textLabel="Text goes here" />);
+      expect(screen.getByRole('button')).toHaveAttribute('aria-label', '');
+    });
+
+    it('should set aria-label when kind is default', () => {
+      render(<AILabel aiText="AI" />);
+      expect(screen.getByRole('button')).toHaveAttribute(
+        'aria-label',
+        'AI Show information'
+      );
+    });
+
+    it('should let visible text serve as accessible name in inline mode', () => {
+      render(<AILabel kind="inline" aiText="AI" textLabel="Text goes here" />);
+      expect(
+        screen.getByRole('button', { name: 'AI Text goes here' })
+      ).toBeInTheDocument();
+    });
+  });
 });
diff --git a/packages/react/src/components/AILabel/index.tsx b/packages/react/src/components/AILabel/index.tsx
@@ -214,7 +214,7 @@ export const AILabel = React.forwardRef<HTMLDivElement, AILabelProps>(
             {...rest}>
             <ToggletipButton
               className={aiLabelButtonClasses}
-              label={ariaLabelText}>
+              label={kind === 'inline' ? '' : ariaLabelText}>
               <span className={`${prefix}--ai-label__text`}>{aiText}</span>
               {kind === 'inline' && (aiTextLabel || textLabel) && (
                 <span className={`${prefix}--ai-label__additional-text`}>

diff --git a/packages/react/src/components/Tag/Tag-test.js b/packages/react/src/components/Tag/Tag-test.js
@@ -80,13 +80,10 @@ describe('Tag', () => {
           type="red"
           title="Close tag"
           text="Tag content"
-          decorator={<AILabel />}
+          decorator={<AILabel aiText="AI" />}
         />
       );
-
-      expect(
-        screen.getByRole('button', { name: 'AI Show information' })
-      ).toBeInTheDocument();
+      expect(screen.getByText('AI')).toBeInTheDocument();
     });
 
     it('should respect deprecated slug prop', () => {
@@ -96,13 +93,10 @@ describe('Tag', () => {
           type="red"
           title="Close tag"
           text="Tag content"
-          slug={<AILabel />}
+          slug={<AILabel aiText="AI" />}
         />
       );
-
-      expect(
-        screen.getByRole('button', { name: 'AI Show information' })
-      ).toBeInTheDocument();
+      expect(screen.getByText('AI')).toBeInTheDocument();
       spy.mockRestore();
     });
   });
@@ -123,20 +117,14 @@ describe('Tag', () => {
   });
 
   it('should respect decorator prop', () => {
-    render(<Tag type="red" decorator={<AILabel />} />);
-
-    expect(
-      screen.getByRole('button', { name: 'AI Show information' })
-    ).toBeInTheDocument();
+    render(<Tag type="red" decorator={<AILabel aiText="AI" />} />);
+    expect(screen.getByText('AI')).toBeInTheDocument();
   });
 
   it('should respect deprecated slug prop', () => {
     const spy = jest.spyOn(console, 'warn').mockImplementation(() => {});
-    render(<Tag type="red" slug={<AILabel />} />);
-
-    expect(
-      screen.getByRole('button', { name: 'AI Show information' })
-    ).toBeInTheDocument();
+    render(<Tag type="red" slug={<AILabel aiText="AI" />} />);
+    expect(screen.getByText('AI')).toBeInTheDocument();
     spy.mockRestore();
   });