diff --git a/packages/react/src/components/AILabel/__tests__/AILabel-test.js b/packages/react/src/components/AILabel/__tests__/AILabel-test.js index f109d4f12c49..59e67d6adf3c 100644 --- 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(); + expect(screen.getByRole('button')).toHaveAttribute('aria-label', ''); + }); + + it('should set aria-label when kind is default', () => { + render(); + expect(screen.getByRole('button')).toHaveAttribute( + 'aria-label', + 'AI Show information' + ); + }); + + it('should let visible text serve as accessible name in inline mode', () => { + render(); + 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 index 34636f93525f..2cb17a27b5af 100644 --- 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( {...rest}> + label={kind === 'inline' ? '' : ariaLabelText}> {aiText} {kind === 'inline' && (aiTextLabel || textLabel) && ( diff --git a/packages/react/src/components/Tag/Tag-test.js b/packages/react/src/components/Tag/Tag-test.js index dff63bc04c1a..84826e78d60f 100644 --- 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={} + decorator={} /> ); - - 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={} + slug={} /> ); - - 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(} />); - - expect( - screen.getByRole('button', { name: 'AI Show information' }) - ).toBeInTheDocument(); + render(} />); + expect(screen.getByText('AI')).toBeInTheDocument(); }); it('should respect deprecated slug prop', () => { const spy = jest.spyOn(console, 'warn').mockImplementation(() => {}); - render(} />); - - expect( - screen.getByRole('button', { name: 'AI Show information' }) - ).toBeInTheDocument(); + render(} />); + expect(screen.getByText('AI')).toBeInTheDocument(); spy.mockRestore(); });