即使 Ember.js 中的功能标志为 false，为什么 HTML 中仍使用 tabindex=0？

Question

我正在开发一个 Ember.js 项目，在该项目中我实现了一个功能标记系统来根据特定条件控制某些 UI 元素。但是，我遇到过一种情况，即使功能标志设置为 false，值为 0 的 tabindex 属性仍然应用于 HTML 元素。

这是我使用的代码的简化版本：

{{#if shouldShowElement}}
  {{#if isFeatureFlagEnabled}}
    <div class="element" tabindex="0">
      Element content
    </div>
  {{else}}
    <div class="element">
      Element content
    </div>
  {{/if}}
{{/if}}

在这种情况下，当 isFeatureFlagEnabled 为 false 时，我希望 tabindex 属性不会出现在渲染的 HTML 中。然而，它仍然出现。

我已经验证执行此代码块时 isFeatureFlagEnabled 确实为 false。什么可能导致这种行为？我是否遗漏了 Ember.js 或 HTML 的基本方面？

Answer 1

我认为这里有两件事之一在起作用。

1. 逻辑并不是按照你的想法去做。 或者
2. 外部或当前未知的东西（例如附加组件）正在添加 tabindex。

将代码更改为此将告诉您逻辑或 div 元素是否有问题。

{{#if shouldShowElement}}
  {{#if isFeatureFlagEnabled}}
    <div class="element" tabindex="0">
      Feature flag ENABLED
    </div>
  {{else}}
    <div class="element">
      Feature flag DISABLED
    </div>
  {{/if}}
{{else}}
  shouldShowElement is false
{{/if}}

出于兴趣，为什么要向 div 添加 tabindex="0" ？它几乎总是不必要的，有时还会引起混乱。看 https://tetraological.com/blog/2024/04/04/when-to-use-tabindex-0/