When code changes affect keyboard/focus behavior or interactive UI semantics, add regression tests that prove the intended interaction boundary.
Apply this by:
<button type="button"> instead of an anchor with click handlers) and add tests that assert the correct element type/role so keyboard activation is preserved.Example test intents (pattern):
// 1) Shortcut does not leak to textarea handler
it('does not reach textarea handler', () => {
render(<ChatTextArea />);
const textarea = screen.getByRole('textbox');
textarea.focus();
fireEvent.keyDown(textarea, { key: 'q', metaKey: true });
expect(onTextareaKeydown).not.toHaveBeenCalled();
});
// 2) Interactive element uses real button semantics
it('renders a real button for activation', () => {
render(<ImagesUnsupportedNotice />);
expect(screen.getByRole('button', { name: /choose model/i })).toBeInTheDocument();
});