From b97df8c09eb405c1db3d7fca7a34fa0b6cdcd01e Mon Sep 17 00:00:00 2001 From: Gido Manders Date: Wed, 11 Dec 2024 22:01:32 +0100 Subject: [PATCH] improvement: tabindex and enter on icon with onClick When an icon has onClick functionality, users should also be able to focus the icon and trigger the onclick with the keyboard. Added onKeyUp event to Icon to trigger onclick when pressing enter. Added tabindex to make icon focusable with the keyboard when onClick is specified. --- src/core/Button/__snapshots__/Button.test.tsx.snap | 6 ++++++ .../__snapshots__/ConfirmButton.test.tsx.snap | 1 + .../__snapshots__/CopyToClipboard.test.tsx.snap | 1 + .../__snapshots__/FavoriteIcon.test.tsx.snap | 2 ++ src/core/Icon/Icon.test.tsx | 9 +++++++++ src/core/Icon/Icon.tsx | 11 ++++++++++- .../__snapshots__/SearchInput.test.tsx.snap | 1 + .../__snapshots__/DateTimeInput.test.tsx.snap | 1 + .../__snapshots__/ImageUpload.test.tsx.snap | 4 ++++ .../EpicDetail/__snapshots__/EpicDetail.test.tsx.snap | 1 + .../__snapshots__/EpicExpander.test.tsx.snap | 1 + .../EpicSort/__snapshots__/EpicSort.test.tsx.snap | 1 + 12 files changed, 38 insertions(+), 1 deletion(-) diff --git a/src/core/Button/__snapshots__/Button.test.tsx.snap b/src/core/Button/__snapshots__/Button.test.tsx.snap index 48afc78b..56eb9a78 100644 --- a/src/core/Button/__snapshots__/Button.test.tsx.snap +++ b/src/core/Button/__snapshots__/Button.test.tsx.snap @@ -362,6 +362,7 @@ exports[`Component: Button ui icon only disabled is disabled 1`] = ` save @@ -377,6 +378,7 @@ exports[`Component: Button ui icon only disabled is enabled 1`] = ` save @@ -392,6 +394,7 @@ exports[`Component: Button ui icon only full-width full width and icon left 1`] save @@ -407,6 +410,7 @@ exports[`Component: Button ui icon only full-width full width and icon right 1`] save @@ -422,6 +426,7 @@ exports[`Component: Button ui icon only inProgress inProgress is false 1`] = ` save @@ -463,6 +468,7 @@ exports[`Component: Button ui icon only that when no icon is provided it will fa block diff --git a/src/core/ConfirmButton/__snapshots__/ConfirmButton.test.tsx.snap b/src/core/ConfirmButton/__snapshots__/ConfirmButton.test.tsx.snap index a523e2f7..535adb46 100644 --- a/src/core/ConfirmButton/__snapshots__/ConfirmButton.test.tsx.snap +++ b/src/core/ConfirmButton/__snapshots__/ConfirmButton.test.tsx.snap @@ -75,6 +75,7 @@ exports[`Component: ConfirmButton ui only icon 1`] = ` delete diff --git a/src/core/CopyToClipboard/__snapshots__/CopyToClipboard.test.tsx.snap b/src/core/CopyToClipboard/__snapshots__/CopyToClipboard.test.tsx.snap index 63ce2c02..06dc26da 100644 --- a/src/core/CopyToClipboard/__snapshots__/CopyToClipboard.test.tsx.snap +++ b/src/core/CopyToClipboard/__snapshots__/CopyToClipboard.test.tsx.snap @@ -21,6 +21,7 @@ exports[`Component: CopyToClipboard ui default 1`] = ` content_copy diff --git a/src/core/FavoriteIcon/__snapshots__/FavoriteIcon.test.tsx.snap b/src/core/FavoriteIcon/__snapshots__/FavoriteIcon.test.tsx.snap index 167446a8..18b3e634 100644 --- a/src/core/FavoriteIcon/__snapshots__/FavoriteIcon.test.tsx.snap +++ b/src/core/FavoriteIcon/__snapshots__/FavoriteIcon.test.tsx.snap @@ -4,6 +4,7 @@ exports[`Component: FavoriteIcon ui favorite 1`] = `
star @@ -14,6 +15,7 @@ exports[`Component: FavoriteIcon ui not favorite 1`] = `
star_border diff --git a/src/core/Icon/Icon.test.tsx b/src/core/Icon/Icon.test.tsx index 9420aaf8..2015b130 100644 --- a/src/core/Icon/Icon.test.tsx +++ b/src/core/Icon/Icon.test.tsx @@ -123,6 +123,15 @@ describe('Icon', () => { expect(onClickSpy).toHaveBeenCalledTimes(1); }); + it('should call the "onClick" event when the icon has focus and the enter key is pressed', () => { + const onClickSpy = jest.fn(); + + render(); + + fireEvent.keyUp(screen.getByText('alarm'), { key: 'Enter' }); + + expect(onClickSpy).toHaveBeenCalledTimes(1); + }); it('should call the "onClick" event when the icon is clicked and is explicitly enabled', () => { const onClickSpy = jest.fn(); diff --git a/src/core/Icon/Icon.tsx b/src/core/Icon/Icon.tsx index 1aca2a3e..9fc3b91d 100644 --- a/src/core/Icon/Icon.tsx +++ b/src/core/Icon/Icon.tsx @@ -37,7 +37,9 @@ export type Props = { /** * Optional onClick event for when the Icon is clicked. */ - onClick?: (event: React.MouseEvent) => void; + onClick?: ( + event: React.MouseEvent | React.KeyboardEvent + ) => void; /** * Optionally whether the button is disabled @@ -117,9 +119,16 @@ export function Icon({ onClick(event); } }} + onKeyUp={(event) => { + if (event.key === 'Enter') { + const target = event.target as HTMLElement; + target.click(); + } + }} className={classes} {...hoverEvents} autoFocus={autoFocus} + tabIndex={onClick ? 0 : undefined} > {icon} diff --git a/src/core/SearchInput/__snapshots__/SearchInput.test.tsx.snap b/src/core/SearchInput/__snapshots__/SearchInput.test.tsx.snap index 0e6a7f99..84e20cee 100644 --- a/src/core/SearchInput/__snapshots__/SearchInput.test.tsx.snap +++ b/src/core/SearchInput/__snapshots__/SearchInput.test.tsx.snap @@ -37,6 +37,7 @@ exports[`Component: SearchInput ui with value 1`] = ` > close diff --git a/src/form/DateTimeInput/__snapshots__/DateTimeInput.test.tsx.snap b/src/form/DateTimeInput/__snapshots__/DateTimeInput.test.tsx.snap index 0b1b0754..91fe1bf1 100644 --- a/src/form/DateTimeInput/__snapshots__/DateTimeInput.test.tsx.snap +++ b/src/form/DateTimeInput/__snapshots__/DateTimeInput.test.tsx.snap @@ -40,6 +40,7 @@ exports[`Component: DateTimeInput ui visible label 1`] = ` > close diff --git a/src/form/ImageUpload/__snapshots__/ImageUpload.test.tsx.snap b/src/form/ImageUpload/__snapshots__/ImageUpload.test.tsx.snap index 58b20628..0bbe4eba 100644 --- a/src/form/ImageUpload/__snapshots__/ImageUpload.test.tsx.snap +++ b/src/form/ImageUpload/__snapshots__/ImageUpload.test.tsx.snap @@ -35,6 +35,7 @@ exports[`Component: ImageUpload ui edit as circle 1`] = ` rotate_left @@ -45,6 +46,7 @@ exports[`Component: ImageUpload ui edit as circle 1`] = ` rotate_right @@ -129,6 +131,7 @@ exports[`Component: ImageUpload ui edit as rect 1`] = ` rotate_left @@ -139,6 +142,7 @@ exports[`Component: ImageUpload ui edit as rect 1`] = ` rotate_right diff --git a/src/table/EpicTable/widgets/EpicDetail/__snapshots__/EpicDetail.test.tsx.snap b/src/table/EpicTable/widgets/EpicDetail/__snapshots__/EpicDetail.test.tsx.snap index 1c112710..491ac57b 100644 --- a/src/table/EpicTable/widgets/EpicDetail/__snapshots__/EpicDetail.test.tsx.snap +++ b/src/table/EpicTable/widgets/EpicDetail/__snapshots__/EpicDetail.test.tsx.snap @@ -10,6 +10,7 @@ exports[`Component: EpicDetail ui 1`] = ` > close diff --git a/src/table/EpicTable/widgets/EpicExpander/__snapshots__/EpicExpander.test.tsx.snap b/src/table/EpicTable/widgets/EpicExpander/__snapshots__/EpicExpander.test.tsx.snap index da06eb4c..6d6b10a7 100644 --- a/src/table/EpicTable/widgets/EpicExpander/__snapshots__/EpicExpander.test.tsx.snap +++ b/src/table/EpicTable/widgets/EpicExpander/__snapshots__/EpicExpander.test.tsx.snap @@ -8,6 +8,7 @@ exports[`Component: EpicExpander ui is open 1`] = ` expand_less diff --git a/src/table/EpicTable/widgets/EpicSort/__snapshots__/EpicSort.test.tsx.snap b/src/table/EpicTable/widgets/EpicSort/__snapshots__/EpicSort.test.tsx.snap index 43184c58..205aefa7 100644 --- a/src/table/EpicTable/widgets/EpicSort/__snapshots__/EpicSort.test.tsx.snap +++ b/src/table/EpicTable/widgets/EpicSort/__snapshots__/EpicSort.test.tsx.snap @@ -4,6 +4,7 @@ exports[`Component: EpicSort ui is ASC 1`] = `
arrow_drop_up