←back to thread

A BBC navigation bar component broke depending on the external monitor

(www.joshtumath.uk)
293 points ulrischa | 2 comments | 18 Nov 24 15:28 UTC | HN request time: 0.001s | source
Show context
nozzlegear ◴[18 Nov 24 16:47 UTC] No.42174177[source]▶
For anyone who didn't click through to the WebKit bug report the author submitted, a WebKit dev asked him to clarify why the BBC finds it beneficial to be able to detect that the event was sent from a keyboard. This is the author's response:

> Ironically, I want interoperability on this to help with use cases relating to accessibility.

> I work at the BBC and, on our UK website, our navigation bar menu button behaves slightly differently depending on if it is opened with a pointer or keyboard. The click event will always open the menu, but:

> - when opening with a pointer, the focus moves to the menu container.

> - when opening with a keyboard, there is no animation to open the menu and the focus moves to the first link in the menu.

> Often when opening a menu, we don't want a slightly different behaviour around focus and animations depending on if the user 'clicks' with a pointer or keyboard.

> The 'click' event is great when creating user experiences for keyboard users because it is device independent. On keyboards, it is only invoked by Space or Enter key presses. If we were to use the keydown event, we would have to check whether only the the Space or Enter keys were pressed.

Source: https://bugs.webkit.org/show_bug.cgi?id=281430

replies(5): >>42174432 #>>42174435 #>>42174511 #>>42174692 #>>42175176 #
amluto ◴[18 Nov 24 18:14 UTC] No.42175176[source]▶
This is fascinating, because the naive English interpretation of the code and the comment on that WebKit bug don't match the actual structure of the code. Here's the relevant code:

    const isInvokedByMouse = event => event.screenX > 0 || event.screenY > 0;
    const isInvokedByKeyboard = event => isEnterKey(event) || isSpaceKey(event);
Ignoring the actual conditions entirely, this code seems to be trying to categorize the event into one of two categories: mouse or keyboard. But what it actually does is to categorize into one of four categories: (mouse and not keyboard), (keyboard and not mouse), (keyboard and mouse), and (neither keyboard nor mouse). And, as the original bug shows, (neither keyboard nor mouse) is handled inappropriately. One might wonder whether (keyboard and mouse) works well.

Either the code should be deliberate about the fact that (is it a keyboard) and (is it a mouse) are separate booleans, or the code should be structured so that the actual categories are mutually exclusive. For example:

    const isInvokedByMouse = ...
and use !isInvokedByMouse to check for keyboardiness, or:

    const eventSource = ... (returns "keyboard" or "mouse")
or, perhaps even better:

    const eventSource = ... (returns "keyboard", "mouse", or "not sure")
replies(4): >>42176623 #>>42177520 #>>42179647 #>>42186662 #
nightpool ◴[18 Nov 24 20:32 UTC] No.42176623[source]▶
This is a great comment ^ whenever you use two booleans like this, you're opening yourself up to "unrepresentable state" logic errors. Finding and noticing this in code can be tricky, but it's a great example of something that should be caught during code review.
replies(1): >>42177164 #
politelemon ◴[18 Nov 24 21:18 UTC] No.42177164[source]▶
Not sure if exactly the same thing but reminds me of "Booleans are a trap"

https://katafrakt.me/2024/11/09/booleans-are-a-trap/

replies(3): >>42178236 #>>42179492 #>>42182882 #
lvturner ◴[19 Nov 24 02:16 UTC] No.42179492[source]▶
Wait—that last state doesn't make sense. With a real door, you can technically turn the key while it's open, but does that meaningfully change its state? Yet our model allows this impossible combination.

Funnily enough, I have a physical door & lock that OFTEN gets in to this state - it's exactly as irritating as it sounds, and it has very meaningful impact on it's state (it then can't be closed without first unlocking the lock!)

replies(1): >>42185470 #
1. pryelluw ◴[19 Nov 24 16:49 UTC] No.42185470{3}[source]▶
I’ve come to the conclusion that most programming problems like this can be solved my having programmers work as building superintendents for 3 months. Practical experience will open their eyes to how the world really works.
replies(1): >>42190126 #
2. lvturner ◴[20 Nov 24 01:54 UTC] No.42190126[source]▶
This leads to another wonderful gap, where programmers are expected to understand the world[0], but the world isn't expected to understand programming[1]

[0] Business, etc

[1] System design, security, database management, cost vs speed trade-offs, SCM, etc etc etc