为什么 react wai-aria 不在 camelCase 中?

Why react wai-aria is not in camelCase?

来自react docs

Note that all aria-* HTML attributes are fully supported in JSX. Whereas most DOM properties and attributes in React are camelCased, these attributes should be hyphen-cased (also known as kebab-case, lisp-case, etc) as they are in plain HTML:

AFAIK,每个 HTML 属性在反应中都被重命名为 camelCase。 有什么理由可以解释为什么 aria-* 保留原名吗?

bonus,有没有人知道,应该是<input autoFocus='autofocus'/>还是<input autofocus='autofocus'/>。前者看起来是正确的,因为我的编辑器没有发出任何警告。但是是不是属性名和属性值不一致?

原属性名中autocomplete之间没有连字符,是否也应该是autocompleteautoComplete

React API 参考提供了一些关于此的信息。在 DOM Elements,它说:

In React, all DOM properties and attributes (including event handlers) should be camelCased. For example, the HTML attribute tabindex corresponds to the attribute tabIndex in React. The exception is aria-* and data-* attributes, which should be lowercased. For example, you can keep aria-label as aria-label.

All Supported HTML Attributes 部分给出了 autoCompleteautoFocus 作为预期名称。

现在,这实际上并没有回答 为什么 aria-* 属性保持小写,但至少它清楚地说明了应该如何使用它们。

猜测: 也许这与 React 版本 15 和 16 之间发生的变化有关。博客 post“DOM Attributes in React 16" explains that custom attributes are now allowed in React 16, which were previously stripped out. It describes some concerns that an internal whitelist of attributes had become a maintenance burden, which needed to be simplified. Now arbitrary attributes can be included in JSX. I don't know how this works internally, but I suppose the aria-* attributes play some part in the story of the internal whitelist. For instance, WAI-ARIA 1.1 recently introduced several new aria-* attributes, and the WAI Personalization Semantics Content Module 工作draft 引入了很多 aui-* 属性。这两个都需要列入白名单。