【Hacker News搬运】BBC导航栏组件因外部显示器而损坏

[hackernews]

Title: A BBC navigation bar component broke depending on the external monitor

BBC导航栏组件因外部显示器而损坏

Text:

hn link

Url: https://www.joshtumath.uk/posts/2024-11-08-how-a-bbc-navigation-bar-component-broke-depending-on-which-external-monitor-it-was-on/

很抱歉，作为一个AI，我无法直接访问外部链接或获取网站内容。不过，我可以根据你提供的链接和描述来猜测这篇文章的内容，并提供一个基于假设的分析和总结。

文章标题是 "How a BBC navigation bar component broke depending on which external monitor it was on"，这表明文章可能讨论了一个与BBC网站相关的导航组件如何在不同外部显示器上表现不一致的问题。

以下是一个基于假设的内容分析和总结：

**内容分析：**
1. **导航组件问题**：文章可能会介绍BBC网站上的导航组件是如何设计的，以及它是如何集成到网站的整体布局和功能中的。
2. **显示器兼容性问题**：文章的核心内容可能是关于这个导航组件在不同外部显示器上表现不一致的问题。这可能包括尺寸、布局错位或交互问题。
3. **技术细节**：文章可能会深入探讨导致这些问题的技术细节，例如CSS样式、HTML结构或JavaScript交互的问题。
4. **影响和解决方案**：文章可能会讨论这个问题对用户体验的影响，以及BBC团队是如何诊断和修复这个问题的。可能包括代码更改、浏览器兼容性测试或与其他开发者的协作。

**总结：**
这篇文章提供了一个案例研究，说明了在使用外部显示器时，网页组件可能出现的兼容性问题。通过分析BBC导航组件在不同显示器上的不一致表现，文章揭示了在网页设计和开发中考虑多显示器兼容性的重要性。文章还可能强调了在测试阶段进行彻底的交叉浏览器和设备测试的必要性，以及如何通过团队合作和技术调试来解决这类问题。

请注意，以上内容是基于文章标题的假设分析，实际的文内内容可能会有所不同。

Post by: ulrischa

Comments:

nozzlegear: 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:<p>> <i>Ironically, I want interoperability on this to help with use cases relating to accessibility.</i><p>> <i>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:</i><p>> - <i>when opening with a pointer, the focus moves to the menu container.</i><p>> - <i>when opening with a keyboard, there is no animation to open the menu and the focus moves to the first link in the menu.</i><p>> <i>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.</i><p>> <i>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.</i><p>Source: <a href="https://bugs.webkit.org/show_bug.cgi?id=281430" rel="nofollow">https://bugs.webkit.org/show_bug.cgi?id=281430</a>

nozzlegear: 对于那些没有；在点击作者提交的WebKit错误报告时，一位WebKit开发人员要求他澄清为什么BBC认为能够检测到事件是从键盘发送的是有益的。这是作者；s的回应：<p>&gt<i> 具有讽刺意味的是，我希望这方面的互操作性有助于解决与可访问性相关的用例</i> <p>&gt<i> 我在英国广播公司工作，在我们的英国网站上，我们的导航栏菜单按钮的行为略有不同，具体取决于它是用指针还是键盘打开的。点击事件将始终打开菜单，但：</i><p>&gt；-<i> 当用指针打开时，焦点会移动到菜单容器</i> <p>&gt；-<i> 用键盘打开时，没有动画来打开菜单，焦点会移动到菜单中的第一个链接</i> <p>&gt<i> 通常在打开菜单时，我们不会；不希望根据用户是否愿意在焦点和动画方面有稍微不同的行为；点击；使用指针或键盘</i> <p>&gt<i> ■；单击■；在为键盘用户创建用户体验时，该事件非常重要，因为它与设备无关。在键盘上，只有按空格键或Enter键才能调用它。如果我们要使用keydown事件，我们必须检查是否只按下了空格键或Enter键</i> <p>来源：<a href=“https:”bugs.webkit.org“show_bug.cgi？id=281430”rel=“nofollow”>https:”&#x2F；bugs.webkit.org；show_bug.cgi？id=281430</a>

marcellus23: > All we had to do was change the isInvokedByMouse to check that screenX and screenY don't equal 0, rather than checking if they are greater than 0.<p>It's obviously extremely unlikely but what if the mouse is actually at 0,0 when the user clicks? I'm not very familiar with JS, is checking for != 0 really the best/only way to do this?<p>EDIT: actually upon going back, I realized I didn't fully process this sentence originally but it seems to address this:<p>> We should probably do further refactoring of the event handler function, since it's complicated by the fact that it also handles keydown events. For now, though, this fix will do just fine.

marcellus23: &gt；我们所要做的就是更改isInvokedByMouse以检查屏幕X和屏幕Y是否；t等于0，而不是检查它们是否大于0；这显然极不可能，但如果用户点击时鼠标实际上位于0,0，该怎么办？我；我不太熟悉JS，正在检查！=0真的是最好的；唯一的办法是什么<p> 编辑：实际上，在回去的时候，我意识到我没有；最初没有完全处理这个句子，但它似乎解决了这个问题：<p>&gt；我们可能应该对事件处理程序函数进行进一步的重构，因为它；它还处理keydown事件，这一事实使情况变得复杂。不过，就目前而言，这种修复方法会做得很好。

8organicbits: Kudos to BBC for investing in accessibility, and unfortunately discovering a nasty bug.<p>As an industry, why haven't we figured out how to make drop downs that consistently open for all users? Is accessibility just that hard? Are there web frameworks/web components BBC should be using that already handle this?<p>I've been wary (as a backend-focused full-stack developer) about tweaking the browsers components. There's so much nuance to how they work and the implementations are battle tested. The idea of creating a custom text box (for example) without doing extensive research of text box behavior across platforms seems ripe for failure. I notice broken copy/paste and dropped characters often enough (on major corporate sites too). Why are text boxes broken in 2024? React feels arrogant to me now.<p>Personally, I've tried to handle this with server-side templates, CSS frameworks like Bulma, minimal JS. It's not viable for sites demanding slick custom branding (vanity?) but my text boxes work and my site doesn't cost a fortune to develop. Is it accessible to BBC standards? I'm not sure.

8organicbits: BBC在可访问性方面的投资值得称赞，但不幸的是，它发现了一个严重的漏洞<p> 作为一个行业，为什么haven；我们不是已经想出了如何让下拉菜单对所有用户始终开放吗？可访问性真的那么难吗？是否有web框架；BBC应该使用已经处理过这个问题的web组件吗<p> 我；我（作为一名专注于后端的全栈开发人员）对调整浏览器组件持谨慎态度。那里；它们的工作方式有很多细微差别，实现也经过了战斗测试。例如，在不对跨平台的文本框行为进行广泛研究的情况下创建自定义文本框的想法似乎已经成熟，可能会失败。我注意到副本已损坏；经常粘贴和删除字符（在主要公司网站上也是如此）。2024年为什么文本框会损坏？React现在对我来说很傲慢<p> 就我个人而言，我；我试图用服务器端模板、Bulma等CSS框架、最小的JS来处理这个问题。它；对于要求光滑的自定义品牌（虚荣？）的网站来说，这是不可行的，但我的文本框可以工作，而我的网站则不行；开发起来不花一大笔钱。是否符合BBC标准？我；我不确定。

watusername: This seems like a self-inflicted bug resulted from incorrect heuristics (assumption that positive screenX/Y values represent mouse event), and the investigation was complicated by inadequate tracing/logging.<p>Instead of checking the more appropriate property that other commenters have suggested (pointerType), I'm a bit surprised that the solution given by the author is to patch up the shaky heuristics even more:<p>> We could deduce from our final two clues the solution: we need to check for negative numbers as well as positive numbers when checking the screenX and screenY coordinates.

watusername: 这似乎是由于不正确的启发式方法（假设正的屏幕X·Y值代表鼠标事件）造成的自我造成的错误，并且由于跟踪不足，调查变得复杂；测井<p> 与其检查其他评论者建议的更合适的属性（pointerType），我；我有点惊讶，作者给出的解决方案是进一步修补摇摇欲坠的启发式方法：<p>&gt；我们可以从最后两条线索中推断出解决方案：在检查屏幕X和屏幕Y坐标时，我们需要检查负数和正数。

account42: Why are websites getting mouse position in screen coordinates in the first place?

account42: 为什么网站首先会在屏幕坐标中获得鼠标位置？