Skip to content

Commit c1d1a22

Browse files
thatblindgeyethatblindgeye
authored
Merge pull request #544 from anujrajak/main
fix(accessibility): updated aria-labels for buttons
2 parents 3c6240d + 3244f72 commit c1d1a22

File tree

13 files changed

+62
-61
lines changed

13 files changed

+62
-61
lines changed

‎packages/module/src/Message/CodeBlockMessage/CodeBlockMessage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ const CodeBlockMessage = ({
5656
{language && <div className="pf-chatbot__message-code-block-language">{language}</div>}
5757
<Button
5858
ref={buttonRef}
59-
aria-label={ariaLabel ?? 'Copy code button'}
59+
aria-label={ariaLabel ?? 'Copy code'}
6060
variant="plain"
6161
className="pf-chatbot__button--copy"
6262
onClick={(event) => handleCopy(event, children)}

‎packages/module/src/Message/Message.test.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -485,7 +485,7 @@ describe('Message', () => {
485485
it('should render code correctly', () => {
486486
render(<Message avatar="./img" role="user" name="User" content={CODE_MESSAGE} />);
487487
expect(screen.getByText('Here is some YAML code:')).toBeTruthy();
488-
expect(screen.getByRole('button', { name: 'Copy code button' })).toBeTruthy();
488+
expect(screen.getByRole('button', { name: 'Copy code' })).toBeTruthy();
489489
expect(screen.getByText(/yaml/)).toBeTruthy();
490490
expect(screen.getByText(/apiVersion:/i)).toBeTruthy();
491491
expect(screen.getByText(/helm.openshift.io\/v1beta1/i)).toBeTruthy();
@@ -503,8 +503,8 @@ describe('Message', () => {
503503
// need explicit setup since RTL stubs clipboard if you do this
504504
const user = userEvent.setup();
505505
render(<Message avatar="./img" role="user" name="User" content={CODE_MESSAGE} />);
506-
expect(screen.getByRole('button', { name: 'Copy code button' })).toBeTruthy();
507-
await user.click(screen.getByRole('button', { name: 'Copy code button' }));
506+
expect(screen.getByRole('button', { name: 'Copy code' })).toBeTruthy();
507+
await user.click(screen.getByRole('button', { name: 'Copy code' }));
508508
const clipboardText = await navigator.clipboard.readText();
509509
expect(clipboardText.trim()).toEqual(CODE.trim());
510510
});

‎packages/module/src/MessageBar/AttachButton.test.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ import { AttachButton } from './AttachButton';
77
describe('Attach button', () => {
88
it('should render button correctly', () => {
99
render(<AttachButton />);
10-
expect(screen.getByRole('button', { name: 'Attach button' })).toBeTruthy();
10+
expect(screen.getByRole('button', { name: 'Attach' })).toBeTruthy();
1111
});
1212
it('should handle isDisabled prop', () => {
1313
render(<AttachButton isDisabled />);
14-
expect(screen.getByRole('button', { name: 'Attach button' })).toBeDisabled();
14+
expect(screen.getByRole('button', { name: 'Attach' })).toBeDisabled();
1515
});
1616
it('should handle spread props, including aria-label', () => {
1717
render(<AttachButton aria-label="test" />);
@@ -20,30 +20,30 @@ describe('Attach button', () => {
2020
it('should handle onClick', async () => {
2121
const spy = jest.fn();
2222
render(<AttachButton onClick={spy} />);
23-
await userEvent.click(screen.getByRole('button', { name: 'Attach button' }));
23+
await userEvent.click(screen.getByRole('button', { name: 'Attach' }));
2424
expect(screen.getByRole('tooltip', { name: 'Attach' })).toBeTruthy();
2525
expect(spy).toHaveBeenCalledTimes(1);
2626
});
2727
it('should handle className prop', () => {
2828
render(<AttachButton className="test" />);
29-
expect(screen.getByRole('button', { name: 'Attach button' })).toHaveClass('test');
29+
expect(screen.getByRole('button', { name: 'Attach' })).toHaveClass('test');
3030
});
3131
it('should handle custom tooltip correctly', async () => {
3232
render(<AttachButton onClick={jest.fn} tooltipContent="Test" />);
33-
await userEvent.click(screen.getByRole('button', { name: 'Attach button' }));
33+
await userEvent.click(screen.getByRole('button', { name: 'Attach' }));
3434
expect(screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
3535
});
3636
it('should handle tooltipProps prop', async () => {
3737
render(<AttachButton tooltipProps={{ id: 'test' }} />);
38-
await userEvent.click(screen.getByRole('button', { name: 'Attach button' }));
38+
await userEvent.click(screen.getByRole('button', { name: 'Attach' }));
3939
expect(screen.getByRole('tooltip', { name: 'Attach' })).toHaveAttribute('id', 'test');
4040
});
4141
// Based on this because I had no idea how to do this and was looking around: https://stackoverflow.com/a/75562651
4242
// See also https://developer.mozilla.org/en-US/docs/Web/API/File/File for what that file variable is doing
4343
it('should handle onAttachAccepted prop', async () => {
4444
const spy = jest.fn();
4545
render(<AttachButton onAttachAccepted={spy} inputTestId="input" />);
46-
await userEvent.click(screen.getByRole('button', { name: 'Attach button' }));
46+
await userEvent.click(screen.getByRole('button', { name: 'Attach' }));
4747
const file = new File(['test'], 'test.json');
4848
const input = screen.getByTestId('input') as HTMLInputElement;
4949
await userEvent.upload(input, file);

‎packages/module/src/MessageBar/AttachButton.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ const AttachButtonBase: React.FunctionComponent<AttachButtonProps> = ({
6565
variant="plain"
6666
ref={innerRef}
6767
className={`pf-chatbot__button--attach ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
68-
aria-label={props['aria-label'] || 'Attach button'}
68+
aria-label={props['aria-label'] || 'Attach'}
6969
isDisabled={isDisabled}
7070
onClick={onClick ?? open}
7171
icon={

‎packages/module/src/MessageBar/MessageBar.test.tsx‎

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -73,9 +73,9 @@ describe('Message bar', () => {
7373
});
7474
it('should render correctly', () => {
7575
render(<MessageBar onSendMessage={jest.fn} />);
76-
expect(screen.getByRole('button', { name: 'Attach button' })).toBeTruthy();
77-
expect(screen.queryByRole('button', { name: 'Send button' })).toBeFalsy();
78-
expect(screen.queryByRole('button', { name: 'Microphone button' })).toBeFalsy();
76+
expect(screen.getByRole('button', { name: 'Attach' })).toBeTruthy();
77+
expect(screen.queryByRole('button', { name: 'Send' })).toBeFalsy();
78+
expect(screen.queryByRole('button', { name: 'Use microphone' })).toBeFalsy();
7979
expect(screen.getByRole('textbox', { name: /Send a message.../i })).toBeTruthy();
8080
});
8181
it('can send via enter key', async () => {
@@ -110,42 +110,42 @@ describe('Message bar', () => {
110110
const input = screen.getByRole('textbox', { name: /Send a message.../i });
111111
await userEvent.type(input, 'Hello world');
112112
expect(input).toHaveTextContent('Hello world');
113-
expect(screen.getByRole('button', { name: 'Send button' })).toBeTruthy();
113+
expect(screen.getByRole('button', { name: 'Send' })).toBeTruthy();
114114
});
115115
it('can disable send button shown when text is input', async () => {
116116
render(<MessageBar onSendMessage={jest.fn} isSendButtonDisabled />);
117117
const input = screen.getByRole('textbox', { name: /Send a message.../i });
118118
await userEvent.type(input, 'Hello world');
119119
expect(input).toHaveTextContent('Hello world');
120-
expect(screen.getByRole('button', { name: 'Send button' })).toBeTruthy();
121-
expect(screen.getByRole('button', { name: 'Send button' })).toBeDisabled();
120+
expect(screen.getByRole('button', { name: 'Send' })).toBeTruthy();
121+
expect(screen.getByRole('button', { name: 'Send' })).toBeDisabled();
122122
});
123123
it('can click send button', async () => {
124124
const spy = jest.fn();
125125
render(<MessageBar onSendMessage={spy} />);
126126
const input = screen.getByRole('textbox', { name: /Send a message.../i });
127127
await userEvent.type(input, 'Hello world');
128128
expect(input).toHaveTextContent('Hello world');
129-
const sendButton = screen.getByRole('button', { name: 'Send button' });
129+
const sendButton = screen.getByRole('button', { name: 'Send' });
130130
expect(sendButton).toBeTruthy();
131131
await userEvent.click(sendButton);
132132
expect(spy).toHaveBeenCalledTimes(1);
133133
});
134134
it('can always show send button', () => {
135135
render(<MessageBar onSendMessage={jest.fn} alwayShowSendButton />);
136-
expect(screen.getByRole('button', { name: 'Send button' })).toBeTruthy();
137-
expect(screen.getByRole('button', { name: 'Send button' })).toBeEnabled();
136+
expect(screen.getByRole('button', { name: 'Send' })).toBeTruthy();
137+
expect(screen.getByRole('button', { name: 'Send' })).toBeEnabled();
138138
});
139139
it('can disable send button if always showing', () => {
140140
render(<MessageBar onSendMessage={jest.fn} alwayShowSendButton isSendButtonDisabled />);
141-
expect(screen.getByRole('button', { name: 'Send button' })).toBeTruthy();
142-
expect(screen.getByRole('button', { name: 'Send button' })).toBeDisabled();
141+
expect(screen.getByRole('button', { name: 'Send' })).toBeTruthy();
142+
expect(screen.getByRole('button', { name: 'Send' })).toBeDisabled();
143143
});
144144
it('can handle buttonProps tooltipContent appropriately for send', async () => {
145145
render(
146146
<MessageBar onSendMessage={jest.fn} alwayShowSendButton buttonProps={{ send: { tooltipContent: 'Test' } }} />
147147
);
148-
await userEvent.click(screen.getByRole('button', { name: 'Send button' }));
148+
await userEvent.click(screen.getByRole('button', { name: 'Send' }));
149149
expect(screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
150150
});
151151
it('can handle buttonProps props appropriately for send', async () => {
@@ -203,13 +203,13 @@ describe('Message bar', () => {
203203
expect(screen.queryByRole('menuitem', { name: /Logs/i })).toBeFalsy();
204204
expect(screen.queryByRole('menuitem', { name: /YAML - Status/i })).toBeFalsy();
205205
expect(screen.queryByRole('menuitem', { name: /YAML - All contents/i })).toBeFalsy();
206-
const attachButton = screen.getByRole('button', { name: 'Attach button' });
206+
const attachButton = screen.getByRole('button', { name: 'Attach' });
207207
await userEvent.click(attachButton);
208208
expect(attachToggleClickSpy).toHaveBeenCalledTimes(1);
209209
});
210210
it('can hide attach button', () => {
211211
render(<MessageBar onSendMessage={jest.fn} hasAttachButton={false} />);
212-
expect(screen.queryByRole('button', { name: 'Attach button' })).toBeFalsy();
212+
expect(screen.queryByRole('button', { name: 'Attach' })).toBeFalsy();
213213
});
214214
// Based on this because I had no idea how to do this and was looking around: https://stackoverflow.com/a/75562651
215215
// See also https://developer.mozilla.org/en-US/docs/Web/API/File/File for what that file variable is doing
@@ -223,17 +223,17 @@ describe('Message bar', () => {
223223
buttonProps={{ attach: { inputTestId: 'input' } }}
224224
/>
225225
);
226-
expect(screen.getByRole('button', { name: 'Attach button' })).toBeTruthy();
227-
await userEvent.click(screen.getByRole('button', { name: 'Attach button' }));
226+
expect(screen.getByRole('button', { name: 'Attach' })).toBeTruthy();
227+
await userEvent.click(screen.getByRole('button', { name: 'Attach' }));
228228
const file = new File(['test'], 'test.json');
229229
const input = screen.getByTestId('input') as HTMLInputElement;
230230
await userEvent.upload(input, file);
231231
expect(input.files).toHaveLength(1);
232232
expect(spy).toHaveBeenCalledTimes(1);
233233
});
234-
it('can handle buttonProps tooltipContent appropriately for attach', async () => {
234+
it('can handle buttonProps tooltipContent appropriately for attach', async () => {
235235
render(<MessageBar onSendMessage={jest.fn} hasAttachButton buttonProps={{ attach: { tooltipContent: 'Test' } }} />);
236-
await userEvent.click(screen.getByRole('button', { name: 'Attach button' }));
236+
await userEvent.click(screen.getByRole('button', { name: 'Attach' }));
237237
expect(screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
238238
});
239239
it('can handle buttonProps props appropriately for attach', async () => {
@@ -251,12 +251,12 @@ describe('Message bar', () => {
251251
// --------------------------------------------------------------------------
252252
it('can show stop button', () => {
253253
render(<MessageBar onSendMessage={jest.fn} hasStopButton handleStopButton={jest.fn} />);
254-
expect(screen.getByRole('button', { name: 'Stop button' })).toBeTruthy();
254+
expect(screen.getByRole('button', { name: 'Stop' })).toBeTruthy();
255255
});
256256
it('can call handleStopButton', async () => {
257257
const spy = jest.fn();
258258
render(<MessageBar onSendMessage={jest.fn} hasStopButton handleStopButton={spy} />);
259-
await userEvent.click(screen.getByRole('button', { name: 'Stop button' }));
259+
await userEvent.click(screen.getByRole('button', { name: 'Stop' }));
260260
expect(spy).toHaveBeenCalledTimes(1);
261261
});
262262
it('can handle buttonProps tooltipContent appropriately for stop', async () => {
@@ -268,7 +268,7 @@ describe('Message bar', () => {
268268
buttonProps={{ stop: { tooltipContent: 'Test' } }}
269269
/>
270270
);
271-
await userEvent.click(screen.getByRole('button', { name: 'Stop button' }));
271+
await userEvent.click(screen.getByRole('button', { name: 'Stop' }));
272272
expect(screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
273273
});
274274
it('can handle buttonProps props appropriately for stop', async () => {
@@ -287,12 +287,12 @@ describe('Message bar', () => {
287287
// --------------------------------------------------------------------------
288288
it('can hide microphone button when window.SpeechRecognition is not there', () => {
289289
render(<MessageBar onSendMessage={jest.fn} hasMicrophoneButton />);
290-
expect(screen.queryByRole('button', { name: 'Microphone button' })).toBeFalsy();
290+
expect(screen.queryByRole('button', { name: 'Use microphone' })).toBeFalsy();
291291
});
292292
it('can show microphone button', () => {
293293
mockSpeechRecognition();
294294
render(<MessageBar onSendMessage={jest.fn} hasMicrophoneButton />);
295-
expect(screen.getByRole('button', { name: 'Microphone button' })).toBeTruthy();
295+
expect(screen.getByRole('button', { name: 'Use microphone' })).toBeTruthy();
296296
});
297297
it('can handle buttonProps appropriately for microphone', async () => {
298298
mockSpeechRecognition();
@@ -305,15 +305,15 @@ describe('Message bar', () => {
305305
}}
306306
/>
307307
);
308-
await userEvent.click(screen.getByRole('button', { name: 'Microphone button' }));
308+
await userEvent.click(screen.getByRole('button', { name: 'Use microphone' }));
309309
expect(screen.getByRole('tooltip', { name: 'Currently listening' })).toBeTruthy();
310-
await userEvent.click(screen.getByRole('button', { name: 'Microphone button' }));
310+
await userEvent.click(screen.getByRole('button', { name: 'Stop listening' }));
311311
expect(screen.getByRole('tooltip', { name: 'Not currently listening' })).toBeTruthy();
312312
});
313313
it('can customize the listening placeholder', async () => {
314314
mockSpeechRecognition();
315315
render(<MessageBar onSendMessage={jest.fn} hasMicrophoneButton listeningText="I am listening" />);
316-
await userEvent.click(screen.getByRole('button', { name: 'Microphone button' }));
316+
await userEvent.click(screen.getByRole('button', { name: 'Use microphone' }));
317317
const input = screen.getByRole('textbox', { name: /I am listening/i });
318318
expect(input).toBeTruthy();
319319
});
@@ -330,9 +330,9 @@ describe('Message bar', () => {
330330
});
331331
it('can be controlled', () => {
332332
render(<MessageBar onSendMessage={jest.fn} value="test" />);
333-
expect(screen.getByRole('button', { name: 'Attach button' })).toBeTruthy();
334-
expect(screen.getByRole('button', { name: 'Send button' })).toBeTruthy();
335-
expect(screen.queryByRole('button', { name: 'Microphone button' })).toBeFalsy();
333+
expect(screen.getByRole('button', { name: 'Attach' })).toBeTruthy();
334+
expect(screen.getByRole('button', { name: 'Send' })).toBeTruthy();
335+
expect(screen.queryByRole('button', { name: 'Use microphone' })).toBeFalsy();
336336
expect(screen.getByRole('textbox', { name: /Send a message.../i })).toBeTruthy();
337337
expect(screen.getByRole('textbox', { name: /Send a message.../i })).toHaveValue('test');
338338
});

‎packages/module/src/MessageBar/MicrophoneButton.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,8 @@ export const MicrophoneButton: React.FunctionComponent<MicrophoneButtonProps> =
105105
<Button
106106
variant="plain"
107107
className={`pf-chatbot__button--microphone ${isListening ? 'pf-chatbot__button--microphone--active' : ''} ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
108-
aria-label={props['aria-label'] || 'Microphone button'}
108+
aria-label={props['aria-label'] || (isListening ? 'Stop listening' : 'Use microphone')}
109+
aria-pressed={isListening}
109110
onClick={isListening ? stopListening : startListening}
110111
icon={
111112
<Icon iconSize={isCompact ? 'lg' : 'xl'} isInline>

‎packages/module/src/MessageBar/SendButton.test.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,23 +12,23 @@ const renderSend = (props?: { [key: string]: string | boolean | Omit<TooltipProp
1212
describe('Send button', () => {
1313
it('should render button correctly', () => {
1414
renderSend();
15-
expect(screen.getByRole('button', { name: 'Send button' })).toBeTruthy();
15+
expect(screen.getByRole('button', { name: 'Send' })).toBeTruthy();
1616
});
1717
it('should handle onClick correctly', async () => {
1818
const spy = jest.fn();
1919
render(<SendButton onClick={spy} />);
20-
await userEvent.click(screen.getByRole('button', { name: 'Send button' }));
20+
await userEvent.click(screen.getByRole('button', { name: 'Send' }));
2121
expect(screen.getByRole('tooltip', { name: 'Send' })).toBeTruthy();
2222
expect(spy).toHaveBeenCalledTimes(1);
2323
});
2424
it('should handle custom tooltip correctly', async () => {
2525
render(<SendButton onClick={jest.fn} tooltipContent="Test" />);
26-
await userEvent.click(screen.getByRole('button', { name: 'Send button' }));
26+
await userEvent.click(screen.getByRole('button', { name: 'Send' }));
2727
expect(screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
2828
});
2929
it('should handle className prop', () => {
3030
renderSend({ className: 'test' });
31-
expect(screen.getByRole('button', { name: 'Send button' })).toHaveClass('test');
31+
expect(screen.getByRole('button', { name: 'Send' })).toHaveClass('test');
3232
});
3333

3434
it('should handle spread props, including aria-label', () => {
@@ -37,7 +37,7 @@ describe('Send button', () => {
3737
});
3838
it('should handle tooltipProps prop', async () => {
3939
renderSend({ tooltipProps: { id: 'test' } });
40-
await userEvent.click(screen.getByRole('button', { name: 'Send button' }));
40+
await userEvent.click(screen.getByRole('button', { name: 'Send' }));
4141
expect(screen.getByRole('tooltip', { name: 'Send' })).toHaveAttribute('id', 'test');
4242
});
4343
it('should handle isCompact', () => {

‎packages/module/src/MessageBar/SendButton.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export const SendButton: React.FunctionComponent<SendButtonProps> = ({
4343
<Button
4444
variant="plain"
4545
className={`pf-chatbot__button--send ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
46-
aria-label={props['aria-label'] || 'Send button'}
46+
aria-label={props['aria-label'] || 'Send'}
4747
onClick={onClick}
4848
icon={
4949
<Icon iconSize={isCompact ? 'lg' : 'xl'} isInline>

‎packages/module/src/MessageBar/StopButton.test.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,31 +12,31 @@ const renderStop = (props?: { [key: string]: string | boolean | Omit<TooltipProp
1212
describe('Stop button', () => {
1313
it('should render button correctly', () => {
1414
renderStop();
15-
expect(screen.getByRole('button', { name: 'Stop button' })).toBeTruthy();
15+
expect(screen.getByRole('button', { name: 'Stop' })).toBeTruthy();
1616
});
1717
it('should handle onClick correctly', async () => {
1818
const spy = jest.fn();
1919
render(<StopButton onClick={spy} />);
20-
await userEvent.click(screen.getByRole('button', { name: 'Stop button' }));
20+
await userEvent.click(screen.getByRole('button', { name: 'Stop' }));
2121
expect(screen.getByRole('tooltip', { name: 'Stop' })).toBeTruthy();
2222
expect(spy).toHaveBeenCalledTimes(1);
2323
});
2424
it('should handle custom tooltip correctly', async () => {
2525
render(<StopButton onClick={jest.fn} tooltipContent="Test" />);
26-
await userEvent.click(screen.getByRole('button', { name: 'Stop button' }));
26+
await userEvent.click(screen.getByRole('button', { name: 'Stop' }));
2727
expect(screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
2828
});
2929
it('should handle className prop', () => {
3030
renderStop({ className: 'test' });
31-
expect(screen.getByRole('button', { name: 'Stop button' })).toHaveClass('test');
31+
expect(screen.getByRole('button', { name: 'Stop' })).toHaveClass('test');
3232
});
3333
it('should handle spread props, including aria-label', () => {
3434
renderStop({ 'aria-label': 'test' });
3535
expect(screen.getByRole('button', { name: 'test' }));
3636
});
3737
it('should handle tooltipProps prop', async () => {
3838
renderStop({ tooltipProps: { id: 'test' } });
39-
await userEvent.click(screen.getByRole('button', { name: 'Stop button' }));
39+
await userEvent.click(screen.getByRole('button', { name: 'Stop' }));
4040
expect(screen.getByRole('tooltip', { name: 'Stop' })).toHaveAttribute('id', 'test');
4141
});
4242
it('should handle isCompact', () => {

0 commit comments

Comments
 (0)