Fix tabIndex attribute for SVG (#11033)
* Fix tabIndex attribute for SVG * Update the attribute table
Dan Abramov committed
Oct 2, 2017 at 18:52 UTC
fbd6b9ded6f7c40bfde62c4881b364f54e73a026
3 files changed
+21
-6
fixtures/attribute-behavior/AttributeTableSnapshot.md
+6
-6
@@ -10768,7 +10768,7 @@
10768
| `tabIndex=(string 'false')`| (initial)| `<number: -1>` |
10769
| `tabIndex=(string 'on')`| (initial)| `<number: -1>` |
10770
| `tabIndex=(string 'off')`| (initial)| `<number: -1>` |
10771
-| `tabIndex=(symbol)`| (initial, warning)| `<number: -1>` |
10771
+| `tabIndex=(symbol)`| (initial, warning, ssr error, ssr mismatch)| `<number: -1>` |
10772
| `tabIndex=(function)`| (initial, warning)| `<number: -1>` |
10773
| `tabIndex=(null)`| (initial)| `<number: -1>` |
10774
| `tabIndex=(undefined)`| (initial)| `<number: -1>` |
@@ -10781,19 +10781,19 @@
10781
| `tabIndex=(array with string)`| (initial)| `<number: -1>` |
10782
| `tabIndex=(empty array)`| (initial)| `<number: -1>` |
10783
| `tabIndex=(object)`| (initial)| `<number: -1>` |
10784
-| `tabIndex=(numeric string)`| (initial, ssr mismatch)| `<number: -1>` |
10784
+| `tabIndex=(numeric string)`| (changed)| `<number: 42>` |
10785
| `tabIndex=(-1)`| (initial)| `<number: -1>` |
10786
-| `tabIndex=(0)`| (initial, ssr mismatch)| `<number: -1>` |
10787
-| `tabIndex=(integer)`| (initial, ssr mismatch)| `<number: -1>` |
10786
+| `tabIndex=(0)`| (changed)| `<number: 0>` |
10787
+| `tabIndex=(integer)`| (changed)| `<number: 1>` |
10788
| `tabIndex=(NaN)`| (initial, warning)| `<number: -1>` |
10789
-| `tabIndex=(float)`| (initial, ssr mismatch)| `<number: -1>` |
10789
+| `tabIndex=(float)`| (changed)| `<number: 99>` |
10790
| `tabIndex=(true)`| (initial, warning)| `<number: -1>` |
10791
| `tabIndex=(false)`| (initial, warning)| `<number: -1>` |
10792
| `tabIndex=(string 'true')`| (initial)| `<number: -1>` |
10793
| `tabIndex=(string 'false')`| (initial)| `<number: -1>` |
10794
| `tabIndex=(string 'on')`| (initial)| `<number: -1>` |
10795
| `tabIndex=(string 'off')`| (initial)| `<number: -1>` |
10796
-| `tabIndex=(symbol)`| (initial, warning)| `<number: -1>` |
10796
+| `tabIndex=(symbol)`| (initial, warning, ssr error, ssr mismatch)| `<number: -1>` |
10797
| `tabIndex=(function)`| (initial, warning)| `<number: -1>` |
10798
| `tabIndex=(null)`| (initial)| `<number: -1>` |
10799
| `tabIndex=(undefined)`| (initial)| `<number: -1>` |
src/renderers/dom/shared/HTMLDOMPropertyConfig.js
+2
@@ -67,6 +67,8 @@ var HTMLDOMPropertyConfig = {
67
// Style must be explicitly set in the attribute list. React components
68
// expect a style object
69
style: 0,
70
+ // Keep it in the whitelist because it is case-sensitive for SVG.
71
+ tabIndex: 0,
72
// itemScope is for for Microdata support.
73
// See http://schema.org/docs/gs.html
74
itemScope: HAS_BOOLEAN_VALUE,
src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
+13
@@ -1243,6 +1243,19 @@ describe('ReactDOMServerIntegration', () => {
1243
);
1244
});
1245
1246
+ itRenders('svg element with a tabIndex attribute', async render => {
1247
+ let e = await render(<svg tabIndex="1" />);
1248
+ expect(e.tabIndex).toBe(1);
1249
+ });
1250
+
1251
+ itRenders(
1252
+ 'svg element with a badly cased tabIndex attribute',
1253
+ async render => {
1254
+ let e = await render(<svg tabindex="1" />, 1);
1255
+ expect(e.tabIndex).toBe(1);
1256
+ },
1257
+ );
1258
+
1259
itRenders('a math element', async render => {
1260
const e = await render(<math />);
1261
expect(e.childNodes.length).toBe(0);