@patternfly/chatbot 6.3.0-prerelease.10 → 6.3.0-prerelease.11

package/src/MessageBar/MicrophoneButton.tsx

@@ -105,7 +105,8 @@ export const MicrophoneButton: React.FunctionComponent<MicrophoneButtonProps> =
       <Button
         variant="plain"
         className={`pf-chatbot__button--microphone ${isListening ? 'pf-chatbot__button--microphone--active' : ''} ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
-        aria-label={props['aria-label'] || 'Microphone button'}
+        aria-label={props['aria-label'] || (isListening ? 'Stop listening' : 'Use microphone')}
+        aria-pressed={isListening}
         onClick={isListening ? stopListening : startListening}
         icon={
           <Icon iconSize={isCompact ? 'lg' : 'xl'} isInline>

package/src/MessageBar/SendButton.test.tsx

@@ -12,23 +12,23 @@ const renderSend = (props?: { [key: string]: string | boolean | Omit<TooltipProp
 describe('Send button', () => {
   it('should render button correctly', () => {
     renderSend();
-    expect(screen.getByRole('button', { name: 'Send button' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Send' })).toBeTruthy();
   });
   it('should handle onClick correctly', async () => {
     const spy = jest.fn();
     render(<SendButton onClick={spy} />);
-    await userEvent.click(screen.getByRole('button', { name: 'Send button' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Send' }));
     expect(screen.getByRole('tooltip', { name: 'Send' })).toBeTruthy();
     expect(spy).toHaveBeenCalledTimes(1);
   });
   it('should handle custom tooltip correctly', async () => {
     render(<SendButton onClick={jest.fn} tooltipContent="Test" />);
-    await userEvent.click(screen.getByRole('button', { name: 'Send button' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Send' }));
     expect(screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
   });
   it('should handle className prop', () => {
     renderSend({ className: 'test' });
-    expect(screen.getByRole('button', { name: 'Send button' })).toHaveClass('test');
+    expect(screen.getByRole('button', { name: 'Send' })).toHaveClass('test');
   });
 
   it('should handle spread props, including aria-label', () => {
@@ -37,7 +37,7 @@ describe('Send button', () => {
   });
   it('should handle tooltipProps prop', async () => {
     renderSend({ tooltipProps: { id: 'test' } });
-    await userEvent.click(screen.getByRole('button', { name: 'Send button' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Send' }));
     expect(screen.getByRole('tooltip', { name: 'Send' })).toHaveAttribute('id', 'test');
   });
   it('should handle isCompact', () => {

package/src/MessageBar/SendButton.tsx

@@ -43,7 +43,7 @@ export const SendButton: React.FunctionComponent<SendButtonProps> = ({
     <Button
       variant="plain"
       className={`pf-chatbot__button--send ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
-      aria-label={props['aria-label'] || 'Send button'}
+      aria-label={props['aria-label'] || 'Send'}
       onClick={onClick}
       icon={
         <Icon iconSize={isCompact ? 'lg' : 'xl'} isInline>

package/src/MessageBar/StopButton.test.tsx

@@ -12,23 +12,23 @@ const renderStop = (props?: { [key: string]: string | boolean | Omit<TooltipProp
 describe('Stop button', () => {
   it('should render button correctly', () => {
     renderStop();
-    expect(screen.getByRole('button', { name: 'Stop button' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Stop' })).toBeTruthy();
   });
   it('should handle onClick correctly', async () => {
     const spy = jest.fn();
     render(<StopButton onClick={spy} />);
-    await userEvent.click(screen.getByRole('button', { name: 'Stop button' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Stop' }));
     expect(screen.getByRole('tooltip', { name: 'Stop' })).toBeTruthy();
     expect(spy).toHaveBeenCalledTimes(1);
   });
   it('should handle custom tooltip correctly', async () => {
     render(<StopButton onClick={jest.fn} tooltipContent="Test" />);
-    await userEvent.click(screen.getByRole('button', { name: 'Stop button' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Stop' }));
     expect(screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
   });
   it('should handle className prop', () => {
     renderStop({ className: 'test' });
-    expect(screen.getByRole('button', { name: 'Stop button' })).toHaveClass('test');
+    expect(screen.getByRole('button', { name: 'Stop' })).toHaveClass('test');
   });
   it('should handle spread props, including aria-label', () => {
     renderStop({ 'aria-label': 'test' });
@@ -36,7 +36,7 @@ describe('Stop button', () => {
   });
   it('should handle tooltipProps prop', async () => {
     renderStop({ tooltipProps: { id: 'test' } });
-    await userEvent.click(screen.getByRole('button', { name: 'Stop button' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Stop' }));
     expect(screen.getByRole('tooltip', { name: 'Stop' })).toHaveAttribute('id', 'test');
   });
   it('should handle isCompact', () => {

package/src/MessageBar/StopButton.tsx

@@ -41,7 +41,7 @@ export const StopButton: React.FunctionComponent<StopButtonProps> = ({
     <Button
       className={`pf-chatbot__button--stop ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
       variant="link"
-      aria-label={props['aria-label'] || 'Stop button'}
+      aria-label={props['aria-label'] || 'Stop'}
       onClick={onClick}
       icon={
         <Icon iconSize={isCompact ? 'lg' : 'xl'} isInline>

package/src/MessageBox/JumpButton.test.tsx

@@ -7,20 +7,20 @@ import userEvent from '@testing-library/user-event';
 describe('JumpButton', () => {
   it('should render top button correctly', () => {
     render(<JumpButton position="top" onClick={jest.fn()} />);
-    expect(screen.getByRole('button', { name: /Jump top button/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Jump top/i })).toBeTruthy();
   });
   it('should render bottom button correctly', () => {
     render(<JumpButton position="bottom" onClick={jest.fn()} />);
-    expect(screen.getByRole('button', { name: /Jump bottom button/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Jump bottom/i })).toBeTruthy();
   });
   it('should call onClick appropriately', async () => {
     const spy = jest.fn();
     render(<JumpButton position="bottom" onClick={spy} />);
-    await userEvent.click(screen.getByRole('button', { name: /Jump bottom button/i }));
+    await userEvent.click(screen.getByRole('button', { name: /Jump bottom/i }));
     expect(spy).toHaveBeenCalledTimes(1);
   });
   it('should be hidden if isHidden prop is used', async () => {
     render(<JumpButton position="bottom" onClick={jest.fn()} isHidden />);
-    expect(screen.queryByRole('button', { name: /Jump bottom button/i })).toBeFalsy();
+    expect(screen.queryByRole('button', { name: /Jump bottom/i })).toBeFalsy();
   });
 });

package/src/MessageBox/JumpButton.tsx

@@ -24,7 +24,7 @@ const JumpButton: React.FunctionComponent<JumpButtonProps> = ({ position, isHidd
       <Button
         variant="plain"
         className={`pf-chatbot__jump pf-chatbot__jump--${position}`}
-        aria-label={`Jump ${position} button`}
+        aria-label={`Jump ${position}`}
         onClick={onClick}
       >
         <Icon iconSize="lg" isInline>

package/src/MessageBox/MessageBox.test.tsx

@@ -40,7 +40,7 @@ describe('MessageBox', () => {
     region.dispatchEvent(new Event('scroll'));
 
     await waitFor(() => {
-      userEvent.click(screen.getByRole('button', { name: /Jump bottom button/i }));
+      userEvent.click(screen.getByRole('button', { name: /Jump bottom/i }));
       expect(spy).toHaveBeenCalled();
     });
   });
@@ -63,7 +63,7 @@ describe('MessageBox', () => {
     region.dispatchEvent(new Event('scroll'));
 
     await waitFor(() => {
-      userEvent.click(screen.getByRole('button', { name: /Jump top button/i }));
+      userEvent.click(screen.getByRole('button', { name: /Jump top/i }));
       expect(spy).toHaveBeenCalled();
     });
   });