Some of checking pressed key should replace event.keyCode with event.key

Created on 12 November 2024, 7 months ago

Problem/Motivation

Some of keyboard event uses event.keyCode to identify which key is pressed, but according to MDN document this property is deprecated.

Proposed resolution

Use event.key property. This resolusion is already used in the navigation module.

Note:

/core/misc/dialog/dialog.jquery-ui.js has event.keyCode and compares with jQuery.ui.keyCode value, but
jQuery UI is maintainance mode now. So this file is out of scope on this issue.

Remaining tasks

User interface changes

No.

API changes

No.

Data model changes

No.

Release notes snippet

📌 Task
Status

Active

Version

11.0 🔥

Component

javascript

Created by

🇯🇵Japan tom konda Kanagawa, Japan

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @tom konda
  • 🇯🇵Japan tom konda Kanagawa, Japan
  • Pipeline finished with Failed
    7 months ago
    Total: 496s
    #336534
  • 🇯🇵Japan tom konda Kanagawa, Japan

    /core/modules/locale/js/locale.admin.js uses event.code instead of event.key because event.key when space key is pressed, returns ' ' (a white space character) which make it little difficult code reading.

  • 🇯🇵Japan tom konda Kanagawa, Japan
  • 🇯🇵Japan tom konda Kanagawa, Japan

    I investigated a FunctionalJavaScriptTests behavior with the drupalci/chromedriver:dev container and found set wrong value to event.key and event.code on my local environment.
    Behat\Mink\Element\NodeElement::keyDown() only calls driver's keyDown() method, so may have a problem on WebDriver or other.

    Investigation method

    1. Change /core/misc/tabledrag.js to record some KeyboardEvent value to drupalSetting on a keydown event. (Code 1)
    2. Change /core/tests/Drupal/FunctionalJavascriptTests/TableDrag/TableDragTest.php to output drupalSettings.keyTest value. (Code 2)
    3. Test /core/tests/Drupal/FunctionalJavascriptTests/TableDrag/TableDragTest.php

    Code 1

        // On blur, fire the same function as a touchend/mouseup. This is used to
        // update values after a row has been moved through the keyboard support.
        $handle.on('blur', (event) => {
          if (self.rowObject && self.safeBlur) {
            self.dropRow(event, self);
          }
        });
    
        // Add arrow-key support to the handle.
        $handle.on('keydown', (event) => {
          // I added below code for investigation.
          const {charCode, keyCode, code, key} = event;
          drupalSettings.keyTest = {
            charCode, keyCode, code, key
          };
          // I added above code for investigation.
    

    Code 2

      protected function moveRowWithKeyboard(NodeElement $row, $arrow, $repeat = 1): void {
        $keys = [
          'left' => 37,
          'right' => 39,
          'up' => 38,
          'down' => 40,
        ];
        if (!isset($keys[$arrow])) {
          throw new \InvalidArgumentException('The arrow parameter must be one of "left", "right", "up" or "down".');
        }
    
        $key = $keys[$arrow];
    
        $handle = $row->find('css', 'a.tabledrag-handle');
        $handle->focus();
    
        for ($i = 0; $i < $repeat; $i++) {
          $this->markRowHandleForDragging($handle);
          $handle->keyDown($key);
          // I added below code for investigation.
          print_r($this->getDrupalSettings()['keyTest']);
          // I added above code for investigation.
          $handle->keyUp($key);
          $this->waitUntilDraggingCompleted($handle);
        }
    
        $handle->blur();
      }
    

    Result

    PHPUnit 10.5.38 by Sebastian Bergmann and contributors.
    
    Runtime:       PHP 8.3.13
    Configuration: /opt/drupal/web/core/phpunit.xml.dist
    
    ..Array
    (
        [charCode] => 39
        [code] => 
        [key] => '
        [keyCode] => 39
    )
    FArray
    (
        [charCode] => 39
        [code] => 
        [key] => '
        [keyCode] => 39
    )
    Array
    (
        [charCode] => 39
        [code] => 
        [key] => '
        [keyCode] => 39
    )
    Array
    (
        [charCode] => 39
        [code] => 
        [key] => '
        [keyCode] => 39
    )
    Array
    (
        [charCode] => 40
        [code] => 
        [key] => (
        [keyCode] => 40
    )
    Array
    (
        [charCode] => 37
        [code] => 
        [key] => %
        [keyCode] => 37
    )
    FArray
    (
        [charCode] => 39
        [code] => 
        [key] => '
        [keyCode] => 39
    )
    Array
    (
        [charCode] => 39
        [code] => 
        [key] => '
        [keyCode] => 39
    )
    Array
    (
        [charCode] => 40
        [code] => 
        [key] => (
        [keyCode] => 40
    )
    Array
    (
        [charCode] => 37
        [code] => 
        [key] => %
        [keyCode] => 37
    )
    Array
    (
        [charCode] => 40
        [code] => 
        [key] => (
        [keyCode] => 40
    )
    Array
    (
        [charCode] => 39
        [code] => 
        [key] => '
        [keyCode] => 39
    )
    FArray
    (
        [charCode] => 40
        [code] => 
        [key] => (
        [keyCode] => 40
    )
    Array
    (
        [charCode] => 39
        [code] => 
        [key] => '
        [keyCode] => 39
    )
    Array
    (
        [charCode] => 39
        [code] => 
        [key] => '
        [keyCode] => 39
    )
    F                                                              6 / 6 (100%)Array
    (
        [charCode] => 39
        [code] => 
        [key] => '
        [keyCode] => 39
    )
    
  • Pipeline finished with Failed
    2 months ago
    Total: 865s
    #456397
  • Pipeline finished with Failed
    2 months ago
    Total: 688s
    #457287
Production build 0.71.5 2024