manabi-gakushu.benesse.ne.jp - Unable to type "-" character

[webcompat-bot]

URL: https://manabi-gakushu.benesse.ne.jp/gakushu/typing/nihongonyuryoku.html

Browser / Version: Firefox 75.0
Operating System: Windows 10
Tested Another Browser: Yes

Problem type: Site is not usable
Description: can't type - key
Steps to Reproduce:

View the screenshot

Browser Configuration

• gfx.webrender.all: false
• gfx.webrender.blob-images: true
• gfx.webrender.enabled: false
• image.mem.shared: true
• buildID: 20200309155231
• channel: beta
• hasTouchScreen: false
• mixed active content blocked: false
• mixed passive content blocked: false
• tracking content blocked: false

View console log messages

From webcompat.com with ❤️

[softvision-oana-arbuzov]

Thanks for the report, I was able to reproduce the issue. It seems that even if "Shift" key is pressed "-" key is not typed.

Steps to reproduce:

1. Navigate to https://manabi-gakushu.benesse.ne.jp/gakushu/typing/nihongonyuryoku.html
2. Click "スタート" button.
   
3. Click "タイピングを開始する" button.
   
4. Click "Space" bar on your keyboard to start the exercise.
5. Start typing until reaching a word with "-" character.
6. Hold "Shift" key and click "-" character.
7. Observe behavior.

Expected result:
"-" character is typed.

Actual result:
"-" character is not typed,

Note: The issue is not reproducible on Chrome.

Tested with:
Browser / Version: Firefox Nightly 76.0a1 (2020-03-09)
Operating System: Windows 10 Pro

Moving to Needsdiagnosis for further investigation.

[ksy36]

Thanks for the detailed instructions @softvision-oana-arbuzov

This following function is handling the keydown:

    b.prototype.handleKeydown = function (b) {
      var d = this.method.codeToKeyInfo(b.keyCode, b.shiftKey, b.location);
      if (this.handlers.handleKeyDown && !this.handlers.handleKeyDown(d)) return !1;
      if (b.keyCode == a.BSKEY_CODE && b.preventDefault(), this.method.isUndoCode(b.keyCode)) return 0 === this.inputUndoBuffers.length ? void (this.handlers.handleSpecialKey && this.handlers.handleSpecialKey(this.currentData, d))  : void (this.method.canUndoChar(this.inputUndoBuffers.concat(), this.inputBuffer.charAt(this.inputBuffer.length - 1)) ? (this.inputBuffer = this.inputUndoBuffers.pop(), this.answerStringss = this.answerStringssUndoBuffers.pop(), this.result.correctCount--, this.resultTotal.correctCount--, this.handlers.handleUndoKey && this.handlers.handleUndoKey(this.currentData, this.nextKey, this.result))  : this.handlers.handleSpecialKey && this.handlers.handleSpecialKey(this.currentData, d));
      if (null == d.chara) return void (this.handlers.handleSpecialKey && this.handlers.handleSpecialKey(this.currentData, d));
...
}

In codeToKeyInfo() event.keyCode is being used to look up in this.CODE_CHARS_TABLE which is a key value mapping, with keys representing numerical code of the pressed key and values are arrays containing the actual value and the value with shift key pressed:

    b.prototype.codeToKeyInfo = function (b, c, d) {
      var e = new a.KeyInfo;
      return e.code = b,
      e.chara = this.CODE_CHARS_TABLE[b] ? this.CODE_CHARS_TABLE[b][c ? 1 : 0] : null,
      e.shifted = c,
      e.location = d,
      e
    },

The problem here is that event.keyCode for "-" is 173 in Firefox and 189 in Chrome, and while they have key 189 in this.CODE_CHARS_TABLE, 173 is missing. If they could add it, this will fix the issue, though this is possible that other keys are missing in the mapping.

The site should probably consider using KeyboardEvent.code instead of KeyboardEvent.keyCode since it's no longer recommended

@karlcow would you be able to contact the site?