Standardize events to use `key` instead of `keyCode`

[diegonvs]

What is your proposal?

Adds a utility for mapping keyCode values, because we're creating a lot of repeated mapping for it on our DXP.

Why would adopting this proposal be beneficial?

Facilitate the work when working with keydown events and avoid repetitions on our code.

What are the alternatives to this proposal?

1. Left it as is? 🤔
2. Adopt a dependency for it(frontend infra team will be sad with this 😢 😭)

[wincent]

Step 1 here, I suggest, would be compiling a list of places where we're using key events, to get a sense of how key codes are being used, and how broad we should aim for our coverage to be.

As a rough sketch, git grep -i '\b(keyup|keydown|keypress)\b' -- '*.js' '*.jsp' '*.jspf' | egrep '^modules/(apps|dxp)/' | perl -pe 's%^(.+?):(\d+).+$%- [$1:$2](https://github.com/liferay/liferay-portal/blob/5541574134ec/$1#L$2)%':

• modules/apps/adaptive-media/adaptive-media-web/src/main/resources/META-INF/resources/adaptive_media/js/EditAdaptiveMediaConfig.es.js:74
• modules/apps/adaptive-media/adaptive-media-web/src/main/resources/META-INF/resources/adaptive_media/js/EditAdaptiveMediaConfig.es.js:84
• modules/apps/app-builder/app-builder-web/src/main/resources/META-INF/resources/js/hooks/useKeyDown.es.js:32
• modules/apps/app-builder/app-builder-web/src/main/resources/META-INF/resources/js/hooks/useKeyDown.es.js:34
• modules/apps/archived/chat-web/src/main/resources/META-INF/resources/js/main.js:297
• modules/apps/archived/chat-web/src/main/resources/META-INF/resources/js/main.js:405
• modules/apps/archived/chat-web/src/main/resources/META-INF/resources/js/main.js:640
• modules/apps/archived/mail-reader-web/src/main/resources/META-INF/resources/js/main.js:823
• modules/apps/archived/powwow-portlet/docroot/meetings/js/main.js:636
• modules/apps/archived/web-form-web/src/main/resources/META-INF/resources/configuration.jsp:276
• modules/apps/calendar/calendar-web/src/main/resources/META-INF/resources/js/recurrence.js:794
• modules/apps/calendar/calendar-web/src/main/resources/META-INF/resources/js/scheduler_event_recorder.js:438
• modules/apps/data-engine/data-engine-taglib/src/main/resources/META-INF/resources/data_layout_builder/js/hooks/useKeyDown.es.js:32
• modules/apps/data-engine/data-engine-taglib/src/main/resources/META-INF/resources/data_layout_builder/js/hooks/useKeyDown.es.js:34
• modules/apps/dynamic-data-mapping/dynamic-data-mapping-form-builder/test/js/components/Page/PageRenderer.es.js:67
• modules/apps/dynamic-data-mapping/dynamic-data-mapping-form-builder/test/js/components/Page/PageRenderer.es.js:88
• modules/apps/dynamic-data-mapping/dynamic-data-mapping-form-web/src/main/resources/META-INF/resources/admin/js/main.es.js:69
• modules/apps/dynamic-data-mapping/dynamic-data-mapping-form-web/src/main/resources/META-INF/resources/admin/js/main.es.js:74
• modules/apps/dynamic-data-mapping/dynamic-data-mapping-form-web/src/main/resources/META-INF/resources/admin/js/main.es.js:79
• modules/apps/dynamic-data-mapping/dynamic-data-mapping-web/src/main/resources/META-INF/resources/js/custom_fields.js:1502
• modules/apps/fragment/fragment-collection-contributor/fragment-collection-contributor-basic-component/src/main/resources/com/liferay/fragment/collection/contributor/basic/component/dependencies/slider/index.js:24
• modules/apps/fragment/fragment-collection-contributor/fragment-collection-contributor-featured-content/src/main/resources/com/liferay/fragment/collection/contributor/featured/content/dependencies/banner-slider/index.js:24
• modules/apps/fragment/fragment-web/src/main/resources/META-INF/resources/js/fragment-editor/CodeMirrorEditor.js:253
• modules/apps/frontend-editor/frontend-editor-ckeditor-web/src/main/resources/META-INF/resources/_diffs/plugins/autocomplete/autocomplete.js:312
• modules/apps/frontend-editor/frontend-editor-tinymce-web/src/main/resources/META-INF/resources/tinymce.jsp:278
• modules/apps/frontend-editor/frontend-editor-tinymce-web/src/main/resources/META-INF/resources/tinymce_simple.jsp:198
• modules/apps/frontend-js/frontend-js-aui-web/src/main/resources/META-INF/resources/liferay/asset_categories_selector.js:388
• modules/apps/frontend-js/frontend-js-aui-web/src/main/resources/META-INF/resources/liferay/asset_tags_selector.js:215
• modules/apps/frontend-js/frontend-js-aui-web/src/main/resources/META-INF/resources/liferay/deprecated.js:409
• modules/apps/frontend-js/frontend-js-aui-web/src/main/resources/META-INF/resources/liferay/deprecated.js:424
• modules/apps/frontend-js/frontend-js-aui-web/src/main/resources/META-INF/resources/liferay/menu_toggle.js:101
• modules/apps/frontend-js/frontend-js-aui-web/src/main/resources/META-INF/resources/liferay/navigation_interaction.js:214
• modules/apps/frontend-js/frontend-js-aui-web/src/main/resources/META-INF/resources/liferay/navigation_interaction_touch.js:104
• modules/apps/frontend-js/frontend-js-aui-web/src/main/resources/META-INF/resources/liferay/panel_search.js:62
• modules/apps/frontend-js/frontend-js-web/src/main/resources/META-INF/resources/liferay/compat/modal/Modal.es.js:94
• modules/apps/frontend-theme-porygon/frontend-theme-porygon/src/js/main.js:36
• modules/apps/image-uploader/image-uploader-web/src/main/resources/META-INF/resources/view.jsp:134
• modules/apps/invitation/invitation-invite-members-web/src/main/resources/META-INF/resources/invite_members/js/main.js:36
• modules/apps/item-selector/item-selector-taglib/src/main/resources/META-INF/resources/item_selector_preview/js/ItemSelectorPreview.es.js:49
• modules/apps/item-selector/item-selector-taglib/src/main/resources/META-INF/resources/item_selector_preview/js/ItemSelectorPreview.es.js:60
• modules/apps/item-selector/item-selector-taglib/test/item_selector_preview/ItemSelectorPreview.es.js:142
• modules/apps/layout/layout-admin-web/src/main/resources/META-INF/resources/look_and_feel_theme_details.jsp:212
• modules/apps/layout/layout-content-page-editor-web/src/main/resources/META-INF/resources/page_editor/app/components/PageEditor.js:178
• modules/apps/layout/layout-content-page-editor-web/src/main/resources/META-INF/resources/page_editor/app/processors/getAlloyEditorProcessor.js:159
• modules/apps/layout/layout-content-page-editor-web/src/main/resources/META-INF/resources/page_editor/app/processors/getAlloyEditorProcessor.js:160
• modules/apps/layout/layout-content-page-editor-web/src/main/resources/META-INF/resources/page_editor/app/processors/getAlloyEditorProcessor.js:161
• modules/apps/login/login-web/src/main/resources/META-INF/resources/login.jsp:214
• modules/apps/microblogs/microblogs-web/src/main/resources/META-INF/resources/microblogs/edit_microblogs_entry.jsp:334
• modules/apps/oauth2-provider/oauth2-provider-web/src/main/resources/META-INF/resources/admin/edit_application_credentials.jsp:454
• modules/apps/portal-search/portal-search-web/src/main/resources/META-INF/resources/facets/view/modified.jsp:331
• modules/apps/portal-search/portal-search-web/src/main/resources/META-INF/resources/facets/view/modified.jsp:334
• modules/apps/portal-search/portal-search-web/src/main/resources/META-INF/resources/js/modified_facet.js:48
• modules/apps/portal-search/portal-search-web/src/main/resources/META-INF/resources/js/modified_facet.js:52
• modules/apps/portal-search/portal-search-web/src/main/resources/META-INF/resources/search.jsp:86
• modules/apps/portal-workflow/portal-workflow-web/src/main/resources/META-INF/resources/definition/edit_workflow_definition.jsp:432
• modules/apps/product-navigation/product-navigation-taglib/src/main/resources/META-INF/resources/control_menu/js/product_navigation_control_menu_add_content_search.js:34
• modules/apps/segments/segments-web/src/main/resources/META-INF/resources/js/components/inputs/CollectionInput.es.js:54
• modules/apps/site-navigation/site-navigation-admin-web/src/main/resources/META-INF/resources/js/SiteNavigationMenuEditor.js:100
• modules/dxp/apps/portal-search-tuning/portal-search-tuning-rankings-web/test/js/components/ResultRankingsForm.es.js:98
• modules/dxp/apps/portal-search-tuning/portal-search-tuning-rankings-web/test/js/components/add_result/AddResultModal.es.js:60
• modules/dxp/apps/portal-search-tuning/portal-search-tuning-rankings-web/test/js/components/add_result/AddResultSearchBar.es.js:53
• modules/dxp/apps/portal-search-tuning/portal-search-tuning-rankings-web/test/js/components/add_result/AddResultSearchBar.es.js:69
• modules/dxp/apps/portal-search-tuning/portal-search-tuning-rankings-web/test/js/components/list/FilterInput.es.js:59
• modules/dxp/apps/portal-search-tuning/portal-search-tuning-rankings-web/test/js/components/list/List.es.js:124
• modules/dxp/apps/portal-workflow/portal-workflow-kaleo-designer-web/src/main/resources/META-INF/resources/designer/js/editors.js:790
• modules/dxp/apps/portal-workflow/portal-workflow-kaleo-designer-web/src/main/resources/META-INF/resources/designer/js/editors.js:1318
• modules/dxp/apps/portal-workflow/portal-workflow-kaleo-designer-web/src/main/resources/META-INF/resources/designer/js/editors.js:2482
• modules/dxp/apps/portal-workflow/portal-workflow-kaleo-forms-web/src/main/resources/META-INF/resources/admin/js/components.js:469
• modules/dxp/apps/portal-workflow/portal-workflow-metrics-web/test/shared/components/autocomplete/Autocomplete.es.js:101
• modules/dxp/apps/portal-workflow/portal-workflow-metrics-web/test/shared/components/autocomplete/Autocomplete.es.js:107
• modules/dxp/apps/portal-workflow/portal-workflow-metrics-web/test/shared/components/autocomplete/Autocomplete.es.js:113
• modules/dxp/apps/portal-workflow/portal-workflow-metrics-web/test/shared/components/autocomplete/Autocomplete.es.js:119
• modules/dxp/apps/portal-workflow/portal-workflow-metrics-web/test/shared/components/autocomplete/AutocompleteMultiSelect.es.js:104
• modules/dxp/apps/portal-workflow/portal-workflow-metrics-web/test/shared/components/autocomplete/AutocompleteMultiSelect.es.js:109
• modules/dxp/apps/portal-workflow/portal-workflow-metrics-web/test/shared/components/autocomplete/AutocompleteMultiSelect.es.js:114
• modules/dxp/apps/portal-workflow/portal-workflow-metrics-web/test/shared/components/autocomplete/AutocompleteMultiSelect.es.js:119
• modules/dxp/apps/segments/segments-experiment-web/src/main/resources/META-INF/resources/js/components/ClickGoalPicker/ClickGoalPicker.es.js:278

Just sampling a few of those places, it seems worthwhile to add a common mapping.

[jbalsas]

[edalgrin]

I know it's just a list with the keys map but is this the right choice from an accessibility point of view?

//cc @marcoscv-work

[diegonvs]

Just for update here:

Should We consider moving to standardize key instead of keyCodes 😅 ?

Considering:

• fix: Don't allow users to input a value less than a minimum row or col value when creating a table alloy-editor#1409 (comment)
• Replace event.keyCode usages with event.key clay#3430 (comment)

[wincent]

We consider moving to standardize key instead of keyCodes

Probably. We'd need to tackle this on two fronts: in React (synthentic events) and in JS using native DOM events. And in terms of enforcement/encouragement we can try to force all key-related event handling through a central API, but that means both writing the API and creating a lint to make sure it's actually used.

In terms of priority for such work, I get that consistency etc is attractive, but I also have the gut feeling that doing all of this work may not yield a large impact, because we seem to be coming to it from a perspective of wanting to follow best practices and not because we've identified a pattern of regressions and degraded product quality. Which is not to say that we shouldn't do it, but just that we should be clear on when/why we would do it instead of other things.

[bryceosterhaus]

Using this issue for standardizing key => keyCode with an eslint rule

Additionally, we might want to use a codemod for updating DXP uses.