Skip to content

Commit dd1749c

Browse files
sebmarkbagesebmarkbage
committed
Warn for ARIA typos on custom elements (#26523)
Normally we allow any attribute/property on custom elements. However it's a shared namespace. The `aria-` namespace applies to all generic elements which are shared with custom elements. So arguably adding custom extensions there is a really bad idea since it can conflict with future additions. It's possible there is a new standard one that's polyfilled by a custom element but the same issue applies to React in general that we might warn for very new additions so we just have to be quick on that. cc @josepharhar DiffTrain build for [1a1d61f](1a1d61f)
1 parent b964e2e commit dd1749c

9 files changed

+91
-147
lines changed

‎compiled/facebook-www/REVISION‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
73deff0d5162160c0aafa5cd0b87e11143fe9938
1+
1a1d61fed98a02c9b1bac029d0bc11c3e4db896d

‎compiled/facebook-www/ReactART-prod.modern.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9688,7 +9688,7 @@ var slice = Array.prototype.slice,
96889688
return null;
96899689
},
96909690
bundleType: 0,
9691-
version: "18.3.0-www-modern-6ef7b87a",
9691+
version: "18.3.0-www-modern-132fb191",
96929692
rendererPackageName: "react-art"
96939693
};
96949694
var internals$jscomp$inline_1304 = {
@@ -9719,7 +9719,7 @@ var internals$jscomp$inline_1304 = {
97199719
scheduleRoot: null,
97209720
setRefreshHandler: null,
97219721
getCurrentFiber: null,
9722-
reconcilerVersion: "18.3.0-www-modern-6ef7b87a"
9722+
reconcilerVersion: "18.3.0-www-modern-132fb191"
97239723
};
97249724
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
97259725
var hook$jscomp$inline_1305 = __REACT_DEVTOOLS_GLOBAL_HOOK__;

‎compiled/facebook-www/ReactDOM-dev.classic.js‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6625,7 +6625,7 @@ function validateProperty$1(tagName, name) {
66256625
return true;
66266626
}
66276627

6628-
function warnInvalidARIAProps(type, props) {
6628+
function validateProperties$2(type, props) {
66296629
{
66306630
var invalidProps = [];
66316631

@@ -6661,14 +6661,6 @@ function warnInvalidARIAProps(type, props) {
66616661
}
66626662
}
66636663

6664-
function validateProperties$2(type, props) {
6665-
if (isCustomComponent(type, props)) {
6666-
return;
6667-
}
6668-
6669-
warnInvalidARIAProps(type, props);
6670-
}
6671-
66726664
var didWarnValueNull = false;
66736665
function validateProperties$1(type, props) {
66746666
{
@@ -39622,7 +39614,7 @@ function createFiberRoot(
3962239614
return root;
3962339615
}
3962439616

39625-
var ReactVersion = "18.3.0-www-classic-0bf83ba8";
39617+
var ReactVersion = "18.3.0-www-classic-3fd40c97";
3962639618

3962739619
function createPortal$1(
3962839620
children,

‎compiled/facebook-www/ReactDOM-dev.modern.js‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6406,7 +6406,7 @@ function validateProperty$1(tagName, name) {
64066406
return true;
64076407
}
64086408

6409-
function warnInvalidARIAProps(type, props) {
6409+
function validateProperties$2(type, props) {
64106410
{
64116411
var invalidProps = [];
64126412

@@ -6442,14 +6442,6 @@ function warnInvalidARIAProps(type, props) {
64426442
}
64436443
}
64446444

6445-
function validateProperties$2(type, props) {
6446-
if (isCustomComponent(type, props)) {
6447-
return;
6448-
}
6449-
6450-
warnInvalidARIAProps(type, props);
6451-
}
6452-
64536445
var didWarnValueNull = false;
64546446
function validateProperties$1(type, props) {
64556447
{
@@ -33645,7 +33637,7 @@ function createFiberRoot(
3364533637
return root;
3364633638
}
3364733639

33648-
var ReactVersion = "18.3.0-www-modern-6ef7b87a";
33640+
var ReactVersion = "18.3.0-www-modern-132fb191";
3364933641

3365033642
function createPortal$1(
3365133643
children,

‎compiled/facebook-www/ReactDOMServer-dev.classic.js‎

Lines changed: 27 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ if (__DEV__) {
1919
var React = require("react");
2020
var ReactDOM = require("react-dom");
2121

22-
var ReactVersion = "18.3.0-www-classic-67d0ef6c";
22+
var ReactVersion = "18.3.0-www-classic-609488e0";
2323

2424
// This refers to a WWW module.
2525
var warningWWW = require("warning");
@@ -773,31 +773,6 @@ function checkControlledValueProps(tagName, props) {
773773
}
774774
}
775775

776-
function isCustomComponent(tagName, props) {
777-
if (tagName.indexOf("-") === -1) {
778-
return typeof props.is === "string";
779-
}
780-
781-
switch (tagName) {
782-
// These are reserved SVG and MathML elements.
783-
// We don't mind this list too much because we expect it to never grow.
784-
// The alternative is to track the namespace in a few places which is convoluted.
785-
// https://w3c.github.io/webcomponents/spec/custom/#custom-elements-core-concepts
786-
case "annotation-xml":
787-
case "color-profile":
788-
case "font-face":
789-
case "font-face-src":
790-
case "font-face-uri":
791-
case "font-face-format":
792-
case "font-face-name":
793-
case "missing-glyph":
794-
return false;
795-
796-
default:
797-
return true;
798-
}
799-
}
800-
801776
var ariaProperties = {
802777
"aria-current": 0,
803778
// state
@@ -928,7 +903,7 @@ function validateProperty$1(tagName, name) {
928903
return true;
929904
}
930905

931-
function warnInvalidARIAProps(type, props) {
906+
function validateProperties$2(type, props) {
932907
{
933908
var invalidProps = [];
934909

@@ -964,14 +939,6 @@ function warnInvalidARIAProps(type, props) {
964939
}
965940
}
966941

967-
function validateProperties$2(type, props) {
968-
if (isCustomComponent(type, props)) {
969-
return;
970-
}
971-
972-
warnInvalidARIAProps(type, props);
973-
}
974-
975942
var didWarnValueNull = false;
976943
function validateProperties$1(type, props) {
977944
{
@@ -1001,6 +968,31 @@ function validateProperties$1(type, props) {
1001968
}
1002969
}
1003970

971+
function isCustomComponent(tagName, props) {
972+
if (tagName.indexOf("-") === -1) {
973+
return typeof props.is === "string";
974+
}
975+
976+
switch (tagName) {
977+
// These are reserved SVG and MathML elements.
978+
// We don't mind this list too much because we expect it to never grow.
979+
// The alternative is to track the namespace in a few places which is convoluted.
980+
// https://w3c.github.io/webcomponents/spec/custom/#custom-elements-core-concepts
981+
case "annotation-xml":
982+
case "color-profile":
983+
case "font-face":
984+
case "font-face-src":
985+
case "font-face-uri":
986+
case "font-face-format":
987+
case "font-face-name":
988+
case "missing-glyph":
989+
return false;
990+
991+
default:
992+
return true;
993+
}
994+
}
995+
1004996
// When adding attributes to the HTML or SVG allowed attribute list, be sure to
1005997
// also add them to this module to ensure casing and incorrect name
1006998
// warnings.

‎compiled/facebook-www/ReactDOMServer-dev.modern.js‎

Lines changed: 27 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ if (__DEV__) {
1919
var React = require("react");
2020
var ReactDOM = require("react-dom");
2121

22-
var ReactVersion = "18.3.0-www-modern-cbdf727f";
22+
var ReactVersion = "18.3.0-www-modern-609fee14";
2323

2424
// This refers to a WWW module.
2525
var warningWWW = require("warning");
@@ -773,31 +773,6 @@ function checkControlledValueProps(tagName, props) {
773773
}
774774
}
775775

776-
function isCustomComponent(tagName, props) {
777-
if (tagName.indexOf("-") === -1) {
778-
return typeof props.is === "string";
779-
}
780-
781-
switch (tagName) {
782-
// These are reserved SVG and MathML elements.
783-
// We don't mind this list too much because we expect it to never grow.
784-
// The alternative is to track the namespace in a few places which is convoluted.
785-
// https://w3c.github.io/webcomponents/spec/custom/#custom-elements-core-concepts
786-
case "annotation-xml":
787-
case "color-profile":
788-
case "font-face":
789-
case "font-face-src":
790-
case "font-face-uri":
791-
case "font-face-format":
792-
case "font-face-name":
793-
case "missing-glyph":
794-
return false;
795-
796-
default:
797-
return true;
798-
}
799-
}
800-
801776
var ariaProperties = {
802777
"aria-current": 0,
803778
// state
@@ -928,7 +903,7 @@ function validateProperty$1(tagName, name) {
928903
return true;
929904
}
930905

931-
function warnInvalidARIAProps(type, props) {
906+
function validateProperties$2(type, props) {
932907
{
933908
var invalidProps = [];
934909

@@ -964,14 +939,6 @@ function warnInvalidARIAProps(type, props) {
964939
}
965940
}
966941

967-
function validateProperties$2(type, props) {
968-
if (isCustomComponent(type, props)) {
969-
return;
970-
}
971-
972-
warnInvalidARIAProps(type, props);
973-
}
974-
975942
var didWarnValueNull = false;
976943
function validateProperties$1(type, props) {
977944
{
@@ -1001,6 +968,31 @@ function validateProperties$1(type, props) {
1001968
}
1002969
}
1003970

971+
function isCustomComponent(tagName, props) {
972+
if (tagName.indexOf("-") === -1) {
973+
return typeof props.is === "string";
974+
}
975+
976+
switch (tagName) {
977+
// These are reserved SVG and MathML elements.
978+
// We don't mind this list too much because we expect it to never grow.
979+
// The alternative is to track the namespace in a few places which is convoluted.
980+
// https://w3c.github.io/webcomponents/spec/custom/#custom-elements-core-concepts
981+
case "annotation-xml":
982+
case "color-profile":
983+
case "font-face":
984+
case "font-face-src":
985+
case "font-face-uri":
986+
case "font-face-format":
987+
case "font-face-name":
988+
case "missing-glyph":
989+
return false;
990+
991+
default:
992+
return true;
993+
}
994+
}
995+
1004996
// When adding attributes to the HTML or SVG allowed attribute list, be sure to
1005997
// also add them to this module to ensure casing and incorrect name
1006998
// warnings.

‎compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js‎

Lines changed: 26 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -770,31 +770,6 @@ function checkControlledValueProps(tagName, props) {
770770
}
771771
}
772772

773-
function isCustomComponent(tagName, props) {
774-
if (tagName.indexOf("-") === -1) {
775-
return typeof props.is === "string";
776-
}
777-
778-
switch (tagName) {
779-
// These are reserved SVG and MathML elements.
780-
// We don't mind this list too much because we expect it to never grow.
781-
// The alternative is to track the namespace in a few places which is convoluted.
782-
// https://w3c.github.io/webcomponents/spec/custom/#custom-elements-core-concepts
783-
case "annotation-xml":
784-
case "color-profile":
785-
case "font-face":
786-
case "font-face-src":
787-
case "font-face-uri":
788-
case "font-face-format":
789-
case "font-face-name":
790-
case "missing-glyph":
791-
return false;
792-
793-
default:
794-
return true;
795-
}
796-
}
797-
798773
var ariaProperties = {
799774
"aria-current": 0,
800775
// state
@@ -925,7 +900,7 @@ function validateProperty$1(tagName, name) {
925900
return true;
926901
}
927902

928-
function warnInvalidARIAProps(type, props) {
903+
function validateProperties$2(type, props) {
929904
{
930905
var invalidProps = [];
931906

@@ -961,14 +936,6 @@ function warnInvalidARIAProps(type, props) {
961936
}
962937
}
963938

964-
function validateProperties$2(type, props) {
965-
if (isCustomComponent(type, props)) {
966-
return;
967-
}
968-
969-
warnInvalidARIAProps(type, props);
970-
}
971-
972939
var didWarnValueNull = false;
973940
function validateProperties$1(type, props) {
974941
{
@@ -998,6 +965,31 @@ function validateProperties$1(type, props) {
998965
}
999966
}
1000967

968+
function isCustomComponent(tagName, props) {
969+
if (tagName.indexOf("-") === -1) {
970+
return typeof props.is === "string";
971+
}
972+
973+
switch (tagName) {
974+
// These are reserved SVG and MathML elements.
975+
// We don't mind this list too much because we expect it to never grow.
976+
// The alternative is to track the namespace in a few places which is convoluted.
977+
// https://w3c.github.io/webcomponents/spec/custom/#custom-elements-core-concepts
978+
case "annotation-xml":
979+
case "color-profile":
980+
case "font-face":
981+
case "font-face-src":
982+
case "font-face-uri":
983+
case "font-face-format":
984+
case "font-face-name":
985+
case "missing-glyph":
986+
return false;
987+
988+
default:
989+
return true;
990+
}
991+
}
992+
1001993
// When adding attributes to the HTML or SVG allowed attribute list, be sure to
1002994
// also add them to this module to ensure casing and incorrect name
1003995
// warnings.

0 commit comments

Comments
 (0)